中值_CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout布局

篇首语：本文由编程笔记#小编为大家整理，主要介绍了CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout布局相关的知识，希望对你有一定的参考价值。

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

&＃xff08;1&＃xff09;整体布局&＃xff1a;

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

先给出整体布局的xml代码&＃xff1a;

<android.support.design.widget.CoordinatorLayout
android:layout_below&＃61;"&＃64;&＃43;id/rel_home"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"match_parent">
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"wrap_content"
android:orientation&＃61;"vertical">
android:id&＃61;"&＃64;&＃43;id/ll_banner"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"wrap_content"
android:layout_marginLeft&＃61;"&＃64;dimen/dp12"
android:layout_marginTop&＃61;"&＃64;dimen/dp12"
android:layout_marginRight&＃61;"&＃64;dimen/dp12"
app:layout_scrollFlags&＃61;"scroll">
android:id&＃61;"&＃64;&＃43;id/convenient_banner"
android:layout_width&＃61;"match_parent"
android:layout_height&＃61;"&＃64;dimen/dp104"
app:canLoop&＃61;"true" />

android:id&＃61;"&＃64;&＃43;id/tablayout"
android:layout_width&＃61;"match_parent"
app:tabMaxWidth&＃61;"&＃64;dimen/dp84"
android:layout_height&＃61;"&＃64;dimen/dp34"
style&＃61;"&＃64;style/aliwx_column_third_grade_with_click_style"
app:tabPaddingEnd&＃61;"0dp"
app:tabPaddingStart&＃61;"&＃64;dimen/dp0"
android:layout_marginBottom&＃61;"&＃64;dimen/dp12"
android:layout_marginLeft&＃61;"&＃64;dimen/dp12"
android:layout_marginRight&＃61;"&＃64;dimen/dp12"
app:tabIndicatorHeight&＃61;"0dp"
android:layout_marginTop&＃61;"&＃64;dimen/dp12"
android:background&＃61;"&＃64;drawable/iv_homefragment_label" />


android:id&＃61;"&＃64;&＃43;id/viewpager"
android:layout_width&＃61;"match_parent"
android:layout_marginLeft&＃61;"&＃64;dimen/dp12"
android:layout_marginRight&＃61;"&＃64;dimen/dp12"
android:layout_height&＃61;"match_parent"
app:layout_behavior&＃61;"&＃64;string/appbar_scrolling_view_behavior" />


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

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

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

而 app:layout_behavior&＃61;"&＃64;string/appbar_scrolling_view_behavior"指定了ViewPager的滚动行为

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

&＃xff08;2&＃xff09;ViewPager部分

viewpager这里设计的是使用viewpager&＃43;fragment&＃43;recyclerview的方式是实现。

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

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

接着viewpager的部分&＃xff0c;首先是viewpager的适配器&＃xff0c;此处使用FragmentPagerAdapter&＃xff1a;

public class HomeViewPagerAdapter extends FragmentPagerAdapter
private List mLabelsListBeanList;
private Context mContext;
private List mViewPagerFragments;
FragmentManager fM;
public HomeViewPagerAdapter(Context context,FragmentManager fm, List labelsListBeanList)
super(fm);
fM &＃61; fm;
mContext&＃61;context;
mLabelsListBeanList&＃61;labelsListBeanList;
mViewPagerFragments&＃61;new ArrayList<>();

&＃64;Override
public Fragment getItem(int position)
ViewPagerFragment fragment &＃61; new ViewPagerFragment();
Bundle bundle&＃61;new Bundle();
bundle.putParcelable("data",mLabelsListBeanList.get(position));
fragment.setArguments(bundle);
return fragment;

public void notifData( List labelsListBeanList)
mLabelsListBeanList&＃61;labelsListBeanList;
notifyDataSetChanged();

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

&＃64;Override
public int getCount()
return mLabelsListBeanList&＃61;&＃61;null?0:mLabelsListBeanList.size();

&＃64;Override
public int getItemPosition(Object object)
return POSITION_NONE;



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

&＃xff08;3&＃xff09;自定义tablayout

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

  &＃64;Override
    public CharSequence getPageTitle(int position)
        return tabStringList.get(position);
   

tagStringList即为标签文字集合

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

//此处设置tablayout的内容
for (int i &＃61; 0; i TabLayout.Tab tabAt &＃61; mHomePageChangeFragmentView.getTabLayout().getTabAt(i);
View view&＃61; LayoutInflater.from(mContext).inflate(R.layout.item_recycler_home,null);
if (i&＃61;&＃61;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&＃61;&＃61;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);


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

&＃64;Override
public void onTabSelected(TabLayout.Tab tab)
if (tab!&＃61;null&&tab.getCustomView()!&＃61;null)
tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.VISIBLE);
tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.INVISIBLE);

&＃64;Override
public void onTabUnselected(TabLayout.Tab tab)
if (tab!&＃61;null&&tab.getCustomView()!&＃61;null)
tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.INVISIBLE);
tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.VISIBLE);

&＃64;Override
public void onTabReselected(TabLayout.Tab tab)


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

app:tabPaddingEnd&＃61;"0dp"
app:tabPaddingStart&＃61;"&＃64;dimen/dp0"

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

本篇博客到此结束&＃xff0c;感谢观看。

如有不对&＃xff0c;请指正。

因为此效果是在项目中&＃xff0c; 所以不太好传源码&＃xff0c;见谅&＃xff01;