android循序渐进：1、首页与底部导航栏实现
app首页布局常采用底部三个或四个导航按钮，并支持左右滑动切换如微信、钉钉，
本文记录采用PagerView+BottomNavigationBar实现底部导航与左右翻页效果。
效果图如下：
1、增加图片资源
图片资源采用vector格式，底部四个图片代码如下
首页
<vector android:height="24dp" android:viewportHeight="1024.0" android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#929292" android:pathData="M949.1,519.3 L508.7,107.6 68.3,518.1c-8.6,8 -9.1,21.5 -1,30.1 8,8.6 21.6,9.1 30.2,1l411.2,-383.3 411.2,384.5c4.1,3.9 9.4,5.8 14.6,5.8 5.7,0 11.4,-2.3 15.6,-6.8C958.1,540.9 957.7,527.4 949.1,519.3L949.1,519.3zM949.1,519.3M814.7,527.8c-11.8,0 -21.3,9.6 -21.3,21.3l0,327L622.6,876.2 622.6,648.7 394.8,648.7l0,227.5L224,876.2 224,549.1c0,-11.8 -9.6,-21.3 -21.3,-21.3 -11.8,0 -21.4,9.6 -21.4,21.3l0,369.7 256.2,0L437.5,691.3l142.3,0 0,227.5 256.2,0L836,549.1C836,537.4 826.5,527.8 814.7,527.8L814.7,527.8zM814.7,527.8M665.3,222.1l128.1,0 0,113.7c0,11.8 9.6,21.3 21.3,21.3 11.8,0 21.3,-9.5 21.3,-21.3L836,179.4 665.3,179.4c-11.8,0 -21.4,9.5 -21.4,21.3C643.9,212.6 653.5,222.1 665.3,222.1L665.3,222.1zM665.3,222.1"/> </vector>
功能
<vector android:height="24dp" android:viewportHeight="1024.0" android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M448,102.4L128,102.4c-19.2,0 -32,12.8 -32,32v320c0,19.2 12.8,32 32,32h320c19.2,0 32,-12.8 32,-32v-320c0,-19.2 -12.8,-32 -32,-32zM448,454.4L128,454.4v-320h320v320zM736,486.4c105.6,0 192,-86.4 192,-192s-86.4,-192 -192,-192 -192,86.4 -192,192 86.4,192 192,192zM576,294.4c0,-89.6 70.4,-160 160,-160s160,70.4 160,160 -70.4,160 -160,160 -160,-73.6 -160,-160zM896,550.4L576,550.4c-19.2,0 -32,12.8 -32,32v320c0,19.2 12.8,32 32,32h320c19.2,0 32,-12.8 32,-32v-320c0,-19.2 -12.8,-32 -32,-32zM896,902.4L576,902.4v-320h320v320zM448,550.4L128,550.4c-19.2,0 -32,12.8 -32,32v320c0,19.2 12.8,32 32,32h320c19.2,0 32,-12.8 32,-32v-320c0,-19.2 -12.8,-32 -32,-32zM448,902.4L128,902.4v-320h320v320z"/> </vector>
数据
<vector android:height="24dp" android:viewportHeight="1024.0" android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M191,864c0,17.7 -14.3,32 -32,32l0,0c-17.7,0 -32,-14.3 -32,-32L127,160c0,-17.7 14.3,-32 32,-32l0,0c17.7,0 32,14.3 32,32L191,864z"/> <path android:fillColor="#FF000000" android:pathData="M159,896c-17.7,0 -32,-14.3 -32,-32l0,0c0,-17.7 14.3,-32 32,-32l712,0c17.7,0 32,14.3 32,32l0,0c0,17.7 -14.3,32 -32,32L159,896z"/> <path android:fillColor="#FF000000" android:pathData="M307.1,686.3c-12.4,12.4 -32.4,12.4 -44.8,0l0,0c-12.4,-12.4 -12.4,-32.4 0,-44.8l173.4,-173.4c12.4,-12.4 32.4,-12.4 44.8,0l0,0c12.4,12.4 12.4,32.4 0,44.8L307.1,686.3z"/> <path android:fillColor="#FF000000" android:pathData="M608.8,640c-12.4,12.4 -32.4,12.4 -44.8,0l0,0c-12.4,-12.4 -12.4,-32.4 0,-44.8l212.7,-212.7c12.4,-12.4 32.4,-12.4 44.8,0l0,0c12.4,12.4 12.4,32.4 0,44.8L608.8,640z"/> <path android:fillColor="#FF000000" android:pathData="M608,595.3c12.4,12.4 12.4,32.4 0,44.8l0,0c-12.4,12.4 -32.4,12.4 -44.8,0L436,512.8c-12.4,-12.4 -12.4,-32.4 0,-44.8l0,0c12.4,-12.4 32.4,-12.4 44.8,0L608,595.3z"/> </vector>
我的
<vector android:height="24dp" android:viewportHeight="1024.0" android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M512,39.4c-260.9,0 -472.5,211.5 -472.5,472.5S251.1,984.3 512,984.3s472.5,-211.5 472.5,-472.5S772.9,39.4 512,39.4zM512,941.4c-237.3,0 -429.6,-192.3 -429.6,-429.6 0,-237.3 192.3,-429.6 429.6,-429.6s429.6,192.3 429.6,429.6C941.6,749.1 749.3,941.4 512,941.4z"/> <path android:fillColor="#FF000000" android:pathData="M792.4,862.5c-0.1,-0.9 -0.2,-1.8 -0.3,-2.8 -0,-2 -0.3,-3.9 -0.7,-5.8 -13.1,-103 -80.4,-189 -172.5,-228.6 53.2,-36.4 88.1,-97.6 88.1,-166.9 0,-111.7 -90.6,-202.2 -202.2,-202.2 -111.7,0 -202.2,90.5 -202.2,202.2 0,69.4 34.9,130.6 88.1,167 -91,39.2 -157.9,123.9 -171.9,225.4 -1,3 -1.6,6.1 -1.6,9.4l0.2,2.2c0,0 -0,0.1 -0,0.1l0,0 0,0.3c0,15.9 12.9,28.8 28.8,28.8 15.9,0 28.8,-12.9 28.8,-28.8l-0,-0.3 0.5,0c13.4,-110.1 104.4,-196.3 216.6,-202.3 4.2,0.3 8.4,0.4 12.6,0.4 4.2,0 8.4,-0.1 12.6,-0.4 112.3,6 203.2,92.2 216.7,202.3l0.6,0 0,0.3c0,15.9 12.9,28.8 28.8,28.8s28.8,-12.9 28.8,-28.8l-0,-0.3L792.4,862.5 792.4,862.5zM504.8,602.8c-79.8,0 -144.4,-64.7 -144.4,-144.4 0,-79.8 64.7,-144.5 144.4,-144.5s144.4,64.7 144.4,144.5C649.2,538.1 584.5,602.8 504.8,602.8L504.8,602.8zM504.8,602.8"/> </vector>
2、首页布局 activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".activity.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpagerFrame" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /> </LinearLayout>
3、MainActivity 代码
public class MainActivity extends BaseActivity { @BindView(R.id.bottom_navigation_bar) BottomNavigationBar mBottomNavigationBar; @BindView(R.id.viewpagerFrame) ViewPager mViewPagerFrame; private List<BaseFragment> fragments; BadgeItem numberBadgeItem; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); initBottomNavigationBar(); initViewPagerFrame(); } //region 界面初始化 /** * 初始化底部导航栏 * * @author baimch 2017/4/21 14:06 */ private void initBottomNavigationBar() { mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED); mBottomNavigationBar .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC); mBottomNavigationBar .setInActiveColor(R.color.nav_InActive) .setBarBackgroundColor(R.color.nav_BarBackground); numberBadgeItem = new BadgeItem() .setBorderWidth(4) .setText("5"); mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_nav_home, R.string.nav_first)) .addItem(new BottomNavigationItem(R.drawable.ic_nav_func, R.string.nav_second)) .addItem(new BottomNavigationItem(R.drawable.ic_nav_data, R.string.nav_third)) .addItem(new BottomNavigationItem(R.drawable.ic_nav_myself, R.string.nav_forth).setBadgeItem(numberBadgeItem)) .setFirstSelectedPosition(0) .initialise(); mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() { @Override public void onTabSelected(int position) { if (fragments != null) { if (position < fragments.size()) { mViewPagerFrame.setCurrentItem(position); if (position == 3) { //如果点击我的 隐藏消息数值 numberBadgeItem.hide(); } } } } @Override public void onTabUnselected(int position) { } @Override public void onTabReselected(int position) { } }); } /** * 初始化ViewPager * * @author baimch 2017/4/21 14:05 */ private void initViewPagerFrame() { fragments = getFragments(); mViewPagerFrame.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mBottomNavigationBar.selectTab(position); } @Override public void onPageScrollStateChanged(int state) { } }); mViewPagerFrame.setAdapter(new BasePageAdapter(getSupportFragmentManager(), fragments)); } //endregion /** * 获取首页界面列表 * * @return fragment列表 * @author baimch 2017/4/21 14:04 */ private ArrayList<BaseFragment> getFragments() { ArrayList<BaseFragment> fragments = new ArrayList<>(); fragments.add(new Main_HomeFragment()); fragments.add(new Main_FuncFragment()); fragments.add(new Main_DataFragment()); fragments.add(new Main_MySelfFragment()); return fragments; } }
适配器
public class BasePageAdapter extends FragmentPagerAdapter { private List<BaseFragment> mFragments; public BasePageAdapter(FragmentManager fm, List<BaseFragment> mFragments) { super(fm); this.mFragments = mFragments; } @Override public Fragment getItem(int position) {//必须实现 return mFragments.get(position); } @Override public int getCount() {//必须实现 return mFragments.size(); } @Override public CharSequence getPageTitle(int position) {//选择性实现 return mFragments.get(position).getClass().getSimpleName(); } }
4、三个Fragment，仅以一个举例
public class Main_HomeFragment extends BaseFragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_mainhome, null); return view; } }
