玩Android项目开发9-----公众号页面（垂直TabLayout + RecyclerView联动）

在玩美团或者淘宝APP时，肯定有见过这样的页面，垂直方向上的TabLayout，点击每个Tab就切换到对应的页面。

在项目中，先引进垂直TabLayout依赖。

implementation 'q.rorbin:VerticalTabLayout:1.2.5'

使用和之前的TabLayout一样，直接上布局吧。

<include android:id="@+id/wechat_title" layout="@layout/title"></include>
    <q.rorbin.verticaltablayout.VerticalTabLayout
        android:id="@+id/vt_table"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_below="@id/wechat_title"
        app:tab_mode="scrollable"
        app:tab_height="40dp"
        app:indicator_gravity="left"
        app:indicator_color="@color/colorRed"
        ></q.rorbin.verticaltablayout.VerticalTabLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_wechat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/wechat_title"
        android:layout_toRightOf="@id/vt_table"
        android:layout_marginBottom="70dp"
        ></androidx.recyclerview.widget.RecyclerView>

在之前TabLayout时，设置Tab的标题时，使用TabLayoutMedicator，在使用垂直TabLayout时，是通过TabAdapter设置。

public interface TabAdapter {
    int getCount();

    TabView.TabBadge getBadge(int position);

    TabView.TabIcon getIcon(int position);

    TabView.TabTitle getTitle(int position);

    int getBackground(int position);
}

public class WeChatTabAdapter implements TabAdapter {
    private final Context context;
    private final List<WechatBean.DataBean> data;

    public WeChatTabAdapter(Context context, List<WechatBean.DataBean> data){
        this.context = context;
        this.data =data;
    }
    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public ITabView.TabBadge getBadge(int position) {
        return null;
    }

    @Override
    public ITabView.TabIcon getIcon(int position) {
        return null;
    }

    @Override
    public ITabView.TabTitle getTitle(int position) {
        return new QTabView.TabTitle.Builder()
                .setContent(data.get(position).getName())
                .setTextSize(15)
                .build();
    }

    @Override
    public int getBackground(int position) {
        return R.color.colorDark;
    }
}

通过getTitle方法去设置Title。

然后用户通过点击Tab，来切换RecyclerView的内容；调用addOnTabSelectedListener，在点击Tab的时候，来获取数据，然后将数据设置RecyclerView界面。

 @Override
    public void showWeChatData(List<WechatBean.DataBean> data) {
        tabAdapter = new WeChatTabAdapter(getContext(),data);
        vt_table.setTabAdapter(tabAdapter);

        //设置监听
        vt_table.addOnTabSelectedListener(new TabSelectedListener(data));

    }

    private class TabSelectedListener implements VerticalTabLayout.OnTabSelectedListener {
        private final List<WechatBean.DataBean> data;

        public TabSelectedListener(List<WechatBean.DataBean> data) {
            this.data = data;
        }

        @Override
        public void onTabSelected(TabView tab, int position) {

            int id = data.get(position).getId();
            fPresenter.getWeChatById(id,1);
        }

        @Override
        public void onTabReselected(TabView tab, int position) {

        }
    }

但是这里出现一个问题，当我们刚进入公众号界面的时候，因为第一个Tab是默认选择的，内容并没有显示出来，但是在点击其他Tab，再切换到第一个Tab，内容就显示出来了，这个原因就是因为，我们在设置监听时addOnTabSelectedListener，当我们选择时，才会请求获取数据。

所以在加载布局的 时候，就需要获取哪个position被默认点击了，然后在设置数据的时候，就默认先加载数据。

selectedTabPosition = vt_table.getSelectedTabPosition();

//刚进去就设置数据
int id = data.get(selectedTabPosition).getId();
fPresenter.getWeChatById(id,1);

这样问题就解决了。

2、在某个公众号内搜索该公众号的内容

<androidx.appcompat.widget.SearchView
        android:id="@+id/sv_wechat"
        android:layout_width="250dp"
        android:layout_height="40dp"
        app:queryHint="请输入关键字"
        app:iconifiedByDefault="false"
        android:background="@drawable/project_bg"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:imeOptions="actionSearch"
        ></androidx.appcompat.widget.SearchView>

还是通过SearchView来实现

sv_wechat.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // request data
                mPresenter.getInfoByKey(id,1,query);
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });

在搜索框中，输入要查找的关键字，然后请求数据，跳转到查询结果的页面。

 @Override
    public void getSearchData(WeChatItemData.DataBean data) {
        Intent intent = new Intent();
        List<WeChatItemData.DataBean.DatasBean> datas = data.getDatas();
        intent.putExtra("data", (Serializable) datas);
        intent.setClass(WetChatSearchActivity.this,WetChatSearchInfoActivity.class);
        startActivity(intent);
    }

在“Android群英传”的公众号中，搜索“Android”关键字，然后显示查询结果。