android获取顶部窗口,快速实现顶端导航栏 (ToolBar+TabLayout+Viewpager)
快速实现顶端导航栏 (ToolBar+TabLayout+Viewpager)
1, 前言
在 Android 开发前期时, 实现一个业务分明的导航栏对后面各业务开发与解耦都有重要意义. 现在各种厂商的导航栏样式都比较类似, Tab 型的导航是当下被大家所选择的形式, 今天我们就来快速搭建一个 Tab 类型的导航栏. 底下可 参考源码 .
2, 效果图
今日头条. gif
豌豆荚. gif
可以看到不同业务情况下, 导航栏可以固定或者滑动. 废话不多说, 直接上代码.
3, 实现
1, 添加依赖
compile 'com.android.support:design:26.1.0'
2, 页面布局
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.main.wangliwei.enablehands.view.MainActivity">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp">
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="25dp"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_marginTop="30dp">
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/white"
android:layout_marginTop="10dp">
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
根布局为 CoordinatorLayout 从上到下依次为 toolbar,tabLayout,viewpager, 由于我做了沉浸式布局处理, 所以在 toolbar 上面留出了状态栏的空间, 阴影高度 elevation, 设置
app:tabMode="scrollable"
使导航栏在显示不全的情况下可滑动. 而 Tab 页面切换关键在于将 TabLayout 与 ViewPager 进行绑定.
3, 代码
因为 ViewPager 是一个容器, 我们把 Fragment 看作数据的话, 则必须有一个 adapter 将数据按顺序地放入我们的容器中, 这时需要新建一个类继承自
FragmentPagerAdapter
. 与 TabLayout 搭配使用时必须复写 getPageTitle 这一方法, 在获取 adapter 实例时将 title 传入, getItem 返回的实例与 title 一一对应.ViewPagerAdapter
publicclassViewPagerAdapterextendsFragmentPagerAdapter{
privateListfragmentList;
privateListtitleList;
publicViewPagerAdapter(FragmentManagerfm,ListfragmentList,ListtitleList){
super(fm);
this.fragmentList=fragmentList;
this.titleList=titleList;
}
@Override
publicintgetCount(){
returnfragmentList.size();
}
@Override
publicFragmentgetItem(intposition){
returnfragmentList.get(position);
}
@Override
publicCharSequencegetPageTitle(intposition){
returntitleList.get(position);
}
}
设置 Toolbar 以及 TabLayout 与 ViewPager 的对应关系privatevoidinitToolBar(){
toolbar.setNavigationIcon(R.mipmap.other);
Listlist_fragment=newArrayList<>();
for(inti=0;i<6;i++){
list_fragment.add(newPictureFragment());
}
ViewPagerAdapterviewPagerAdapter=newViewPagerAdapter(getSupportFragmentManager(),list_fragment,Arrays.asList(tabTitle));
viewPager.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
沉浸式效果
理论上来说现在的沉浸式都不是意义上的沉浸式, 这里先不考虑 5.1 以下沉浸式实现, 5.1 以上是可以直接通过设置 Window 类中的
setStatusBarColor(int color)
和
setNavigationBarColor(int color)
来实现, 具体原理都是先设置状态栏和导航栏的颜色为透明, 然后让主体内容占用它们的空间.
更多的了解可以参考 这篇文章 .privateintoption=View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
privatevoidsetTransParent(){
getWindow().getDecorView().setSystemUiVisibility(option);
getWindow().setStatusBarColor(Color.TRANSPARENT);
getWindow().setNavigationBarColor(Color.TRANSPARENT);
getSupportActionBar().hide();
}
实现效果
tablayout.gif
项目以后会继续增加其他内容, 参考 MainActivity 中的内容即可.
查看源码
来源: http://www.jianshu.com/p/29f103f343a5