實現外賣選餐時兩級tableView聯動效果
最近實現了下餓了麼中選餐時兩級tableView聯動效果,先上效果圖,大家感受一下:
聯動效果
下面說下具體實現步驟:
首先分解一下,實現這個需求主要是兩點,一是點選左邊tableView,同時滾動右邊tableView到具體的位置。二是拖動右邊tableView選中左邊tableView對應的某一行。要實現這個需求有一點很重要:左邊的tableView每一行對應的是右邊tableView的每個分割槽,OK,Just Do It.
實現點選左邊tableView同時滾動右邊tableView,很簡單,只需要實現tableView的代理方法- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
- (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
iOS兩個 TableView 聯動
左右兩個 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