Android利用BottomNavigationView和ViewPager实现底部导航及源码下载分享

Android底部导航实现有多种方式，本篇文章介绍使用BottomNavigationView+ViewPager+FragmentStatePagerAdapter实现底部导航，并附代码下载链接地址。

为了测试效果程序在第一个菜单Fragment中引用了WebView，加载百度首页，加载效果如下。代码中也去掉了当

菜单项大于3个时诡异的滑动效果。代码下载地址链接：源码下载。

一、本工程是利用Android Studio生成的，底部导航菜单项目默认在menu资源目录下的navigation.xml中，默认

是三个菜单，为了测试大于3个菜单，出现诡异滑动效果，这里我们增加了一个菜单，对于滑动效果的去除可以查

看本博的这篇文章，http://blog.csdn.net/mpegfour/article/details/78378843。navigation.xml代码如下：

<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="@string/title_home" />

<item

android:id="@+id/navigation_dashboard"

android:icon="@drawable/ic_dashboard_black_24dp"

android:title="@string/title_dashboard" />

<item

android:id="@+id/navigation_notifications"

android:icon="@drawable/ic_notifications_black_24dp"

android:title="@string/title_notifications" />

<item

android:id="@+id/navigation_notifications1"

android:icon="@drawable/ic_notifications_black_24dp"

android:title="@string/title_notifications" />

</menu>

二、在这里我们创建了ViewPager的子类NoSlidViewPager，屏蔽了ViewPager左右滑动，代码如下：

public class NoSlidViewPager extends ViewPager {

public NoSlidViewPager(Context context, AttributeSet attrs) {

super(context, attrs);

}

public NoSlidViewPager(Context context) {

super(context);

}

/*

* 表示把滑动事件传递给父view

*/

@Override

public boolean onInterceptTouchEvent(MotionEvent arg0) {

return false;

}

/*

* 可以啥都不做

*/

public boolean onTouchEvent(MotionEvent arg0) {

return false;

}

}

三、主页整体布局中我们引入了NoSlidViewPager和BottomNavigationView，需要注意的是在

NoSlidViewPager中引入了android:layout_weight="1"，来控制屏幕空间。BottomNavigationV

iew为了一直在底部加入了android:layout_gravity="bottom"设置。整体布局activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>

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

android:orientation="vertical"

tools:context="com.jxkj.bbccode.anxiuyunslid.MainActivity">

<com.jxkj.bbccode.anxiuyunslid.viewpager.NoSlidViewPager

android:id="@+id/vp_noslidviewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"><!--填充剩余屏幕空间-->

</com.jxkj.bbccode.anxiuyunslid.viewpager.NoSlidViewPager>

<android.support.design.widget.BottomNavigationView

android:id="@+id/navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="?android:attr/windowBackground"

app:menu="@menu/navigation" />

</LinearLayout>

四、程序的主体代码了，我们分别声明了viewPager变量，Fragment集合，FragmentStatePagerAdapter变量，

对于FragmentStatePagerAdapter和FragmentPagerAdapter的差别可以查看这篇文章，点击打开链接。

public class MainActivity extends AppCompatActivity {

private NoSlidViewPager noSlidViewPager;

private ArrayList<Fragment> fragmentList = new ArrayList<>(4);

private FragmentStatePagerAdapter fragmentStatePagerAdapter;

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener

= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()) {

case R.id.navigation_home:

noSlidViewPager.setCurrentItem(0);

return true;

case R.id.navigation_dashboard:

//mTextMessage.setText(R.string.title_dashboard);

noSlidViewPager.setCurrentItem(1);

return true;

case R.id.navigation_notifications:

noSlidViewPager.setCurrentItem(2);

//mTextMessage.setText(R.string.title_notifications);

return true;

case R.id.navigation_notifications1:

noSlidViewPager.setCurrentItem(3);

//mTextMessage.setText(R.string.title_notifications);

return true;

}

return false;

}

};

/*

Android、Java、c#等技术交流群：161154103

创业想法的小伙伴更是欢迎

*/

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

noSlidViewPager=(NoSlidViewPager)findViewById(R.id.vp_noslidviewpager);

fragmentList.add(new HomeFragment());

fragmentList.add(new DashboardFragment());

fragmentList.add(new NotificationFragment());

//第四个菜单我们这里是为了测试滑动变形添加的没有单独生成Fragment

fragmentList.add(new NotificationFragment());

fragmentStatePagerAdapter=new FragmentStatePagerAdapter(getSupportFragmentManager()) {

@Override

public Fragment getItem(int position) {

return fragmentList.get(position);

}

@Override

public int getCount() {

return fragmentList.size();

}

};

noSlidViewPager.setAdapter(fragmentStatePagerAdapter);

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

//多于3个菜单时去掉诡异滑动效果

BNVEffect.disableShiftMode(navigation);

navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

navigation.setSelectedItemId(R.id.navigation_home);

}

}

五、最后为了测试效果我们在HomeFragment中引入了WebView，并在AndroidManifest做了网络访问授权，<uses-permission android:name="android.permission.INTERNET" />。WebView代码如下：

webView = (WebView) view.findViewById(R.id.webView);

//webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

WebSettings webSettings = webView.getSettings();

webSettings.setJavaScriptEnabled(true);//设置支持javascript

webSettings.setBuiltInZoomControls(true);

webSettings.setSupportZoom(true);//支持缩放

webSettings.setAllowFileAccess(true); // 允许访问文件

//webSettings.supportMultipleWindows();//多窗口

webSettings.setLoadsImagesAutomatically(true);//自动加载图片

webSettings.setLoadWithOverviewMode(true);//适应屏幕

webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

//webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL.SINGLE_COLUMN);

webSettings.setUseWideViewPort(true);//

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT );

webView.loadUrl("http://www.baidu.com";);//127a5bd99d694f11bf444dc6076cd020" );//+ articleBean.getId()

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// TODO Auto-generated method stub

//返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器

view.loadUrl(url);

return true;

}

});

代码下载地址：http://download.csdn.net/download/mpegfour/10043665