iOS 可以縱向橫向滑動的表格實現

劉光軍_Shine發表於2017-02-21

背景

 668737-46abe7c1cb371cd1
screenCut.gif

這個效果是今天公司專案裡面遇上的,也是第一次遇見這種需求,所以記錄下來,效果如上圖。需求主要是可以實現上下的滑動,並且同時最左側的“線路名稱”這一列在向左滑動的時候是不能跟隨滾動的。這個功能主要是實現使用者可以方便檢視關於一下難以看全的列表資料。下面說一下思路。

程式碼大體思路

由上面的GIF圖和基本需求描述我們第一個想到的東西就是萬能的tableview,沒錯,這個功能的完成當然離不開tableview,那麼tableview應該怎樣發揮它的功力呢,左右側的資訊需要對稱,所以在這裡我使用了兩個tableview,也就是最左側線路名稱這一列是一個tableview,右側的粉紅色字型這些行是一個tableview。上下滑動兩者關聯是使用scrollview完成的。那接下來就結合程式碼簡單說一下,也方便我以後回頭看,哈哈哈。

程式碼解析

  • 這是需要的原材料,每個變數都有註釋它的功能了,一眼懂。titleTableView是最左側的線路名稱這一列。infoTableView是粉紅色字型這些。contentViewtitleTableView和最上方(除了“線路名稱”)這一列內容的superView

  • 這是所需要的資料配置,我把裡面所有需要的資料都放在陣列李典裡面了。我比較懶。哈哈哈哈

  • 分步來看,首先是頭部的,這個titleLabel是最左上角的“線路名稱”這四個字,contentView的配置,上面說了這個contentView的作用的,從它的frame看出來,_contentView = [[UIScrollView alloc] initWithFrame:CGRectMake(_kOriginX, 0, _kScreenWidth - _kOriginX, _kScreenHeight)];它的x_kOriginX也就是預留的最左側的空間。最上面的一列使用for迴圈建立出來的label

  • 那接下來就是配置最左側那一欄和左側粉紅色字型那些行。也就這兩個tableview建立的。

  • 這是tableview的代理方法實現。在cellForRowAtIndexPath這個代理方法中,將兩個tableviewcell分開來寫。

  • 這個方法就是實現上下滑動時候,左側和右側tableview聯動的實現方法。

總結

啊,寫完感覺也是比較簡單,就是基本方法的配合使用,當時想的時候也是沒有能一下想出來,還是自己基本功不好的原因吧。把這個效果的實現記錄在這裡,也是為了提醒自己,也就是這個功能比較簡單,但是再怎樣的功能都是靠最基本的東西堆砌的。思想很重要,但是最重要的還是去實現,光想沒有用,人不是靠嘴活的。與君共勉。
額,這個是我打著盹寫完的,如果您看到這裡了,真的是特別感謝,有點兒困了,北京,晚安。

程式碼地址:https://github.com/irembeu/HorizontalSwipListView.git

打賞支援我寫出更多好文章,謝謝!

打賞作者

打賞支援我寫出更多好文章,謝謝!

任選一種支付方式

iOS 可以縱向橫向滑動的表格實現 iOS 可以縱向橫向滑動的表格實現

相關文章