Android流行UI布局——底部导航(BottomNavigationView+ViewPager+Fragment)

本文介绍如何结合官方的BottomNavigationView、ViewPager和Fragment来创建一个流行UI布局。详细步骤包括导入依赖库、设计菜单、设置布局和监听事件。同时,文章解决了ViewPager与BottomNavigationView滑动联动的问题,并提供了禁止ViewPager滑动的方法。
摘要由CSDN通过智能技术生成

这篇文章为大家带来

1.官方BottomNavigationView的使用方法
2.结合ViewPager、Fragment实现一个流行UI布局!
3.并用反射解决ViewPager与BottomNavigationView侧滑联动时的一个小问题。

最终实现效果:

这里写图片描述

在谷歌官方发布BottomNavigationView控件之前我们可以自己组合控件实现,比如LinearLayout + TextView(使用android:drawableTop属性+selector状态切换)、RadioGroup + RadioButton等等组合控件的方法自定义实现复杂效果。除了第三方外,现在我们多了一个选择。

开始

1.新建project然后导入以下support:design library,BottomNavigationView就在这个design库中。顺带导入这个V4包,因为待会要使用到ViewPager(这里其实不用记这么麻烦的库跟版本怎么写,直接在AS 的design面板把控件拖进来就会自动导入了。)

compile’com.android.support:design:25.0.1’
compile’com.android.support:support-v4:25.0.1’

2.在res下新建menu文件夹,新建一个menu菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_home"
        android:title="首页"
        android:icon="@drawable/home_selected"/>

    <item
        android:id="@+id/action_explore"
        android:title="直播"
        android:icon="@drawable/live"/>

    <item
        android:id="@+id/action_me"
        android:title="关注"
        android:icon="@drawable/follow"/>
    <item
        android:id="@+id/mfaxin"
        android:title="发现"
        android:icon="@drawable/video"/>
    <item
        android:id="@+id/mi"
        android:title="我的"
        android:icon="@drawable/user"/>
</menu>

3.接着是布局文件主要代码如下(最下面的View效果是加一个阴影):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools
ActivityMainMenuBinding + BottomNavigationView + ViewPager2可以实现底部导航栏与ViewPager2的联动。下面是一个示例代码: ```java // 在Activity中使用DataBinding绑定布局 ActivityMainMenuBinding binding = ActivityMainMenuBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); // 设置ViewPager2适配器 ViewPager2 viewPager = binding.viewPager; viewPager.setAdapter(new MyPagerAdapter(this)); // 设置BottomNavigationViewViewPager2的联动 BottomNavigationView bottomNavigationView = binding.bottomNavigationView; bottomNavigationView.setOnNavigationItemSelectedListener(item -> { switch (item.getItemId()) { case R.id.menu_home: viewPager.setCurrentItem(0); return true; case R.id.menu_dashboard: viewPager.setCurrentItem(1); return true; case R.id.menu_notifications: viewPager.setCurrentItem(2); return true; } return false; }); // 监听ViewPager2的页面切换事件,实现与BottomNavigationView的联动 viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { @Override public void onPageSelected(int position) { switch (position) { case 0: bottomNavigationView.setSelectedItemId(R.id.menu_home); break; case 1: bottomNavigationView.setSelectedItemId(R.id.menu_dashboard); break; case 2: bottomNavigationView.setSelectedItemId(R.id.menu_notifications); break; } } }); ``` 这段代码使用了DataBinding绑定了名为`ActivityMainMenuBinding`的布局文件。在布局文件中,包含了一个`ViewPager2`和一个`BottomNavigationView`。通过设置`ViewPager2`的适配器和监听器,以及`BottomNavigationView`的选中监听器和`ViewPager2`的页面切换监听器,实现了底部导航栏与ViewPager2的联动。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值