Android 2行代码实现viewpager与导航条滚动联动

最新推荐文章于 2021-05-26 23:35:20 发布

Dream淡漠

最新推荐文章于 2021-05-26 23:35:20 发布

阅读量514

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/xIsidro9293/article/details/80251959

Android 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用两行代码实现Android中ViewPager与底部导航条的滚动联动效果。通过设置ViewPager的OnPageChangeListener监听器，根据当前页面位置及偏移量调整导航条指示器的位置。

Android 2行代码实现viewpager与导航条滚动联动

新项目边做边整理一些笔记.

布局:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="42dp"
    android:background="@color/colorWhite"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:paddingTop="4dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_paren
            android:layout_weight="1"
            android:gravity="center"
            android:text="page1"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_paren
            android:layout_weight="1"
            android:gravity="center"
            android:text="page2"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_paren
            android:layout_weight="1"
            android:gravity="center"
            android:text="page3"
            android:textSize="16sp" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/ll_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true
        <View
            android:id="@+id/v_line"
            android:layout_width="80dp"
            android:layout_height="match_paren
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:background="@color/main_te
    </RelativeLayout>
</RelativeLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

获取一些参数

private int screenWidth;    //屏幕宽度
private int line_leftMargin;    //导航条左边距
private RelativeLayout.LayoutParams lp;   //导航条容器属性
private ArrayList<Fragment> fragments;    //viewpager页面

//先获取屏幕宽度
WindowManager windowManager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
screenWidth = windowManager.getDefaultDisplay().getWidth();

//获取导航条左边距
lp = (RelativeLayout.LayoutParams) v_line.getLayoutParams();
line_leftMargin = lp.leftMargin;

干货来了!~

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        lp = (RelativeLayout.LayoutParams) v_line.getLayoutParams();
        lp.leftMargin = (int) ((positionOffset + position) * screenWidth / fragments.size() + line_leftMargin);
        v_line.setLayoutParams(lp);
    }
    @Override
    public void onPageSelected(int position) {
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

OK! 就是这么简单!~