BRFlabbyTable

이것은 꼬르륵꼬르륵 움직일 수 있는 UItableView입니다.(참조 링크)
유기적인 운동 스카이프 등도 채택됐다.
플랫 디자인과의 상성도 좋고 외관도 좋으니 자유롭게 사용할 수 있다면 멋집니다!
BRFlabbyTable는 Apache licence를 기반으로 사용할 수 있습니다.
모처럼 OSS인데 어떤 구조인지 살펴봅시다.
이번에는 릴리즈 버전 1.0.0을 활용했다.

BRMainViewController

먼저 샘플을 열고 주요 ViewController를 보십시오.
여기서 BRFlabbyTable의 사용 방법과 구조를 알 수 있습니다.
먼저 delegate부터 시작합니다.
여기에 등장하는 delegate는 3개입니다.UITableViewDelegate
UITableViewDataSource
BRFlabbyTableManagerDelegate네.UITableViewDelegate와 UITableViewDataSource는 특별한 설명이 필요 없다.
한시- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPathUItable ViewCell이 아니라 BRFlabby Table ViewCell의 귀환 부분입니다.
즉, BRFlabbyTable는 독립된 테이블뷰가 아니라 UItable ViewCell에 의해 이루어진 것이다.
그다음BRFlabbyTableManagerDelegate, 여기는.- (UIColor *)flabbyTableManager:(BRFlabbyTableManager *)tableManager flabbyColorForIndexPath:(NSIndexPath *)indexPath오직 이런 방법밖에 없다.
지정된 IndexPath의 배경색을 반환합니다.
ViewController 섹션에 설명되어 있습니다.
멋져 보이지만 UItableView 사용법을 훼손하지 않고도 구현할 수 있고, 기존 프로젝트의 UItableView 부분만 교체하면 가능한 친화력 높은 OSS다.
이제 드디어 소스를 보러 가야겠어요.

BRflabbyTable 소스

BRflabbyTable의 구조는 크게 3개로 나뉜다BRFlabbyTableManager
BRFlabbyTableViewCell
NSIndexPath+BRFlabbyTable네.

BRFlabbyTableViewCell

이 셀은 UItable ViewCell을 계승하여 BRFlabbyTable Manager가 지정한 방식으로 그려집니다.
이 때문에 drawrect가 소스의 절반을 차지했다.
drawrect의 동작은 크게 두 개로 나뉜다

_flabbyHighlightState == BRFlabbyHighlightStateCellTouched || !_isFlabby || (fabs(_verticalVelocity) < 1.0 && _flabbyHighlightState == BRFlabbyHighlightStateNone)

시의 동작은 한마디로'정지시의 동작'이다.
난잡하고 무질서한 조건이 있지만 한계치와 공사상태의 조건이기도 하다.
여기서 하면 쉬워요.

CGContextSetFillColorWithColor(ctx, [_flabbyColor CGColor]);
        CGContextFillRect(ctx, rect);

셀만 발랐을 뿐이야.
또 하나는 상술한 조건에 부합되는 부분, 즉 손가락이나 롤러 등으로 유기적인 운동을 하는 부분을 묘사한 것이다.
아까처럼 셀 전체를 바르고 나면 세 가지가 있어요.

switch (_flabbyHighlightState) {
            case BRFlabbyHighlightStateCellAboveTouched:
                controlPointX1 = _touchXLocationInCell + x;
                controlPointX2 = _touchXLocationInCell + x;
                controlPointX3 = x + (w/2 + x) + (w - (w/2 + x))/2;
                controlPointX4 = (x + (w/2 + x))/2;
                controlPointY1 = HIGHLIGHT_Y_CONTROL_POINT;
                controlPointY2 = y+h+controlYOffset;
                CGContextSetFillColorWithColor(ctx, [_flabbyColorAbove CGColor]);
                CGContextFillRect(ctx, CGRectMake(x, y, w, h/2));
                break;
            case BRFlabbyHighlightStateCellBelowTouched:
                controlPointX1 = (x + (w/2 + x))/2;
                controlPointX2 = x + (w/2 + x) + (w - (w/2 + x))/2;
                controlPointX3 = _touchXLocationInCell + x;
                controlPointX4 = _touchXLocationInCell + x;
                controlPointY1 = controlYOffset;
                controlPointY2 = y+h-HIGHLIGHT_Y_CONTROL_POINT;
                CGContextSetFillColorWithColor(ctx, [_flabbyColorBelow CGColor]);
                CGContextFillRect(ctx, CGRectMake(x, y+h/2, w, h/2));
                break;
            default:
                controlPointX1 = (x + (w/2 + x))/2;
                controlPointX2 = x + (w/2 + x) + (w - (w/2 + x))/2;
                controlPointX3 = controlPointX2;
                controlPointX4 = controlPointX1;
                controlPointY1 = y+controlYOffset;
                controlPointY2 = y+h+controlYOffset;
                break;
        }

이 의견 차이는 각자의 것이다

손가락을 이렇게 배치하는 셀을 중심으로 위아래 셀을 지정합니다.
여기서 직감이 좋은 사람은 이 BRflabbyTable가 눈의 착각을 이용했다는 것을 알아차릴 수 있을 거라고 생각합니다.

네, 가운데 칸은 위아래로 갈라진 것이 아니라 위아래 칸이 튀어나온 부분입니다.

노란색과 파란색 부분은 위아래 칸을 그리는 부분입니다.
스크롤할 때 방향에 따라 모두 B R F l a b y H g h l 높이 tState Cell AboveTouched 또는 B R F l b b y H g h l 높이 State Cell BelowTouched로 설정하면 됩니다.
X1, X2, X3, X4 및 Y1, Y2의 조합 4점을 기준으로 그리기

        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, nil, x, y);
        CGPathAddCurveToPoint(path, nil, controlPointX1, controlPointY1, controlPointX2, controlPointY1, x+w, y);
        CGPathAddLineToPoint(path, nil, x+w, y+h);
        CGPathAddCurveToPoint(path, nil, controlPointX3, controlPointY2, controlPointX4, controlPointY2, x, y+h);
        CGPathCloseSubpath(path);
        CGContextAddPath(ctx, path);
        CGContextSetFillColorWithColor(ctx, [_flabbyColor CGColor]);
        CGContextFillPath(ctx);
        CGPathRelease(path);

이런 코드로 곡선을 그리고 있어요.
각 점을 그리는 위치는 다음과 같습니다.

상하의 곡선은 각각 두 개의 점으로 묘사된다.
따라서 BRflabbyTable의 유기적인 UItable ViewCell은 눈의 착각을 이용해 세포를 노출시키는 술책이다.
또한 사용하는 그래픽 함수도 곡선 함수일 뿐 내용으로 볼 때 이외에도 (좋은 의미에서도) 간단한 구조이다.
관심 있는 사람은 가볼 수 있다BRFlabbyTableManager와NSIndexPath+BRFlabbyTable.NSIndexPath+BRFlabbyTable에서 앞뒤 색깔을 얻은 부분BRFlabbyTableManager에서 공사의 위치를 얻은 부분을 볼 수 있다.
신사 숙녀