1. 程式人生 > >實現外賣選餐時兩級tableView聯動效果

實現外賣選餐時兩級tableView聯動效果

最近實現了下餓了麼中選餐時兩級tableView聯動效果,先上效果圖,大家感受一下:


聯動效果

下面說下具體實現步驟:
首先分解一下,實現這個需求主要是兩點,一是點選左邊tableView,同時滾動右邊tableView到具體的位置。二是拖動右邊tableView選中左邊tableView對應的某一行。要實現這個需求有一點很重要:左邊的tableView每一行對應的是右邊tableView的每個分割槽,OK,Just Do It.

實現點選左邊tableView同時滾動右邊tableView,很簡單,只需要實現tableView的代理方法- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

然後在代理方法裡邊拿到右邊的tableView,實現讓其滾動到第indexPath.row分割槽,第0行即可,程式碼如下:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    // 如果點選的是右邊的tableView,不做任何處理
    if (tableView == self.rightTableView) return;
    // 點選左邊的tableView,設定選中右邊的tableView某一行。左邊的tableView的每一行對應右邊tableView的每個分割槽
[self.rightTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] animated:YES scrollPosition:UITableViewScrollPositionTop]; }

我們這裡不處理右邊tableView的點選事件,所以if (tableView == self.rightTableView) return;

接下來我們實現 拖動右邊tableView選中左邊tableView對應的某一行,我們要動態選中左邊的tableView,就需要拿到現在滾動到了那個分割槽,UITableView有兩個代理方法,- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section // 一個頭標題即將顯示的時候掉用

- (void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section // 一個頭標題即將消失的時候掉用
利用這兩個方法就可以拿到當前所在分割槽實現這個功能了。

但是我總覺得這個方法不好,還有個更簡單的方法,其實tableView有個極不常用,但很牛X的方法,叫做indexPathsForVisibleRows,官方文件解釋是:

The value of this property is an array of NSIndexPath objects each representing a row index and section index that together identify a visible row in the table view. If no rows are visible, the value is nil.

簡單意思就是,它返回一個裝著目前螢幕上可見的cell的indexPath集合。

好的,重點來了,拿到這個集合,不就能拿到目前螢幕上頂端的cell的indexpath了嗎,那就如願以償的拿到現在所在第indexpath.section個分割槽了。

說了這麼多,上程式碼:

 #pragma mark - UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ // 監聽tableView滑動
    // 如果現在滑動的是左邊的tableView,不做任何處理
    if ((UITableView *)scrollView == self.leftTableView) return;
    // 滾動右邊tableView,設定選中左邊的tableView某一行。indexPathsForVisibleRows屬性返回螢幕上可見的cell的indexPath陣列,利用這個屬性就可以找到目前所在的分割槽
    [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:self.rightTableView.indexPathsForVisibleRows.firstObject.section inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
}

稍微解釋一下,首先監聽scrollView的拖動,本demo不處理左邊tableView的滾動,所以if ((UITableView *)scrollView == self.leftTableView) return;
self.rightTableView.indexPathsForVisibleRows.firstObject.section這句是拿到當前螢幕上可見cell的第一行cell所在的分割槽,然後讓左邊的tableView選中第0分割槽(它只有一個分割槽)的這一行就OK了。

歡迎收藏本文章,最後附上demo ,Github傳送門:demo

--------------這叫分割線---------------
補充下:下邊評論提到說點選左邊tableView的時候會有陰影效果,其實是這樣的,點選左邊的tableView,右邊的tableView是從當前位置動畫滾動到相應位置的,既然有滾動,就會調- (void)scrollViewDidScroll:(UIScrollView *)scrollView這個代理方法,說白了就是拖動了右邊tableView,拖動右邊的過程中會陸續選中左邊。那我想大家就明白了。

如果不想要這個效果,有兩個辦法,一個是直接吧- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath中的動畫滾動的屬性animated值改成NO

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    // 如果點選的是右邊的tableView,不做任何處理
    if (tableView == self.rightTableView) return;
    // 點選左邊的tableView,設定選中右邊的tableView某一行。左邊的tableView的每一行對應右邊tableView的每個分割槽
    [self.rightTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] animated:NO scrollPosition:UITableViewScrollPositionTop];
}

這樣做右邊的tableView就是無動畫滾動了,也就不會再調scrollViewDidScroll:方法。但是如果還想右邊tableViewyou滾動效果,另一種解決方法是:把- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法換成- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView這個代理方法方法就行了。餓了麼有的介面好像就是這樣做的,但是有bug(估計餓了麼沒測出來),這個方法的註釋為

// called when scroll view grinds to a halt 當滾動檢視戛然而止
--有道翻譯如是說

根據本人親測,拖拽之後,這個方法呼叫與否在於你的手指是否在動畫停止之前離開了螢幕,如果在動畫結束之前手指離開螢幕,此方法呼叫沒什麼問題。but,如果動畫已經停止,再把手指拿開,這個方法是不會調的。有圖有真相:


WZBLinkageTableViewGif.gif

解決這個bug的關鍵在於,讓手指離開的時候手動調一次這個代理方法,那怎麼才能知道手指什麼時候離開呢?scrollView給我們了另一個代理方法:- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset這個方法在結束拖拽的時候調,正好解決了我們的問題:

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    // 推拽將要結束的時候手動調一下這個方法
    [self scrollViewDidEndDecelerating:scrollView];
}

OK,解決問題!
後續,github也會跟進的,感謝大家的喜歡和支援!

Github已經更新,最新demo在這 demo



文/雜霧無塵(簡書作者)
原文連結:http://www.jianshu.com/p/dfb73aa08602
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。

相關推薦

實現tableView聯動效果

最近實現了下餓了麼中選餐時兩級tableView聯動效果,先上效果圖,大家感受一下: 聯動效果 下面說下具體實現步驟: 首先分解一下,實現這個需求主要是兩點,一是點選左邊tableView,同時滾動右邊tableView到具體的位置。二是拖動右邊tableView選中左邊

實現 tableView 聯動效果

效果圖: 聯動效果 下面說下具體實現步驟: 首先分解一下,實現這個需求主要是兩點,一是點選左邊tableView,同時滾動右邊tableView到具體的位置。二是拖動右邊tableView選中左邊tableView對應的某一行。要實現這個需求有一點很重

iOS 類似美團 app tableView 聯動效果實現

來源:劉光軍_ 連結:http://www.jianshu.com/p/c118a29887ca 寫在前面 首先宣告哈,不是廣告,我就是用的時候覺得這個功能比較好玩,就想著實現了一下。效果如圖: 接下來簡單的說一下思路吧~ 大體思路

介面個ListView聯動效果

onGetElement = (contentViewClass,contentkindClass,sildViewClass,sildkindClass,id) =>{     //contentViewClass 內容視口的類名  contentkindClass

仿餓了麼,百度這些App的雙ListView列表聯動效果

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content

Android中如何編寫圖片選擇器,實現按點按鈕按鈕的圖片或者顏色發生變化

1. 先看個圖,展示下我們要實現的效果:,點選按鈕的時候,按鈕變為這種顯示效果。 2. 其實這就是個圖片選擇器的編寫,當按鈕點選的時候,用另一張圖片去替換原有圖片,實現顏色的變化。 3. 具體步驟:     (1)首先在應用程式下→res目錄下建立一個folder,命名為d

iOSTableView 聯動

左右兩個 TableView 聯動 TowTableView.gif 小解析,可以先看看後面的! Snip20160821_3.png 實現 tableView聯動 主

用vue.js寫一個聯動效果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>vue.js級聯</title><script src="js/vue.js"&g

下午不知道吃什麼?用Python爬取美團評論幫你

一、介紹 朋友暑假實踐需要美團外賣APP評論這一份資料,一開始我想,這不就抓取網頁原始碼再從中提取資料就可以了嗎,結果發現事實並非如此,情況和之前崔大講過的分析Ajax來抓取今日頭條街拍美圖類似,都是通過非同步載入的方式傳輸資料,不同的是這次的是通過JS傳輸,其他的基本思路基本一致,希望那些資料

小程序實現跳轉

log con true 界面 路徑 on() url class this 界面從A->B->C,其中B是中轉界面,想要在C返回的時候實現 C-> A 只需要在B界面加上一個中轉標誌,從A->B觸發到C界面的標誌 從C->B 觸發到A的

10月15日科技聯播:百度正式更名“餓了麼星”;央視曝科大訊飛以AI為名拿地蓋別墅

百度外賣退出歷史舞臺,正式更名為“餓了麼星選”,外賣之爭的新戰役打響;科大訊飛再次陷入“輿情高地”,頂著AI的名號搞房地產,遭央視點名曝光;巨頭聯手,網易雲聯手百度,線上音樂市場是否會掀起新的波瀾?一起來看今天的科技快訊: 百度外賣更名“餓了麼星選”,外賣業變兩軍對壘 百度外賣今日正式更名為“餓了麼星

jquery+php實現select聯動效果(聯動)

HTML程式碼: <div class="form-group">

小程式訂房、點for迴圈載入資料並選擇數量互不影響的功能實現

這個問題並非難點,只是我因為習慣性思維,通過變數去實現時思路受限,並在此困惑良久,所以做個記錄。 如圖,型別包括後面的數量選擇,是來自資料庫的 for 迴圈加載出來的,我們要實現的是點選任意一個數量加減,而不影響其他。 wxml: <!--page/test/test.wxm

百度正式更名為“餓了麼星”;今日頭條推出電商App“值點”;京東入局個人快遞業務

< 觸控快訊,不一樣的聲音 > 本週行業快訊  百度外賣正式更名為“餓了麼星選”  10月15日訊息,百度外賣正式更名為“餓了麼星選”,App也採用了新的標識。百度外賣的官方微信和微博也均完成更名。餓了麼副總裁王景峰將擔任餓了麼星選CEO。據官方

從網路獲取圖片實現無限輪播 公眾號開發找捌躍科技

//網路請求資料工具類 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader

雙listview實現選擇的 dialog

1.對話方塊的佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:

ztree實現checkbox樹形選單,並且父節點不可選中(只有父和子選單);如何獲取中子節點儲存到資料庫

1.使用ztree首先要匯入ztree的引入檔案(具體看自己需求,需要用ztree拓展功能的需要匯入拓展的js)、及樣式、圖片 注:ztree的樣式檔案必須和圖片檔案在同一級資料夾下 2.檔案引入之後,建立html頁面,樹形結構底層是套,如下圖所示即可

聯動下拉框的簡單實現

最近經常用到二級選單的情況,改變一個另一個跟著變化。自己寫了一個簡單的JSP頁面,大家給點意見,另外大家這種情況都是怎麼做的,當然Ajax除外![code]<%! public final String _JS_GET_METHOD_NAME="_do_get_seco

聾啞小哥無聲送:月送600份,準時率100%

停好電動車,拔出鑰匙,夏吉祥小跑著進了一間海鮮餐廳。空氣中都是海腥味,地面溼漉漉的,服務員四處走動忙活。拐了幾個彎,夏吉祥來到了廚房邊上的冰櫃旁。   他取出了一個打包好的外賣袋,看了看手機,又繼續在冰櫃中找。確認沒有另一個袋子後,他折回取餐口,看著一個穿著西裝打著蝴蝶結的服務員,欲言又止。服務

阿里披露旗下三百萬騎手群體報告:大專以上佔比近

月收入集中在4000~8000元,平均年齡29歲,77%來自農村,大專及本科以上學歷佔比接近2成,33%擁有房產、21%已購車……12月28日,阿里本地生活服務公司旗下餓了麼蜂鳥配送釋出《2018外賣騎手群體洞察報告》,勾勒出其中300萬外賣騎手的群體畫像。 從阿里本地生活服務公司瞭解到,該報告是基於5.2