iOS-UITableView 頭部彈性拉伸效果

1.需要了解的東西

1.****貝塞爾曲線****:UIBezierPath是在 UIKit 中的一個類,繼承于NSObject,可以創(chuàng)建基于矢量的路徑.此類是Core Graphics框架關于path的一個OC封裝虐拓。使用此類可以定義常見的圓形饰潜、多邊形等形狀 奔脐。我們使用直線测萎、弧(arc)來創(chuàng)建復雜的曲線形狀沪铭。每一個直線段或者曲線段的結束的地方是下一個的開始的地方壮池。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths杀怠。
2火窒。****繪圖****:這個直接會在代碼中體現(xiàn)出來

2.實現(xiàn)的思路

大體思路

在tableView視圖的后面添加一個自定義視圖,通過tableView (ScrollView)的代理方法驮肉,每當視圖滾動的時候都去繪制一個圖形

細節(jié)

1.首先熏矿,畫出這個弧形軌跡,這里需要用到貝塞爾曲線,確定三個點:兩個拐點,一個控點票编,這樣就能畫出圖形的軌跡了褪储;
2.我們只要調節(jié)的就是那個控點的值,這里對應的就是tableView 的 ****contentOffset.y****慧域,所以我們要給自定義視圖一個變量鲤竹,來保存這個值,畫圖的時候 這個值 就是控點的位置昔榴;
3.對于畫圖辛藻,我們需要在- (void)drawRect:(CGRect)rect 方法下面寫繪圖的方法

值的注意的

重繪操作仍然在drawRect方法中完成,但是蘋果不建議直接調用drawRect方法互订,當然如果你強直直接調用此方法吱肌,當然是沒有效果的。蘋果要求我們調用UIView類中的setNeedsDisplay方法仰禽,則程序會自動調用drawRect方法進行重繪氮墨。(調用setNeedsDisplay會自動調用drawRect)
在UIView中,重寫drawRect: (CGRect) aRect方法,可以自己定義想要畫的圖案.且此方法一般情況下只會畫一次.也就是說這個drawRect方法一般情況下只會被掉用一次. 當某些情況下想要手動重畫這個View,只需要掉用[self setNeedsDisplay]方法即可.

也就是說 如果你要重新繪制的畫就要調用 [xxView setNeedsDisplay]

效果圖

1.gif

3.不多嗶嗶 上代碼

1.首先,在我們的自定義視圖里 加一個屬性,用來記錄tableView 的偏移量

@property (nonatomic, assign) CGFloat offsetY;

2.drawRect方法

- (void)drawRect:(CGRect)rect
{
    //初始化一個貝塞爾曲線
    UIBezierPath *path = [UIBezierPath bezierPath];
    //這個點可以認為 其中一個guaidian
    [path moveToPoint:CGPointMake(0, 0)];
    //添加另外一個拐點 和控點
    [path addQuadCurveToPoint:CGPointMake(self.frame.size.width, 0) controlPoint:CGPointMake(self.frame.size.width/2,-(_offsetY * 1.2))];
    //閉合曲線
    [path closePath];
    
    //路徑有了 下面是填充圖形
    CGContextRef ref = UIGraphicsGetCurrentContext();
    CGContextAddPath(ref, path.CGPath);
    [[UIColor blueColor] set];
    CGContextFillPath(ref);
}

3.在scrollView 的代理方法里 每次滾動我們都要重新繪制圖形

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y;
    _list.offsetY = offsetY;
    [_list setNeedsDisplay];
}

至此吐葵,彈性的效果就全部做完了

需要擴展的

這其中的效果规揪,是一個對稱的曲線,假如是一個不規(guī)則的曲線温峭,我們用貝塞爾曲線怎么畫呢猛铅,控點 和 拐點 我們應該怎么設置呢?后面等我研究一下再寫凤藏,嘻嘻嘻

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末奸忽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子清笨,更是在濱河造成了極大的恐慌月杉,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抠艾,死亡現(xiàn)場離奇詭異苛萎,居然都是意外死亡,警方通過查閱死者的電腦和手機检号,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門腌歉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人齐苛,你說我怎么就攤上這事翘盖。” “怎么了凹蜂?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵馍驯,是天一觀的道長阁危。 經(jīng)常有香客問我,道長汰瘫,這世上最難降的妖魔是什么狂打? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮混弥,結果婚禮上趴乡,老公的妹妹穿的比我還像新娘。我一直安慰自己蝗拿,他們只是感情好晾捏,可當我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哀托,像睡著了一般惦辛。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上萤捆,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天裙品,我揣著相機與錄音俗批,去河邊找鬼俗或。 笑死,一個胖子當著我的面吹牛岁忘,可吹牛的內容都是我干的辛慰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼干像,長吁一口氣:“原來是場噩夢啊……” “哼帅腌!你這毒婦竟也來了?” 一聲冷哼從身側響起麻汰,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤速客,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后五鲫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體溺职,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年位喂,在試婚紗的時候發(fā)現(xiàn)自己被綠了浪耘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡塑崖,死狀恐怖七冲,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情规婆,我是刑警寧澤澜躺,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布蝉稳,位于F島的核電站,受9級特大地震影響掘鄙,放射性物質發(fā)生泄漏颠区。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一通铲、第九天 我趴在偏房一處隱蔽的房頂上張望毕莱。 院中可真熱鬧,春花似錦颅夺、人聲如沸朋截。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽部服。三九已至,卻和暖如春拗慨,著一層夾襖步出監(jiān)牢的瞬間廓八,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工赵抢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留剧蹂,地道東北人。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓烦却,卻偏偏與公主長得像宠叼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子其爵,可洞房花燭夜當晚...
    茶點故事閱讀 43,554評論 2 349

推薦閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫冒冬、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,066評論 4 62
  • *面試心聲:其實這些題本人都沒怎么背,但是在上海 兩周半 面了大約10家 收到差不多3個offer,總結起來就是把...
    Dove_iOS閱讀 27,131評論 30 470
  • 現(xiàn)在是2017年1月19日摩渺,從北京回家后的第四天简烤。 從候車室等車開始,就被方便面味一路熏著摇幻,狹窄的硬臥上...
    小二家的貓閱讀 328評論 0 0
  • 午夜外賣 潘玉琪一直有胃病横侦,這是她上大學以來不按時吃飯的壞習慣導致的。這天晚上囚企,她和室友在寢室里逛網(wǎng)店丈咐,滿目琳...
    小小阿鑫閱讀 380評論 0 1