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

移动开发 waitig 862℃ 百度已收录 0评论

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",来控制屏幕空间。BottomNavigationView为了一直在底部加入了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


本文由【waitig】发表在等英博客
本文固定链接:Android利用BottomNavigationView和ViewPager实现底部导航及源码下载分享
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)