Android仿天貓橫向滑動(dòng)指示器功能的實(shí)現(xiàn)
Android開發(fā)中會(huì)有很多很新奇的交互,比如天貓商城的首頁頭部的分類,使用的是GridLayoutManager+橫向指示器實(shí)現(xiàn)的,效果如下圖。

那對(duì)于這種效果要如何實(shí)現(xiàn)呢?最簡單的方式就是使用RecyclerView+GridLayoutManager,我們知道RecyclerView可以實(shí)現(xiàn)九宮格,接下來就是通過RecyclerView控制指示器的顯示位置,邏輯實(shí)現(xiàn)如下:
- 計(jì)算出RecyclerView劃出屏幕的距離w1和剩余寬度w2的比例y,y = w1 / (總寬度w3 - 可使視區(qū)域?qū)挾葁4)
- 計(jì)算出指示器該移動(dòng)的距離w5 = y * (指示器的總寬度w6 - 滑塊寬度w7)
- 指示器布局,并控制位置
首先,我們創(chuàng)建兩個(gè)drawable文件,分別用于表示指示器的默認(rèn)背景和選中的背景。
indicator_bg_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
<solid android:color="@color/gray_9" />
</shape>
indicator_bg_select.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="@color/red"/>
</shape>
然后,我們再添加一個(gè)布局,上面是RecyclerView,下面是指示器。
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="0dp"
android:layout_height="@dimen/dp_120"
android:layout_marginBottom="@dimen/dp_10"/>
<RelativeLayout
android:id="@+id/rl_indicator"
android:layout_width="60dp"
android:layout_height="4dp"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/indicator_bg_normal">
<View
android:id="@+id/main_line"
android:layout_width="30dp"
android:layout_height="4dp"
android:layout_centerVertical="true"
android:background="@drawable/indicator_bg_select"/>
</RelativeLayout>
接下來,就是通過監(jiān)聽RecyclerView的橫向滾動(dòng)的距離,來判斷指示器顯示的位置,代碼如下。
rvMenu.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int range=0;
int temp = rvMenu.computeHorizontalScrollRange();
if (temp > range) {
range = temp;
}
//滑塊的偏移量
int offset = rvMenu.computeHorizontalScrollOffset();
//可視區(qū)域長度
int extent = rvMenu.computeHorizontalScrollExtent();
//滑出部分在剩余范圍的比例
float proportion = (float) (offset * 1.0 / (range - extent));
//計(jì)算滾動(dòng)條寬度
float transMaxRange = rlIndicator.getWidth() - mainLine.getWidth();
//設(shè)置滾動(dòng)條移動(dòng)
mainLine.setTranslationX(transMaxRange * proportion);
}
});
到此這篇關(guān)于Android仿天貓橫向滑動(dòng)指示器功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Android橫向滑動(dòng)指示器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android Studio 2020新版本卡在Gradle downloading/sync failed/下載緩慢/
Android Studio 2020新版本 卡在Gradle downloading / sync failed / 下載緩慢 / 下載超時(shí) 親測有效解決辦法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-12-12
Android ViewPager實(shí)現(xiàn)圖片輪翻效果
這篇文章主要為大家詳細(xì)介紹了Android ViewPager實(shí)現(xiàn)圖片輪翻效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Android采取BroadcastReceiver方式自動(dòng)獲取驗(yàn)證碼
這篇文章主要介紹了Android采取BroadcastReceiver方式自動(dòng)獲取驗(yàn)證碼,感興趣的小伙伴們可以參考一下2016-08-08
Android實(shí)現(xiàn)驗(yàn)證碼登錄
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)驗(yàn)證碼登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03
協(xié)程作用域概念迭代RxTask?實(shí)現(xiàn)自主控制
這篇文章主要為大家介紹了協(xié)程作用域概念迭代RxTask實(shí)現(xiàn)自主控制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
Android實(shí)現(xiàn)掃一掃功能之繪制指定區(qū)域透明區(qū)域
這篇文章主要給大家介紹了關(guān)于Android實(shí)現(xiàn)掃一掃功能之繪制指定區(qū)域透明區(qū)域的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2018-07-07
android實(shí)現(xiàn)Splash閃屏效果示例
這篇文章主要介紹了android實(shí)現(xiàn)Splash閃屏效果的方法,涉及Android中postDelayed方法及AndroidManifest.xml權(quán)限控制的相關(guān)使用技巧,需要的朋友可以參考下2016-08-08
Android 深入探究自定義view之事件的分發(fā)機(jī)制與處理詳解
對(duì)于安卓程序員來說,自定義view簡直不要太重要,畢竟有很多功能,譬如圓形頭像這些,用單純的原生非常難以實(shí)現(xiàn),而用自定義view,簡直分分鐘2021-11-11

