CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout布局

最新推荐文章于 2024-09-25 15:58:02 发布
最新推荐文章于 2024-09-25 15:58:02 发布
阅读量8.5k 收藏 13
点赞数 6
文章标签： android CoordinatorLayout 自定义TabLayout ViewPager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZ511321/article/details/83057671
版权
本文详细介绍了一种基于CoordinatorLayout、ViewPager、RecyclerView和自定义TabLayout的安卓布局方案，通过实例解析了各组件的配置与交互，包括整体布局设计、ViewPager与Fragment结合使用、自定义TabLayout的实现等关键步骤。
摘要由CSDN通过智能技术生成

首先看看效果确定是不是你想要的：

如果效果是你想要的，那就接着往下看吧，我会一一介绍

（1）整体布局：

布局采用CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout实现，其中CoordinatorLayout为可上下滚动部分，ViewPager作为左右切换部分，tablayout作为标签部分

先给出整体布局的xml代码：

<android.support.design.widget.CoordinatorLayout
    android:layout_below="@+id/rel_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:id="@+id/ll_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dp12"
            android:layout_marginTop="@dimen/dp12"
            android:layout_marginRight="@dimen/dp12"
            app:layout_scrollFlags="scroll">

            <com.bigkoo.convenientbanner.ConvenientBanner
                android:id="@+id/convenient_banner"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp104"
                app:canLoop="true" />
        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            app:tabMaxWidth="@dimen/dp84"
            android:layout_height="@dimen/dp34"
            style="@style/aliwx_column_third_grade_with_click_style"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="@dimen/dp0"
            android:layout_marginBottom="@dimen/dp12"
            android:layout_marginLeft="@dimen/dp12"
            android:layout_marginRight="@dimen/dp12"
            app:tabIndicatorHeight="0dp"
            android:layout_marginTop="@dimen/dp12"
            android:background="@drawable/iv_homefragment_label" />
        <!--</LinearLayout>-->
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_marginLeft="@dimen/dp12"
        android:layout_marginRight="@dimen/dp12"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

布局可见，CoordinatorLayout为滚动部分的整体布局，甚至可看做行为可控制的ScrollView。

AppBarLayout作为悬浮窗口，什么地方要悬浮就在此ViewGroup里面写布局，而需要注意的是标红部分app:layout_scrollFlags="scroll" 其中值有五种，具体差异可在这篇博客中看到：https://www.jianshu.com/p/7caa5f4f49bd

此处的意思是其ChildView跟随滚动事件移除屏幕外或移进。

而 app:layout_behavior="@string/appbar_scrolling_view_behavior"指定了ViewPager的滚动行为

当总体布局写成这样就能基本实现框架了，接下来将各部分关联起来

（2）ViewPager部分

viewpager这里设计的是使用viewpager+fragment+recyclerview的方式是实现。

首先viewpager与tablayout绑定就很简单的一句话：mTablayout.setupWithViewPager(mViewpager);

这样的话。viewpager与tablayout的行为就实现了绑定，具体内容填充后面会介绍到

接着viewpager的部分，首先是viewpager的适配器，此处使用FragmentPagerAdapter：

public class HomeViewPagerAdapter extends FragmentPagerAdapter {
    private List<HomeLabelsEntity.LabelsListBean> mLabelsListBeanList;
    private Context mContext;
    private List<ViewPagerFragment> mViewPagerFragments;
    FragmentManager fM;
    public HomeViewPagerAdapter(Context context,FragmentManager fm, List<HomeLabelsEntity.LabelsListBean> labelsListBeanList) {
        super(fm);
        fM = fm;
        mContext=context;
        mLabelsListBeanList=labelsListBeanList;
        mViewPagerFragments=new ArrayList<>();
    }

    @Override
    public Fragment getItem(int position) {
        ViewPagerFragment fragment = new ViewPagerFragment();
        Bundle bundle=new Bundle();
        bundle.putParcelable("data",mLabelsListBeanList.get(position));
        fragment.setArguments(bundle);
        return fragment;
    }
    public void notifData( List<HomeLabelsEntity.LabelsListBean> labelsListBeanList){
        mLabelsListBeanList=labelsListBeanList;
        notifyDataSetChanged();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ViewPagerFragment fragment = (ViewPagerFragment)super.instantiateItem(container,
                position);
        FragmentTransaction ft =fM.beginTransaction();
        String fragmentTag = fragment.getTag();
        ft.remove(fragment);
        fragment = new ViewPagerFragment();
        Bundle bundle=new Bundle();
        bundle.putParcelable("data",mLabelsListBeanList.get(position));
        fragment.setArguments(bundle);
        ft.add(container.getId(), fragment, fragmentTag);
        ft.attach(fragment);
        ft.commitAllowingStateLoss();
        return fragment;
    }



    @Override
    public int getCount() {
        return mLabelsListBeanList==null?0:mLabelsListBeanList.size();
    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }
}

此处需要注意的就是两个标红方法的重载，getItem当Viewpager创建新界面的时候启用，instantiateItem是当前界面渲染的时候使用，因为我写的效果里面需要切换城市，要刷新Viewpager的状态与数据，所以需要使用到instantiateItem，没有这个需求的，getItem就能够实现。此处使用的是传参方式将数据传递到new出来的fragment。至于fragment部分就拿到数据，展示到recyclerview里面，这里就不做说明了。

（3）自定义tablayout

首先说明如果是纯文字的tablayout只需要在viewpager的adapter中加上

  @Override
    public CharSequence getPageTitle(int position) {
        return tabStringList.get(position);
    }

tagStringList即为标签文字集合

而如果采用自定义tablayout的话就需要在绑定之后进行布局的渲染：

  //此处设置tablayout的内容
    for (int i = 0; i < mLabelsListBeanLists.size(); i++) {
        TabLayout.Tab tabAt = mHomePageChangeFragmentView.getTabLayout().getTabAt(i);
        View view= LayoutInflater.from(mContext).inflate(R.layout.item_recycler_home,null);
        if (i==mLabelsListBeanLists.size()-1){
            //最后一个不显示箭头
            view.findViewById(R.id.iv_cutline).setVisibility(View.GONE);
        }else{
            view.findViewById(R.id.iv_cutline).setVisibility(View.VISIBLE);
        }
        ((TextView)view.findViewById(R.id.tv_selected)).setText(mLabelsListBeanLists.get(i).getName());
        ((TextView)view.findViewById(R.id.tv_unselect)).setText(mLabelsListBeanLists.get(i).getName());
        if (i==0){
            //第一个默认设置被选中
            view.findViewById(R.id.llyout_selected).setVisibility(View.VISIBLE);
            view.findViewById(R.id.tv_unselect).setVisibility(View.INVISIBLE);
        }else{
            //其他设置为不选中状态
            view.findViewById(R.id.llyout_selected).setVisibility(View.INVISIBLE);
            view.findViewById(R.id.tv_unselect).setVisibility(View.VISIBLE);
        }
        tabAt.setCustomView(view);
    }
    mHomePageChangeFragmentView.getTabLayout().addOnTabSelectedListener(this);
}

如代码所示，在tablayout绑定viewpager后，填充tablayout的布局，并处理事件，处理事件采用监听

@Override
public void onTabSelected(TabLayout.Tab tab) {
    if (tab!=null&&tab.getCustomView()!=null){
        tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.VISIBLE);
        tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.INVISIBLE);
    }
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
    if (tab!=null&&tab.getCustomView()!=null){
        tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.INVISIBLE);
        tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.VISIBLE);
    }
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}

而此处说一说自己踩的坑，首先tablayout的子布局tabitem宽度，并不是根据你设置的宽度进行渲染的，它会在计算的时候进行重新计算，类似于LinearLayout子布局中加android:layout_weight=""的效果，平分tablayout的宽度，想要自行设置宽度的话，在tablyout中设置属性app:tabMaxWidth="@dimen/dp84"即可，然后tabitem自带padding，所以发现自己布局不对的话，设置其属性

app:tabPaddingEnd="0dp"
app:tabPaddingStart="@dimen/dp0"

而想要设置没有下划线则设置，app:tabIndicatorHeight="0dp"，此处不再多做赘述，因为属性有点多，具体的根据想要实现的效果填充即可

 

本篇博客到此结束，感谢观看。

如有不对，请指正。

因为此效果是在项目中， 所以不太好传源码，见谅！

LZ涸泽而渔
关注
Android开发之复杂布局嵌套(ScrollView+TabLayout+ViewPager+RecyclerView)导致冲突的解决办法
黄庆庆的世界
03-28 1万+
前言 最近在做一些项目和毕业设计，所以自从上次梳理完数据结构之后，一直想写些什么，但是又没有比较好的内容，所以博客从过完年之后就停更了很长很长很长一段时间，不过这次在做项目的时候，正好遇到一个我本以为很简单，结果折腾了好久的一个问题，其实这个问题对于做Android开发的同学来说，并不陌生，那就是滑动布局的互相嵌套。 当然并不仅限于标题中写的这种嵌套，只要是可滑动的布局，例如GridView，各种...
Android基础学习总结（七）——简单实现新闻选项卡滑动效果(CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager大合成）
热门推荐
.
01-29 1万+
引言 曾经看到网易、头条新闻就想自己实现一下效果，结果花费了不少时间，基础不牢，地动山摇，现在一步步深入学习Android后发现实现一下也不难，现在就简单记录下自己的实现思路和方法，供自己以后参考。 实现思路 首先能看到的应该是三个部分Toolbar+TabLayout+ViewPager,再细分下去，ViewPager包含了一个Recyclerview，里面有很多itemview来显示
CoordinatorLayout+ViewPager+Behavior仿喜马拉雅FM首页
Fred
06-22 1748
实现方案 ViewPager CoordinatorLayout Behavior ViewPager变换 @Override public void onPageScroll(int enterPosition, int leavePosition, float percent) { try { ...
Android CoordinatorLayout+viewpager+Fragment+RecyclerView高仿知乎和简书 头部滑动收缩
深南大盗的博客
06-15 4148
CoordinatorLayout继承viewgourp 作为最上层的View 作为一个 容器与一个或者多个子View进行交互 原理： 刚刚我们在RecyclerView设置的app:layout_behavior其实就监听了他的滑动，这时候我们就缺Toolbar的协调， 就相当于观察者与被观察者，我们这个时候有了被观察者，观察者还没设置，那么我们就需要在Toolbar中设置a...
安卓开发中的TabLayout和ViewPager2的使用
最新发布
m0_66843126的博客
09-25 1464
data>
CoordinatorLayout+viewpager+RecycleView刷新
03-01
CoordinatorLayout+viewpager+RecycleView刷新
CoordinatorLayout+ViewPager+RecyclerView滑动冲突问题。
And_Ryh的博客
09-03 5310
我以前也没太关注过这个问题，今天浏览网站看到有人反映，于是我创建布局测了一下。 构建好布局之后：发现上划的时候可能会和ViewPager侧滑会产生冲突，导致滑动卡顿。 通过事件分发我们知道流程是CoordinatorLayout（可拦截）→ViewPager（可拦截）→RecyclerView（消费）→ViewPager（消费）→CoordinatorLayout（消费） 所以我们Tounch消费...
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView
07-16
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout + TabLayout + ViewPager2（里面再嵌套一个RecyclerView），RecyclerView的滑动冲突解决
oAiYinSiTan12的博客
06-29 7540
CoordinatorLayout + TabLayout + ViewPager2（里面再嵌套一个RecyclerView），RecyclerView的滑动冲突解决
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。怎么办呢 。（找了好久 ，在手机上下载了一个  GIF 动图制作） AppbarLayout 回顾 我记得 16 、17年的时候这个效果在很多 APP 上都有出现 。之前写过demo ，然后一直也没机会在项目中使用 。 实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
Android CoordinatorLayout + AppBarLayout+ToolBar(向上滚动隐藏指定的View)
06-24
6. 如果需要进一步自定义滚动行为，可以创建自定义的`Behavior`类，继承自`CoordinatorLayout.Behavior`，然后为`RecyclerView`或`AppBarLayout`指定这个`Behavior`。 通过这样的配置，`AppBarLayout`会根据`...
CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能
05-06
一个demo，将CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能，能够很顺畅的实现材料设计
自定义实现CoordinatorLayout效果,tablayout随recycleview滚动而滚动
08-23
自定义实现CoordinatorLayout效果,tablayout随recycleview滚动而滚动，根据这份代码改编而来：http://download.csdn.net/download/oushangfeng123/8971049
AppBarLayout+TabLayout+ViewPager+RecyclerView的界面UI模型
08-03
该UI模式支持viewpager翻页并与TabLayout联动，RecyclerView活动隐藏顶部导航栏，在fragment处，给出接口，可以随意设置，recyclerview的事件都已实现也留了接口给开发者调用
Android下的沉浸式状态栏+折叠TitleBar（CoordinatorLayout+CollapsingToolbarLayout）+ViewPager切换实现
M075097的博客
11-12 1万+
Android下的沉浸式状态栏+折叠TitleBar（CoordinatorLayout+CollapsingToolbarLayout）+ViewPager切换实现 最终效果以及过程中出现的问题如下:（简单解决在ViewPager+Fragment的组合中实现该效果时出现有页面视图偏移一个状态栏高度问题）                               
CoorDinatorLayout+AppBarLayout+TabLayout实现界面
moodstrikerdd的博客
12-20 6509
在上一个项目的开发中，遇到了一个比较复杂的界面。之后研究之后采用5.0之后的design包下的控件实现。 首先上效果图。在这个简单的demo中，我把这个View分为两个部分。 1、常驻部分。定义在Acrivity中 2、内容显示部分。定义在Activity的Fragment中。 常驻部分的布局非常简单，就不再赘述。重要的是内容显示部分的实现。在内容显示部分就要用到design包下的内容了，以
CoordinatorLayout +RecyclerView+加载不同布局的item
柏木白的博客
05-13 9303
最近在做一个仿海词词典的demo,首页主要用到了CoordinatorLayout 折叠标题，并加载下方不同布局的数据。海词词典的的首页是非常漂亮的，先让我们看下它的首页吧。直接上图片                               这里我们可以看到，首页向上滑动的过程中，只有上部分滑出了屏幕，而搜索框并没有，而是滑到了屏幕的上方看上去非常漂亮 在下边
ViewPager与CoordinatorLayout一起使用的一个Bug
weixin_33724059的博客
09-21 615
本文记录一个关于ViewPager与CoordinatorLayout一起使用的Bug，目前虽然有解决问题的方法，但是引起这个bug的原因依然没有找到。 最初的布局是正常的 项目最初的布局树是这样的： CoordinatorLayout --RelativeLayout(height:match_parent) ---...
CoordinatorLayout+TabLayout+ViewPager
weixin_34297704的博客
01-03 237
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.co...
TabLayout+ViewPager+Fragmet+RecyclerView结合的小demo
05-20
好的，下面是一个使用TabLayout+ViewPager+Fragmet+RecyclerView结合的小demo的示例代码。 1. 首先，在xml文件中添加TabLayout和ViewPager组件。 ```xml <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 创建Fragment类，用于展示RecyclerView数据。 ```java public class SimpleFragment extends Fragment { private RecyclerView recyclerView; private SimpleAdapter adapter; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_simple, container, false); recyclerView = view.findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(getContext())); adapter = new SimpleAdapter(); recyclerView.setAdapter(adapter); return view; } } ``` 3. 创建FragmentPagerAdapter类，用于管理Fragment。 ```java public class SimplePagerAdapter extends FragmentPagerAdapter { private String[] titles; public SimplePagerAdapter(FragmentManager fm, String[] titles) { super(fm); this.titles = titles; } @Override public Fragment getItem(int position) { return new SimpleFragment(); } @Override public int getCount() { return titles.length; } @Nullable @Override public CharSequence getPageTitle(int position) { return titles[position]; } } ``` 4. 创建RecyclerView Adapter类，用于展示数据。 ```java public class SimpleAdapter extends RecyclerView.Adapter<SimpleViewHolder> { private List<String> data; public SimpleAdapter() { data = new ArrayList<>(); for (int i = 0; i < 20; i++) { data.add("Item " + i); } } @NonNull @Override public SimpleViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_simple, parent, false); return new SimpleViewHolder(view); } @Override public void onBindViewHolder(@NonNull SimpleViewHolder holder, int position) { holder.textView.setText(data.get(position)); } @Override public int getItemCount() { return data.size(); } } ``` 5. 创建RecyclerView ViewHolder类，用于展示每个item。 ```java public class SimpleViewHolder extends RecyclerView.ViewHolder { public TextView textView; public SimpleViewHolder(View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); } } ``` 6. 最后，在Activity中进行初始化和设置。 ```java public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); String[] titles = {"Tab 1", "Tab 2", "Tab 3"}; SimplePagerAdapter adapter = new SimplePagerAdapter(getSupportFragmentManager(), titles); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); } } ``` 这样就完成了TabLayout+ViewPager+Fragmet+RecyclerView结合的小demo。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值