線上教育系統開發中，tableview列表分割槽的實現方式

在各類線上教育系統中，往往會包含知識付費模組，這些模組中，網課的章節通常會以列表的方式展現。那麼列表中的分割槽構成是如何透過程式碼實現的呢？接下來，小編就帶大家看看，在 IOS版本的 線上教育系統開發 中，tableview列表分割槽的實現方式 。

效果圖：

具體實現步驟：

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 圓角弧度半徑
    CGFloat cornerRadius = 7.5f;
    // 設定cell的背景色為透明，如果不設定這個的話，則原來的背景色不會被覆蓋
    cell.backgroundColor = UIColor.clearColor;
    
    // 建立一個shapeLayer
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    CAShapeLayer *backgroundLayer = [[CAShapeLayer alloc] init]; //顯示選中
    // 建立一個可變的影像Path控制程式碼，該路徑用於儲存繪圖資訊
    CGMutablePathRef pathRef = CGPathCreateMutable();
    // 獲取cell的size
    // 第一個引數,是整個 cell 的 bounds, 第二個引數是距左右兩端的距離,第三個引數是距上下兩端的距離
    CGRect bounds = CGRectInset(cell.bounds, 0, 0);
    
    // CGRectGetMinY：返回物件頂點座標
    // CGRectGetMaxY：返回物件底點座標
    // CGRectGetMinX：返回物件左邊緣座標
    // CGRectGetMaxX：返回物件右邊緣座標
    // CGRectGetMidX: 返回物件中心點的X座標
    // CGRectGetMidY: 返回物件中心點的Y座標
    
    // 這裡要判斷分組列表中的第一行，每組section的第一行，每組section的中間行
    
    // CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);
    if (indexPath.row == 0) {
        // 初始起點為cell的左下角座標
        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));
        // 起始座標為左下角，設為p，（CGRectGetMinX(bounds), CGRectGetMinY(bounds)）為左上角的點，設為p1(x1,y1)，(CGRectGetMidX(bounds), CGRectGetMinY(bounds))為頂部中點的點，設為p2(x2,y2)。然後連線p1和p2為一條直線l1，連線初始點p到p1成一條直線l，則在兩條直線相交處繪製弧度為r的圓角。
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
        // 終點座標為右下角座標點，把繪圖資訊都放到路徑中去,根據這些路徑就構成了一塊區域了
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));
        
    } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {
        // 初始起點為cell的左上角座標
        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);
        // 新增一條直線，終點座標為右下角座標點並放到路徑中去
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
    } else {
        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), 0);
        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), 0);
        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));
 
    }
// 把已經繪製好的可變影像路徑賦值給圖層，然後圖層根據這影像path進行影像渲染render

以上，就是 IOS版本的 線上教育系統開發 中，tableview列表分割槽的實現方式 。