1.ViewPager
ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。其与BottomNavigationView和Fragment配合使用可以很好的实现Android底部导航栏及屏幕滑动切换碎片的功能
首先在活动布局里加入ViewPager控件：用法同普通控件一样
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
接着在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;//
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.mViewPager);//获取到ViewPager
//ViewPager的监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
bottomNavigationView.getMenu().getItem(position).setChecked(true);
//滑动页面后做的事，这里与BottomNavigationView结合，使其与正确page对应
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//底部导航栏有几项就有几个Fragment
final ArrayList<Fragment> fgLists=new ArrayList<>(3);
fgLists.add(new ManageFragment());
fgLists.add(new FindFragment());
fgLists.add(new MyFragment());
//设置适配器用于装载Fragment
FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fgLists.get(position); //得到Fragment
}
@Override
public int getCount() {
return fgLists.size(); //得到数量
}
};
mViewPager.setAdapter(mPagerAdapter); //设置适配器
mViewPager.setOffscreenPageLimit(2); //预加载剩下两页
//以上就将Fragment装入了ViewPager
}
}
2.BottomNavigationView
在 build.gradle 文件中增加依赖：
compile 'com.android.support:design:25.2.0'
- 菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。
在同样的活动布局里加入BottomNavigationView控件，为了美观，可以在ViewPager和BottomNavigationView中间加个View
<View
android:layout_width="match_parent"
android:background="#3399cc"
android:layout_height="1dp" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/mBottom"
android:layout_width="match_parent"
android:layout_height="50dp"
app:menu="@menu/navigation"></android.support.design.widget.BottomNavigationView>
其中有一项 app:menu="@menu/navigation" 用于底部导航栏的具体显示
需要我们建一个menu的xml文件
我们在res/menu下新建一个navigation.xml（没有menu文件夹就新建一个），然后在xml里添加自己想要的目录选项
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:title="管理" //名字
android:icon="@drawable/ic_manage" //显示的图标
android:id="@+id/manager_item"/>
<item
android:id="@+id/find_item"
android:icon="@drawable/ic_find"
android:title="发现" />
<item
android:icon="@drawable/ic_my"
android:id="@+id/my_item"
android:title="我的" />
</menu>
图中底部导航栏上的蓝色条即为刚才加的View
bottom.JPG
在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.mViewPager);
bottomNavigationView=(BottomNavigationView) findViewById(R.id.mBottom);
//设置点击监听
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId())
{
//根据navagatin.xml中item的id进行case
case R.id.manager_item:
mViewPager.setCurrentItem(0);
//跳到对应ViewPager的page
break;
case R.id.find_item:
mViewPager.setCurrentItem(1);
break;
case R.id.my_item:
mViewPager.setCurrentItem(2);
break;
}
return false;
}
});
//ViewPager的一系列设置
.................
...................
}
}
以上ViewPager和BottomNavigationView的结合就使用完成
3.Fragment
碎片（fragment）里面就是我们具体要呈现给大家的东西，fragment的用法需要一个类和一个布局文件，我们新建一个类继承自Fragment
public class MyFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//R.layout.fragment_my为该fragment的布局
View view=inflater.inflate(R.layout.fragment_my,container,false);
return view;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
}
为该fragment新建一个布局文件,该布局很简单，就加入了一个TextView，可以自行拓展加入各种控件等
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="my"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
剩余两个fragment同上一样
结尾
以上三者结合即可实现基本的底部导航栏UI布局设计
