Android仿微博发现页面效果-技术圈

前一段时间公司有个需求，就是要实现成微博客户端发现模块的效果，先放一个效果图看一下吧。

录制的不是太好，大家见谅（可以打开微博看一下效果），大概这个效果就是，在ViewPager之上，有一个可伸缩的头部，在头部完全隐藏的时候，使其不可下拉，点击返回键之后，再显示出头部来。

分析

微博的效果给人的感觉是整个页面在头部隐藏之后，会抖动一下，就像是新开了一个页面一样。当时第一反应就是，这个东西可以利用CoordinatorLayout+AppBarLayout来实现这个功能。

说干就干……开始吧……

过程

提到CoordinatorLayout，想必大部分朋友是知道的，这里我再啰嗦点叙述一遍吧，CoordinatorLayout是Google伴随着Material Design推出的一个可自定义布局伸缩的控件。常见的有知乎App的效果：当内容滑动时，顶部的ActionBar随之隐藏。

当然还有一些比较不错的效果，比如一些转换的效果，网上一大堆，这里就不再叙述了。

本文中使用的另外一个“主角”，就是AppBarLayout了。

我在这里直接介绍AppBarLayout的 app:layout_scrollFlags 属性吧，这个属性是加在AppBarLayout的子View上的，有以下几种flag：

scroll：增加了这个flag之后，View会伴随着滚动滑出屏幕。
enterAlways：这个flag就是，当你的View已经隐藏的时候，例如向上滚动顶部的View已经不可见了，设置了这个属性之后，当你向下滚动的时候，View会随着掉下来，而不是说滚动到顶部之后才能拉下来隐藏的View。
exitUntilCollapsed：这个flag就是当你为View定义了一个最小值之后，View之后收缩到最小值大小，例如你设置了一个5dp的高度，那么当View滑动到只有5dp那么高的时候，便不再收缩了。
enterAlwaysCollapsed：与上面的flag对立，表示何时以最小值进入。
snap：说起这个flag就很有意思了，这一套东西，其实为的就是解决嵌套滑动的问题，而这其中有一个bug，那就是滑动极其不顺畅。当你向上滑动想要隐藏顶部的AppBarLayout的时候，可能会遇到一次滑不上去，过程十分卡顿。当你向下滑动想要拉出顶部的AppBarLayout的时候，有的时候又要用特别大的力气，这个flag算上Google的一个弥补吧。那就是，当你滑动到50%左右的时候，帮你隐藏显示，这样看上去效果是流畅了，却又变得怪怪的了。

具体效果大家自己写一遍就可以看到了，也不难。

关于AppBarLayout伸缩卡顿的问题，我是通过判断RecyclerView是否滑动到顶部来解决的。

OK，简单的了解完了我们要使用的两个控件，下面就是代码部分：

首先是布局：

<!-- 最外层是支持嵌套滑动的CoordinatorLayout --><android.support.design.widget.CoordinatorLayout      android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/transparent"       android:orientation="vertical">     
   <android.support.design.widget.AppBarLayout                android:id="@+id/appbar"                android:theme="@style/MainAppBar"              android:background="@color/colorPrimaryDark"          android:layout_width="match_parent"           android:layout_height="wrap_content">
        <!-- app:layout_scrollFlags="scroll|exitUntilCollapsed"             设置当前view随滚动伸缩 -->              <LinearLayout                             android:id="@+id/ll_header_layout"                  android:orientation="vertical"                         app:layout_scrollFlags="scroll|exitUntilCollapsed"                  android:layout_width="match_parent"                 android:layout_height="@dimen/header_height"                      android:background="@color/colorPrimaryDark" />   
       </android.support.design.widget.AppBarLayout> 
       <!-- 这个viewpager则是触发滚动的view，每一项可以设置为recyclerview的fragment，别忘了要加这段话：app:layout_behavior="@string/appbar_scrolling_view_behavior" -->       <android.support.v4.view.ViewPager               android:id="@+id/viewpager"                  android:layout_width="match_parent"                android:layout_height="wrap_content"             app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

在尺寸的资源文件里面加上 header layout 的高度。

<dimen name="header_height">300dp</dimen>

上面就是主布局的代码，写在 activity_maim.xml 下。

别忘了还要添加support design的包的依赖，版本号根据自己当前的build版本号自行修改就好了。

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

ok，那我们先为ViewPager填充上数据吧，在填充数据之前，先写一个公用的Fragment和Fragment下列表的item，这里我也是先把样式贴出来，很简单。

Fragment的样式文件：

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.RecyclerView    xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/rv_list"   android:layout_height="match_parent"  android:layout_width="match_parent" />

写在 fragment_main_tab.xml 下。

list的item的样式文件：

<?xml version="1.0" encoding="utf-8"?><TextView   xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/tv_test"   android:orientation="vertical"   android:layout_width="match_parent"  android:layout_height="wrap_content"  android:padding="10dp"  android:text="测试数据"/>

写在 item_tv_test.xml 下。

代码

MainActivity的代码：

public class MainActivity extends AppCompatActivity {   
   //fragment的适配器   private MainTabFragmentAdapter mainTabFragmentAdapter;   //viewpager    private ViewPager mViewPager;    //AppBarLayout   private AppBarLayout mAppBarLayout;    //顶部HeaderLayout   private LinearLayout headerLayout;   //是否隐藏了头部   private boolean isHideHeaderLayout = false;
   @Override   protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);           setContentView(R.layout.activity_main);        init();   }
   //初始化方法   private void init(){       mainTabFragmentAdapter = new MainTabFragmentAdapter(getSupportFragmentManager(),this);        mViewPager = (ViewPager) findViewById(R.id.viewpager);           mViewPager.setAdapter(mainTabFragmentAdapter);            mViewPager.setOffscreenPageLimit(mainTabFragmentAdapter.getCount());         headerLayout = (LinearLayout) findViewById(R.id.ll_header_layout);       initAppBarLayout();   }
   // 初始化AppBarLayout   private void initAppBarLayout(){        //header layout height       final int headerHeight = getResources().getDimensionPixelOffset(R.dimen.header_height);        mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar);             mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {             @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                verticalOffset = Math.abs(verticalOffset);                if ( verticalOffset >= headerHeight ){                      isHideHeaderLayout = true;                     //当偏移量超过顶部layout的高度时，我们认为他已经完全移动出屏幕了                                   new Handler().postDelayed(new Runnable() {                        @Override                        public void run() {                                 AppBarLayout.LayoutParams mParams = (AppBarLayout.LayoutParams) headerLayout.getLayoutParams();                           mParams.setScrollFlags(0);                                headerLayout.setLayoutParams(mParams);                                 headerLayout.setVisibility(View.GONE);                           }                        },100);                 }             }       });    }
    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if ( keyCode == KeyEvent.KEYCODE_BACK ){          //监听返回键           if ( isHideHeaderLayout ){              isHideHeaderLayout = false;               /*微博的效果是，点击返回键拉出上面隐藏的view，并同时让list滚动到最顶部，                我这里只给第一个fragment的RecyclerView增加了跳到第0个位置的操作，这里大家可以自行去编写逻辑                 */                ((MainTabFragment)mainTabFragmentAdapter.getFragments().get(0)).getRvList().scrollToPosition(0);                  headerLayout.setVisibility(View.VISIBLE);   
              new Handler().postDelayed(new Runnable() {                    @Override                                  public void run() {                                        AppBarLayout.LayoutParams mParams = (AppBarLayout.LayoutParams) headerLayout.getLayoutParams();                     mParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL|                            AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);                     headerLayout.setLayoutParams(mParams);                    }               },300);           }else {            //如果不需要拉出顶部的header，直接关闭当前的界面           finish();            }        return true;       }        return super.onKeyDown(keyCode, event);}    }}

MainTabFragmentAdapter的代码：

public class MainTabFragmentAdapter extends FragmentStatePagerAdapter {  
    public ArrayList<Fragment> fragments;     public Context mContext;     private String[] titles;
    public MainTabFragmentAdapter(FragmentManager fm,Context context) {        super(fm);        mContext = context;        initFragments();    }    
    public ArrayList<Fragment> getFragments() {        return fragments;    }    
    @Override    public Fragment getItem(int position) {        return fragments.get(position);    } 
   @Override    public int getCount() {       return fragments.size();   }   
   private void initFragments() {        titles = new String[]{                 mContext.getResources().getString(R.string.test_1),               mContext.getResources().getString(R.string.test_2),                          mContext.getResources().getString(R.string.test_3),                   mContext.getResources().getString(R.string.test_4),          };    
      fragments = new ArrayList<>();  
      for ( int i=0; i < titles.length; i++ ){            Fragment fragment = MainTabFragment.newInstance();            fragments.add(fragment);        }    }   
  @Override    public CharSequence getPageTitle(int position) {          return titles[position];    }}

MainTabFragment的代码：

public class MainTabFragment extends Fragment { 
  public static MainTabFragment newInstance() {        return new MainTabFragment();   }    
  private RecyclerView mRvList;    private View rootView;     private TestRvAdapter adapter; 
  @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        rootView = inflater.inflate(R.layout.fragment_main_tab,container,false);         initWidget();       return rootView;    }    
  public void initWidget(){        adapter = new TestRvAdapter(getActivity());         mRvList = (RecyclerView) rootView.findViewById(R.id.rv_list);       mRvList.setLayoutManager(new LinearLayoutManager(getActivity()));           mRvList.setAdapter(adapter);   } 
  public RecyclerView getRvList(){        return mRvList;  }}

TestRvAdapter的代码：

public class TestRvAdapter extends RecyclerView.Adapter<TestRvAdapter.TestViewHolder> {  
   private Context context; 
   public TestRvAdapter(Context context){        this.context = context;   }    
   @Override   public TestViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(context).inflate(R.layout.item_tv_test,parent,false);              return new TestViewHolder(view);     }   
   @Override     public void onBindViewHolder(TestViewHolder holder, int position) {               holder.tv_test.setText("测试数据" + position);   } 
   @Override   public int getItemCount() {          return 100;   }
   class TestViewHolder extends RecyclerView.ViewHolder {         TextView tv_test;          TestViewHolder(View itemView) {             super(itemView);              tv_test = (TextView) itemView.findViewById(R.id.tv_test);        }    }}

代码都很简单，就是在viewpager上增加了四个fragment，每个fragment下都有一个RecyclerView。CoordinatorLayout的嵌套滑动只有实现了NestedScrollingChild才能响应滑动，而RecyclerView本身就实现了，所以这里我们使用RecyclerView。

如果要使用ListView的话，需要在外层包裹一个NestedScrollView。

我们来看一下上面这些代码所实现的效果:

可以看到，当头部完全隐藏之后，再下拉是拉不出的。当我们点击返回键之后，顶部推出，并可以继续响应滑动。

其中关键代码如下：

AppBarLayout.LayoutParams mParams = (AppBarLayout.LayoutParams) headerLayout.getLayoutParams();mParams.setScrollFlags(0);     headerLayout.setLayoutParams(mParams);

这个就是在代码中把 app:layout_scrollFlags 的属性取消，这样AppBarLayout下的View无法响应滑动了，也就没有办法拉下来了。

而当点击了返回键之后：

AppBarLayout.LayoutParams mParams = (AppBarLayout.LayoutParams) headerLayout.getLayoutParams();mParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL|AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);headerLayout.setLayoutParams(mParams);

我们再把这个属性重新赋值给headerLayout即可。

不过仔细观察可以发现，在header推出的时候，是直接蹦出来的，而不是推出来的，这样，我们再给他增加一个显示的动画，并顺便把上方的Tab添加上。

先增加推出的动画效果：

LayoutTransition mTransition = new LayoutTransition();/** * 添加View时过渡动画效果 */ObjectAnimator addAnimator = ObjectAnimator.ofFloat(null, "translationY", 0, 1.f).        setDuration(mTransition.getDuration(LayoutTransition.APPEARING));mTransition.setAnimator(LayoutTransition.APPEARING, addAnimator);mAppBarLayout.setLayoutTransition(mTransition);

我们给AppBarLayout set 一个 LayoutTransition ，这样当他的子布局发生变化的时候，会有一个比较不错的过渡效果。

ViewPager的指示Tab这里我用的是SmartTabLayout这个开源控件，其实Google也提供了控件可以使用，但是没有这个可定制性更高一点。

先加入开源库的引用：

compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'

然后在HeaderLayout，也就是我们的AppBarLayout下面可伸缩的Layout下面，增加一个SmartTabLayout:

<com.ogaclejapan.smarttablayout.SmartTabLayout        android:id="@+id/tabs"      android:layout_width="match_parent"     android:layout_height="35dp"        android:background="@android:color/white"    app:layout_scrollFlags="scroll"        app:stl_customTabTextLayoutId="@layout/custom_tab"      app:stl_customTabTextViewId="@+id/custom_text"        app:stl_distributeEvenly="true"        app:stl_dividerColor="@color/colorPrimary"        app:stl_dividerThickness="0dp"        app:stl_indicatorColor="@color/colorPrimary"        app:stl_indicatorCornerRadius="0dp"       app:stl_indicatorGravity="bottom"        app:stl_indicatorInterpolation="linear"        app:stl_indicatorThickness="2.5dp"        app:stl_indicatorWithoutPadding="true"      app:stl_underlineColor="@android:color/transparent"      app:stl_underlineThickness="0dp" />

这里还用到了一个custom_tab的自定义样式：

<?xml version="1.0" encoding="utf-8"?><TextView    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/custom_text"    android:layout_width="wrap_content"    android:layout_height="match_parent"  android:background="?attr/selectableItemBackground"    android:gravity="center"  android:textColor="@color/colorPrimary"    android:textSize="14sp"/>

我们在代码上再加上这个TabLayout：

private SmartTabLayout mTabs;mTabs = (SmartTabLayout) findViewById(R.id.tabs);mTabs.setViewPager(mViewPager);

使用起来也是非常的简单，只要关联一下ViewPager就好了。

现在，我们来看下最终的效果：

这样头部伸缩的View隐藏显示的时候，就不会那么生硬了。

源码地址：

https://github.com/felix1022224/adjustablelayout

到这里就结束啦。