Android基于首页底部选择切换

最新推荐文章于 2023-10-19 14:51:03 发布

学习沐

最新推荐文章于 2023-10-19 14:51:03 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： Android

本文链接：https://blog.youkuaiyun.com/qq_36022808/article/details/88915304

学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个使用Android实现底部导航栏的具体方法，通过ViewPager与Tab按钮的联动，实现了页面间的平滑切换。文中详细展示了如何设置按钮样式、配置Activity以及重写Fragment适配器等关键步骤。

先上效果图在这里插入图片描述

需要implements ViewPager.OnPageChangeListener

部分局部代码

            <TextView
                android:id="@+id/tv_home"
                android:layout_width="@dimen/widget_size_32"
                android:layout_height="@dimen/widget_size_32"
                android:background="@drawable/tab_home_btn"
                android:layout_marginTop="@dimen/widget_size_4"
                android:text="首页"
                android:textColor="#432323"
                android:textStyle="bold"
                android:textSize="@dimen/font_size_6"
                android:paddingLeft="@dimen/widget_size_4"
                android:paddingTop="@dimen/widget_size_15"
                />
        </LinearLayout>


        <!--关注-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:gravity="center_horizontal"
            android:onClick="tabSelectClick"
            android:id="@+id/ll_follow">

            <TextView
                android:id="@+id/tv_follow"
                android:layout_width="@dimen/widget_size_35"
                android:layout_height="@dimen/widget_size_31"
                android:background="@drawable/tab_follow_btn"
                android:layout_marginTop="@dimen/widget_size_8"
                android:text="关注"
                android:textColor="#432323"
                android:textStyle="bold"
                android:textSize="@dimen/font_size_6"
                android:paddingLeft="@dimen/widget_size_11"
                android:paddingTop="@dimen/widget_size_8"
                />
        </LinearLayout>

        <!--我的-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:gravity="center_horizontal"
            android:onClick="tabSelectClick"
            android:id="@+id/ll_personal">

            <TextView
                android:id="@+id/tv_personal"
                android:layout_width="@dimen/widget_size_32"
                android:layout_height="@dimen/widget_size_32"
                android:background="@drawable/tab_personal_btn"
                android:layout_marginTop="@dimen/widget_size_4"
                android:text="我的"
                android:textColor="#432323"
                android:textStyle="bold"
                android:textSize="@dimen/font_size_6"
                android:paddingLeft="@dimen/widget_size_13"
                android:paddingTop="@dimen/widget_size_15"
                />
        </LinearLayout>

    </LinearLayout>

2.接下来配置Activity
private TextView tvHome,tvFollow,tvPersonal,tvCurrent; //底部按钮
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView(); //初始化视图
}
private void initView(){
tvHome= (TextView) findViewById(R.id.tv_home);
tvFollow= (TextView) findViewById(R.id.tv_follow);
tvPersonal= (TextView) findViewById(R.id.tv_personal);

    tvHome.setSelected(true);  //默认进入选择home部分

    tvCurrent=tvHome; //标签指向
        myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager());
        //跟踪最初进入界面选择下标
    viewPager.setAdapter(myPagerAdapter);
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(this);

//点击不同的按钮，切换不同视图
public void tabSelectClick(View view){
changeTab(view);
}

private void changeTab(View view){
    tvCurrent.setSelected(false);
    switch (view.getId()){
        case R.id.ll_home:{
            tvHome.setSelected(true);
            tvCurrent=tvHome;
            viewPager.setCurrentItem(0,false);
            break;
        }
        case R.id.ll_follow:{
            tvFollow.setSelected(true);
            tvCurrent=tvFollow;
            viewPager.setCurrentItem(1,false);
            break;
        }
        case R.id.ll_personal:{
            tvPersonal.setSelected(true);
            tvCurrent=tvPersonal;
            viewPager.setCurrentItem(2,false);
            break;
        }
        default:
            break;
    }
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

4.跟踪
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
changeTab(llHome);
break;
case 1:
changeTab(llFollow);
break;
case 2:
changeTab(llPersonal);
break;
default:
break;
}
}
5.重写fragment格式

@Override
public void onPageScrollStateChanged(int state) {

}

class MyPagerAdapter extends FragmentPagerAdapter {

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

6.drawable下设置下标状态
//关注

<item android:drawable="@mipmap/tab_follow_btn"  android:state_pressed="true"/>
<item android:drawable="@mipmap/tab_follow_btn" android:state_selected="true"/>
<item android:drawable="@mipmap/change_follow_btn"/>

//首页

<item android:drawable="@mipmap/tab_home_btn" android:state_pressed="true"/>
<item android:drawable="@mipmap/tab_home_btn" android:state_selected="true"/>
<item android:drawable="@mipmap/change_home_btn"/>

//我的

<item android:drawable="@mipmap/tab_personal_btn" android:state_pressed="true"/>
<item android:drawable="@mipmap/tab_personal_btn" android:state_selected="true"/>
<item android:drawable="@mipmap/change_personal_btn"/>