Android实现底部导航栏加侧滑(BottomNavigationView+ViewPager+Fragment)

废话不多说,先上图,不合适的就不用再往下面看了,这是平时找东西最想先看到的。


                 

具体实现


1、默认使用Android Studio开发,首先新建一个项目,选择Bottom Navigation Activity,这样底部导航功能就已经完成了。(我代码:compileSdkVersion 27)

2、添加ViewPager+Fragment的侧滑功能。


下面是完成所有功能后的代码

  布局文件activity_main.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


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




    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />




</android.support.constraint.ConstraintLayout>


  在res下面有个menu,里面就是导航栏菜单文件了:

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


    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="新闻" />


    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="图书" />


    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="发现" />


</menu>


  MainActivity.java代码:

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;


import com.zeus.zeusstare.fragment.FirstFragment;
import com.zeus.zeusstare.fragment.SecondFragment;
import com.zeus.zeusstare.fragment.ThirdFragment;
import com.zeus.zeusstare.tool.ViewPagerAdapter;


/**
 * @author zhangrb
 */
public class MainActivity extends AppCompatActivity {


    private ViewPager viewPager;
    private MenuItem menuItem;
    private BottomNavigationView navigation;


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


        viewPager = findViewById(R.id.viewpager);
        navigation = findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        
        /*侧滑监听*/
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {


            }


            @Override
            public void onPageSelected(int position) {
                if (menuItem != null) {
                    menuItem.setChecked(false);
                } else {
                    navigation.getMenu().getItem(0).setChecked(false);
                }
                menuItem = navigation.getMenu().getItem(position);
                menuItem.setChecked(true);
            }


            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });


        setupViewPager(viewPager);


    }


    /**
     * 这里是底部导航栏点击切换代码
     */
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {


        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewPager.setCurrentItem(2);
                    return true;
                default:
                    break;
            }


            return false;
        }
    };


    /**设置侧滑页面*/
    private void setupViewPager(ViewPager viewPager) {
        /*ViewPager适配器*/
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        /*构建适配器构建一个fragment列表,将三个Fragment添加进去,生成FragAdapter实例。*/
        adapter.addFragment(new FirstFragment());
        adapter.addFragment(new SecondFragment());
        adapter.addFragment(new ThirdFragment());
        viewPager.setAdapter(adapter);
    }


}

实现ViewPager是要有适配器的,而对于Fragment,它所使用的适配器是:FragmentPagerAdapter。

  ViewPagerAdapter.java代码:

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


import java.util.ArrayList;
import java.util.List;


/**
 * @author RB
 * @date 2018/1/17 17:30
 */


public class ViewPagerAdapter extends FragmentPagerAdapter {


    private final List<Fragment> mFragmentList = new ArrayList<>();


    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }


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


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


    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }


}


 Fragment页面:
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


import com.zeus.zeusstare.R;


/**
 * @author RB
 * @date 2018/1/18 10:29
 */
public class FirstFragment extends Fragment {


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        return inflater.inflate(R.layout.first_fragment, container, false);
    }
}




  这样基本就已经完成了效果,但每个人的开发环境和效果都会有差别,具体出现什么小问题再具体解决就好了。

可能出现问题:

Fragment 导包不一致、menu 的 item到了4个及以上时动画扭曲。

可以参考以下两篇文章进行问题解决。

参考文章:

http://blog.csdn.net/harvic880925/article/details/38660861

https://www.jianshu.com/p/0ba25cc65889


  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
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的联动。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值