引言
曾经看到网易、头条新闻就想自己实现一下效果,结果花费了不少时间,基础不牢,地动山摇,现在一步步深入学习Android后发现实现一下也不难,现在就简单记录下自己的实现思路和方法,供自己以后参考。
实现思路
首先能看到的应该是三个部分Toolbar+TabLayout+ViewPager,再细分下去,ViewPager包含了一个Recyclerview,里面有很多itemview来显示和滑动,往大了看,还有AppBarLayout包裹Toolbar和TabLayout作为顶部栏,最后整个包上CoordinatorLayout协调其所包裹的子view的手势操作的,大致就酱,具体实现下面一步步看。
关于ViewPager
1.一个页面切换的组件,可以往里面填充多个View,可以通过触摸屏幕左右滑动来切换不同的View,官方连接ViewPager ,和大多数情况一样需要一个Adapter适配器,将要显示的View和ViewPager绑定,由于官方建议使用Fragment来填充ViewPager这样方便生成与管理生命周期等等,一般主要使用FragmentPageAdapter,它的缓存机制是缓存当前页,前一页和后一页共3页这样。
2.使用PagerAdapter的重要方法:
- getCount( ):获得viewpager中有多少个view
- destroyItem( ):移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。
- instantiateItem( ):①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了,当然你也可以自定义自己的key,但是key和每个view要一一对应的关系
- isViewFromObject( ):判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的,对应的表示同一个View),通常我们直接写return view == object;就可以了,至于为什么要这样讲起来比较复杂,后面有机会进行了解吧,貌似是ViewPager中有个存储view状态信息的ArrayList,根据View取出对应信息的吧!
关于AppBarLayout
AppBarLayout控件,它是继承LinerLayout实现的一个ViewGroup容器组件,是为了Material Design而设计的App Bar,支持手势滑动操作。
默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout包裹的内容都作为AppBar。
使用方式非常简单,直接在布局文件中包裹想要作为顶部栏的控件,例如Toolbar和TabLayout.
关于CoordinatorLayout
CoordinatorLayout是一个增强型的FrameLayout,它的作用就是用来协调其所包裹的子view的手势操作的.
为了达到手势动画效果,我们必须做如下设置,通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的.关于layout_scrollFlags的属性设置,在布局文件中描述,这里就不多说了.
同时,为了使得Toolbar可以滑动,我们必须还得有个条件,就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如: RecyclerView,NestedScrollView(ListView,ScrollView不支持)具有滑动效果的组件。并且还需要给这些组件设置如下属性来告诉CoordinatorLayout
app:layout_behavior="@string/appbar_scrolling_view_behavior"
该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout中可滑动的Toolbar可以滑出屏幕了。
关于TabLayout
TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator.
使用非常方便,Android Studio只需要在gradle中引入design即可使用.
来看看配合ViewPager的使用方式,实现如下效果图:
- app:tabGravity=”center” 对齐方式,可选fill和center
- app:tabIndicatorColor=”@color/colorAccent” 设置tab下划线的颜色
- app:tabMode=”scrollable” scrollable是可以横行滚动,fixed是指固定个数
- app:tabSelectedTextColor=”@color/colorPrimaryDark” 选择tab的文本颜色
- app:tabTextColor=”@color/colorPrimary” 普通tab字体颜色
//1.支持添加字符串文本tab
//tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
//2.支持添加图片tab
//tabLayout.addTab(tabLayout.newTab().setIcon(R.mipmap.ic_launcher));
//3.支持添加View
View tabView = View.inflate(TabLayoutOnlyActivity.this, R.layout.view_tab, null);
((TextView)tabView.findViewById(R.id.tv_title)).setText("TAB" + i);
tabLayout.addTab(tabLayout