Android基础学习总结（七）——简单实现新闻选项卡滑动效果(CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager大合成）

最新推荐文章于 2025-06-15 12:45:48 发布

万般滋味皆生活

最新推荐文章于 2025-06-15 12:45:48 发布

阅读量1.3w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： Android 滑动选项卡 CoordinatorLayout

本文链接：https://blog.youkuaiyun.com/kilotwo/article/details/79197498

这篇博客总结了如何在Android中实现新闻选项卡滑动效果，通过结合使用CoordinatorLayout、AppBarLayout、Toolbar、TabLayout和ViewPager等组件。文章详细介绍了每个组件的作用和配置方法，以及最后的大合成步骤，帮助读者理解并实现类似的UI效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

曾经看到网易、头条新闻就想自己实现一下效果，结果花费了不少时间，基础不牢，地动山摇，现在一步步深入学习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的使用方式,实现如下效果图:
xiaoguotu1

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