Android使用BottomNavigationView及ViewPager布局

效果图

操作概要

  • 新建android工程,选Bottom Navigation Actvity项
  • 使用向导新建三个Fragment(Blank)
  • 编辑activity_main.xml
    • 增加ViewPager,并设置id,(Design>Containers>ViewPager)
  • 编辑navigation.xml,给每个菜单增加android:orderInCategory="0"序号依次增加
  • 编辑MainActivity
    • 删除mTextMessage相关代码
    • 把原navigation改为成员变量
    • 增加成员变量ViewPager viewpager
    • OnCreate中用findViewById把viewpager初始化
    • MainActivity实现ViewPager.OnPageChangeListener
    • 在onPageSelected中增加navigation.getMenu().getItem(position).setChecked(true);
    • 在onNavigationItemSelected中增加viewpager.setCurrentItem(item.getOrder());
    • 增加成员变量List<Fragment> fragmentList =new ArrayList<Fragment>();
    • 在OnCreate中初始化,分别增加之前三个BlankFragment
    • 实现OnFragmentInteractionListener接口
  • 分编辑 BlankFragment中的文字内容

代码

MainActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener ,BlankFragment.OnFragmentInteractionListener,BlankFragment2.OnFragmentInteractionListener,BlankFragment3.OnFragmentInteractionListener{
private BottomNavigationView navigation;
private ViewPager viewpager;
private List<Fragment> fragmentList =new ArrayList<Fragment>();

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
viewpager.setCurrentItem(item.getOrder());
return false;
}
};

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

navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

viewpager =(ViewPager)findViewById(R.id.viewpager);
viewpager.addOnPageChangeListener(this);

Fragment fragment1 = new BlankFragment();
Fragment fragment2 = new BlankFragment2();
Fragment fragment3 = new BlankFragment3();
fragmentList.add(fragment1);
fragmentList.add(fragment2);
fragmentList.add(fragment3);


viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}

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

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
navigation.getMenu().getItem(position).setChecked(true);
}

@Override
public void onPageScrollStateChanged(int state) {

}

@Override
public void onFragmentInteraction(Uri uri) {

}
}

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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="match_parent" />

<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>

参考


Android使用BottomNavigationView及ViewPager布局
https://blog.fengcl.com/2018/09/07/android-bottomnavigationview-viewpager-layout/
作者
frank
发布于
2018年9月7日
许可协议