android自定义控件Android开发Android开发经验谈

TabViewPager很好用

2017-10-19  本文已影响216人  大飛機

TabViewPager

项目地址:GitHub

项目中经常能用到这样的使用场景:

在顶部显示一个Header,接着是一个TabLayout,而每个Tab都对应一个RecyclerView,在向上滑动的时候,Header和TabLayout跟随RecyclerView滑动,但是TabLayout不能移出顶部。

咕~~(╯﹏╰)b,听起来很复杂,不知所云

对于这种效果,有两种解决方案:

方案一:Android提供的Design包

这种方案的效果如下:

对于这种效果,我们要怎么实现呢?
布局中大致是这样的结构

<CoordinatorLayout >
  <AppBarLayout>
    <CollapsingToolbarLayout>
      <Toolbar>
      </Toolbar>
    </CollapsingToolbarLayout>
  </AppBarLayout>
  <TabLayout>
  </TabLayout>
  <ViewPager>
  </ViewPager>
</CoordinatorLayout>

可以看到,布局很复杂,而且必须是Material Design风格,就国内这种环境,很多App应该Toolbar都是自己写的吧,更别说Material Design了,就个人而言,我不太喜欢这种显示方式,不够干脆利落。

方案二:自己控制Header移动

第二种方案是自己手动控制Header的移动,这样虽然布局逻辑简单了,但是必须自己手动去调整Header的位置,增加了代码的复杂性,于是乎,我就简单的封装了一个小小小小的库,让你用最简单的方式实现这种效果。

废话不多说,有图有真相:

怎么样,看起来是不是很简洁,那接下来老夫就讲讲怎么使用

首先,你需要在build.gradle中添加一条依赖:

compile 'com.goyourfly:tabviewpager:0.5'

接下来呢,在布局中添加TabViewPager

<com.goyourfly.tabviewpager.TabViewPager
        android:id="@+id/tabViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

最后呢,在代码中进行一下简单的配置

TabViewPager tabViewPager = findViewById(R.id.tabViewPager);
tabViewPager.setup(new String[]{"A", "B", "C"},//Tab数组
        View.inflate(this, R.layout.layout_header, null),// HeaderView
        true,// Header是否Parallax
        new Function2<RecyclerView, Integer, Unit>() {
            @Override
            public Unit invoke(RecyclerView recyclerView, Integer integer) {
                // 为每个Tab下的RecyclerView绑定LayoutManager
                recyclerView.setLayoutManager(new LinearLayoutManager(MainActivityJava.this));
                // 为每个Tab下的RecyclerView绑定Adapter
                recyclerView.setAdapter(new MyAdapter());
                return null;
            }
});

然后,然后就没有然后了😜,怎么样,是不是感觉很简单,如果觉得还阔以的话,麻烦给个Star,万一以后用的到呢,✧(≖ ◡ ≖✿)嘿嘿,谢谢啦,好了,不说了,我要打游戏去了~~~

Star地址:GitHub

上一篇 下一篇

猜你喜欢

热点阅读