简单实现底部导航栏的小方法（3种）

最新推荐文章于 2025-03-12 08:28:06 发布

殷皮皮

最新推荐文章于 2025-03-12 08:28:06 发布

阅读量2k

点赞数 1

分类专栏：简单实现底部导航栏的小方法文章标签：简单实现底部导航栏的小方法

本文链接：https://blog.youkuaiyun.com/yinqiuping/article/details/89438415

版权

简单实现底部导航栏的小方法专栏收录该内容

1 篇文章

订阅专栏

浏览一下效果
在这里插入图片描述
相信现在APP里面必不可少的功能就是底部导航栏，因为它可以点击任意一个页面进行查看不同的商品
接下来给大家简单实际操作一把。

注意：Fragment页面没有写出自拟就好，第二种实现方法一定不能忘记写提交！！！

第一种：ViewPager+RadioGroup+RadioButton

布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
    android:id="@+id/home_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9" />

	<RadioGroup
    android:id="@+id/home_radio"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/home_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:text="恩1"
        android:textSize="26sp" />

    <RadioButton
        android:id="@+id/home_foot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:text="恩2"
        android:textSize="26sp" />
</RadioGroup>
</LinearLayout>

Activity

public class MainActivity extends BaseActivity {

private ViewPager homePager;
private RadioGroup homeRadio;
private ArrayList<Fragment> list = new ArrayList<>();

//初始化控件

   homePager = (ViewPager) findViewById(R.id.home_pager);
   homeRadio = (RadioGroup) findViewById(R.id.home_radio);

默认选中第一个fragment

        homeRadio .check(homeRadio .getChildAt(0).getId());

添加

        list.add(new HomeFragment());
        list.add(new MeFragment());

按钮切换

        homePager .addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

        }

        @Override
        public void onPageSelected(int i) {
            homeRadio.check(homeRadio.getChildAt(i).getId());
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    });

  homeRadio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.page_rbhome:
                    homePager .setCurrentItem(0);
                    break;
            
                case R.id.page_rbme:
                    homePager .setCurrentItem(4);
                    break;
            }
        }
    });

// 适配器

    Bottom_NavigationAdapter bottom_navigationAdapter = new  Bottom_NavigationAdapter(getSupportFragmentManager(),list);
    homePager .setAdapter(bottom_navigationAdapter);
}

// 适配器

public class Bottom_NavigationAdapter extends FragmentPagerAdapter {

Context context;
ArrayList<Fragment> list;


public Bottom_NavigationAdapter(FragmentManager supportFragmentManager, ArrayList<Fragment> list) {
    super(supportFragmentManager);
    this.context = context;
    this.list = list;
}

@Override
public Fragment getItem(int i) {
    return list.get(i);
}

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

第二种：FragmentLayout+RadioGroup+RadioButton

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
    android:id="@+id/home_h"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

<RadioGroup
    android:id="@+id/home_radio"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/home_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:text="首页"
        android:textSize="26sp" />

    <RadioButton
        android:id="@+id/home_foot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:gravity="center"
        android:text="足迹"
        android:textSize="26sp" />
</RadioGroup>
</LinearLayout>

Activity

public class MainActivity extends AppCompatActivity {
    private FrameLayout home_h;
    private RadioGroup homeRadio;
    private FootFragment footFragment;
    private FragmentManager manager;
    private FragmentTransaction transaction;
    private HomeFragment homeFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Api api = RetrofitlUntil.getInstance().setCreat(Api.class, ApiService.BASE_URL);

    home_h = (FrameLayout) findViewById(R.id.home_h);
    homeRadio = (RadioGroup) findViewById(R.id.home_radio);

// 默认选中第一个

   	 homeRadio.check(homeRadio.getChildAt(0).getId());

    final FragmentManager manager = getSupportFragmentManager();
    transaction = manager.beginTransaction();

    homeFragment = new HomeFragment();
    footFragment = new FootFragment();

    transaction.add(R.id.home_h, homeFragment);
    transaction.add(R.id.home_h, footFragment);

    transaction.replace(R.id.home_h, homeFragment);
    transaction.commit();

    homeRadio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            transaction = manager.beginTransaction();
            switch (checkedId) {
                case R.id.home_home:
                    transaction.replace(R.id.home_h, homeFragment);
                    break;
                case R.id.home_foot:
                    transaction.replace(R.id.home_h, footFragment);
                    break;
            }
            transaction.commit();
        }
    });
}
}

第三种 viewpager+BottomNavigationBar

依赖
implementation ‘com.ashokvarma.android:bottom-navigation-bar:1.3.0’
在这里插入图片描述
activity代码

public class Page_Bottom_Activity extends BaseActivityy implements BottomNavigationBar
    .OnTabSelectedListener {

private CustomViewPager viewPager;
private BottomNavigationBar bottomNavigationBar;
private List<Fragment> fragments;
private String key;

@Override
protected void initView() {
    //       状态栏
    setStatusBarFullTransparent();
    setFitSystemWindow(false);
}

@Override
protected void initListener() {
    initBottomNavigationBar();
    initViewPager();
}

@Override
protected void initData() {

}

@Override
public int getView() {
    return R.layout.activity_page__bottom;
}

private void initBottomNavigationBar() {
    bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

    bottomNavigationBar.setTabSelectedListener(this);
    bottomNavigationBar.clearAll();
    bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
    bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
    bottomNavigationBar
            .addItem(new BottomNavigationItem(R.mipmap.home_no_checked, R.string.app_home)//（选中图片 文字）
                    .setInactiveIconResource(R.mipmap.home_checked)//未选中图片
                    .setActiveColorResource(R.color.color_____red))//选中颜色
            .addItem(new BottomNavigationItem(R.mipmap.planning_checked, R
                    .string.app_plan)
                    .setInactiveIconResource(R.mipmap.planning_no_checked)
                    .setActiveColorResource(R.color.color_____red))
            .addItem(new BottomNavigationItem(R.mipmap.cooperation_checked, R
                    .string.app_cooperation)
                    .setInactiveIconResource(R.mipmap.cooperation_no_checked)
                    .setActiveColorResource(R.color.color_____red))
            .addItem(new BottomNavigationItem(R.mipmap.my_checked, R.string.app_my)
                    .setInactiveIconResource(R.mipmap.my_no_checked)
                    .setActiveColorResource(R.color.color_____red))
            .initialise();


}

private void initViewPager() {
    viewPager = (CustomViewPager) findViewById(R.id.view_pager);
    viewPager.setScanScroll(false);
    fragments = new ArrayList<Fragment>();
    fragments.add(new FirstPageFragment());
    fragments.add(new Enterprise_Planning());
    fragments.add(new Business_Cooperation());
    fragments.add(new My_Fragment());

    viewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), fragments));
    viewPager.setCurrentItem(0);
    viewPager.setOffscreenPageLimit(1);
}

@Override
public void onTabSelected(int position) {
    viewPager.setCurrentItem(position);
}

@Override
public void onTabUnselected(int position) {

}

@Override
public void onTabReselected(int position) {

}

protected void setStatusBarFullTransparent() {
    if (Build.VERSION.SDK_INT >= 21) {//21表示5.0
        Window window = getWindow();
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.setStatusBarColor(Color.TRANSPARENT);
    } else if (Build.VERSION.SDK_INT >= 19) {//19表示4.4
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //虚拟键盘也透明
        //getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }
}

/**
 * 如果需要内容紧贴着StatusBar
 * 应该在对应的xml布局文件中，设置根布局fitsSystemWindows=true。
 */
private View contentViewGroup;

protected void setFitSystemWindow(boolean fitSystemWindow) {
    if (contentViewGroup == null) {
        contentViewGroup = ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0);
    }
    contentViewGroup.setFitsSystemWindows(fitSystemWindow);
}
}

activity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_white_"
android:orientation="vertical">

<com.example.lenovo.common_thread.util.weight.CustomViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="9"
    android:background="#fff" />

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:background="#fff"
    android:gravity="center" />
</LinearLayout>

viewpager类

public class CustomViewPager extends LazyViewPager {
private boolean isCanScroll = true;

public CustomViewPager(Context context) {
    super(context);
}

public CustomViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
}

/**
 * 设置其是否能滑动换页
 * @param isCanScroll false 不能换页， true 可以滑动换页
 */

public void setScanScroll(boolean isCanScroll) {
    this.isCanScroll = isCanScroll;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    return isCanScroll && super.onInterceptTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
    return isCanScroll && super.onTouchEvent(ev);

}
@Override
public void scrollTo(int x, int y) {
    super.scrollTo(x, y);
}
}