radiobutton 带小圆点_低仿知乎ViewPager三层嵌套页面布局

仿照着知乎写了一套UI界面，结合着以前学的知识，一天就撸了出来，其实也没啥东西，就是有些没接触的地方踩了坑。

效果展示

效果展示

涉及知识点

最基础的viewpager编写可以参看这篇超简单ViewPager控件实现Demo

recycleview的实现可以参看这篇RecyclerView的使用简介

viewpager需要添加为recycleview的头布局才能在recycleview上滑的时候上滑，但是recycleview没有添加头布局方法，具体的实现是通过加载不同item的方式。

可以参看我写的RecycleView加载不同类型的Item

页面分析

页面分析

实现思路

外层的viewpager页面，通过点击页面底部的RadioButton来进行页面切换(禁止此viewpager响应滑动事件)，配合fragment实现。

中间层的viewpager页面，通过和tablayout绑定，配合fragment，实现顶部页签。

顶层的viewpager页面，就是个简单的轮播图，循环播放不想写了。底部使用了viewpagerindicator开源库实现小圆点指示器。

添加依赖

compile 'com.android.support:design:24.2.0'

compile 'com.android.support:cardview-v7:24.2.0'

compile 'com.android.support:recyclerview-v7:24.2.0'

viewpagerindicator开源库可以从我的项目中下载

1. 外层viewpager的布局实现

布局代码实现

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/vp_main"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"/>

android:id="@+id/rg_group"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:paddingTop="5dp">

android:id="@+id/rb_home"

style="@style/BottomTabStyle"

android:checked="true"

android:drawableBottom="@drawable/btn_tab_home_selector"/>

android:id="@+id/rb_news"

style="@style/BottomTabStyle"

android:drawableBottom="@drawable/btn_tab_news_selector"/>

android:id="@+id/rb_service"

style="@style/BottomTabStyle"

android:drawableBottom="@drawable/btn_tab_service_selector"/>

android:id="@+id/rb_gov"

style="@style/BottomTabStyle"

android:drawableBottom="@drawable/btn_tab_gov_selector"/>

android:id="@+id/rb_setting"

style="@style/BottomTabStyle"

android:drawableBottom="@drawable/btn_tab_setting_selector"/>

禁止滑动的viewpager实现，继承viewpager

public class NoScrollViewPager extends ViewPager {

public NoScrollViewPager(Context context) {

super(context);

}

public NoScrollViewPager(Context context, AttributeSet attrs) {

super(context, attrs);

}

//表示事件是否拦截，返回false表示不拦截

@Override