淘宝菜单滑动条,图如下;
实现一下这个效果 , 上面是列表,可以用RecyclerView实现 , 下面跟随菜单滑动的条可以用View做位移动画实现;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.TaoIndicatorActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="180dp"></androidx.recyclerview.widget.RecyclerView>
<RelativeLayout
android:id="@+id/layout"
android:layout_width="68dp"
android:background="#ddd"
android:layout_gravity="center_horizontal"
android:layout_height="6dp">
<View
android:id="@+id/v"
android:layout_width="35dp"
android:layout_height="match_parent"
android:background="@color/red"
/>
</RelativeLayout>
</LinearLayout>
实现滑动条跟随菜单做位移动画;
rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int range = recyclerView.computeHorizontalScrollRange(); //全长度
int extent = recyclerView.computeHorizontalScrollExtent(); // 当前显示的长度
int offset = recyclerView.computeHorizontalScrollOffset(); //已滑动的偏移量
//屏幕外的长度
float wai = range - extent ;
// 已滑动长度的比例
float huabi = (float) (offset * 1.0) / wai; //注意!!!,如果用Int型,会取整;
int huafan = layoutProgress.getWidth() - vProgress.getWidth(); //可滑动范围
float translationX = huabi * huafan; // view偏移量
vProgress.setTranslationX(translationX);
}
});
下面是全部代码:
public class TaoIndicatorActivity extends AppCompatActivity {
private RecyclerView rv;
private View vProgress;
private RelativeLayout layoutProgress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tao_indicator);
rv = findViewById(R.id.rv);
layoutProgress = findViewById(R.id.layout);
vProgress = findViewById(R.id.v);
rv.setLayoutManager(new LinearLayoutManager(this , LinearLayoutManager.HORIZONTAL , false));
initView();
}
private void initView() {
rv.setAdapter(new TaoAdapter());
rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int range = recyclerView.computeHorizontalScrollRange(); //全长度
int extent = recyclerView.computeHorizontalScrollExtent(); // 当前显示的长度
int offset = recyclerView.computeHorizontalScrollOffset(); //已滑动的偏移量
L.c("全长度:"+range
+"\n当前显示的长度:"+extent
+"\n已滑动的偏移量:"+offset);
//屏幕外的长度
float wai = range - extent ;
// 已滑动长度的比例
float huabi = (float) (offset * 1.0) / wai; //注意!!!,如果用Int型,会取整;
int huafan = layoutProgress.getWidth() - vProgress.getWidth(); //可滑动范围
float translationX = huabi * huafan; // view偏移量
vProgress.setTranslationX(translationX);
L.c("\n屏幕外的长度:"+wai
+"\n滑动比例:"+huabi
+"\n可滑动范围:"+huafan
+"\nview偏移:"+translationX);
}
});
}
}
如果需要设置一屏显示几个Item ,计算并设置一下Item宽度就行了 ,Item宽度 =((屏幕宽度 - 边距) / Item数量)