Android学习笔记（八）--CoordinatorLayout的应用-仿支付宝界面

哈哈，差不多有一个礼拜没有更新，去广东那边旅游了四五天所以就没有更新，接下来就要恢复正常了，又要开始学习了。今天带来的是关于CoordinatorLayout的应用，模仿着支付宝做了一个界面，先看一下效果图吧。

实现了和支付宝一样的上滑收缩和变化的功能。核心使用的就是今天要说的coordinatorLayout。CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能：
1、作为顶层布局
2、调度协调子布局
就我的大白话来说就是协调子View之间动作的一个父View,通过Behavior来给子view实现交互的。
另外使用CoordinatorLayout需要在Gradle加入Support Design Library

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

然后先看一下主布局。

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.sp.coordinatortry.MainActivity">    <android.support.design.widget.AppBarLayout        android:id="@+id/app_bar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="@color/color1984D1"            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"            app:title=" ">            <include layout="@layout/shenghuo_head1"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="100dp"                android:layout_marginBottom="25dp"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.8"/>            <android.support.v7.widget.Toolbar                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:contentInsetLeft="0dp"                app:layout_collapseMode="pin">                <include android:id="@+id/toolbar1"                    layout="@layout/toolbar_head1"                    android:layout_width="match_parent"                    android:layout_height="match_parent"/>                <include android:id="@+id/toolbar2"                    layout="@layout/toolbar_head2"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:visibility="gone"/>            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_scrolling"/></android.support.design.widget.CoordinatorLayout>

shenghuo_head1和head2分别是如下

就不放具体代码了，可以自己自由的来实现，也不用非要拘泥于支付宝的样子。
然后是toolbar_head1和head2.分别是拖拉前后的样子。

然后content_scrolling就是一个简单的recyclerView，itemlayout则是一个CardView嵌套了一个TextView。
先放一下这个RecyclerView的Adapter。

package com.sp.coordinatortry;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * Created by Jack on 2016/9/16. */public class ToolbarAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{    private Context context;    public ToolbarAdapter(Context context){        this.context=context;    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        if(viewType==0){           return new ItemView(LayoutInflater.from(context).inflate(R.layout.shenghuo_head2,null));        }else{           return new ItemView(LayoutInflater.from(context).inflate(R.layout.layout_item,parent,false));        }    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {    }    @Override    public int getItemCount() {        return 50;    }    @Override    public int getItemViewType(int position) {        if(position==0){            return 0;        }else{            return 1;        }    }    class ItemView extends RecyclerView.ViewHolder{        public ItemView(View itemView) {            super(itemView);        }    }}

都很清晰简单，也不多说了。整个实现过程中最关键的就是在activity中的实现。先来介绍一下OnOffsetChangedListener。这个方法在AppBarLayout的布局偏移量发生改变时被调用。这个方法允许子view根据偏移量实现自定义的行为（比如在特定的时候更改View）。

      mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                if (verticalOffset == 0){                    //张开                    mToolbar1.setVisibility(View.VISIBLE);                    mToolbar2.setVisibility(View.GONE);                    setToolbar1Alpha(255);                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {                    //收缩                    mToolbar1.setVisibility(View.GONE);                    mToolbar2.setVisibility(View.VISIBLE);                    setToolbar2Alpha(255);                } else {                    int alpha=255-Math.abs(verticalOffset)-150;                    if(alpha<=0){                        //收缩toolbar                        mToolbar1.setVisibility(View.GONE);                        mToolbar2.setVisibility(View.VISIBLE);                        setToolbar2Alpha(Math.abs(verticalOffset));                    }else{                        //张开toolbar                        mToolbar1.setVisibility(View.VISIBLE);                        mToolbar2.setVisibility(View.GONE);                        setToolbar1Alpha(alpha);                    }                }            }        });

该activity中的应用如上。核心就设置AppBarLayout 的监听器addOnOffsetChangedListener来进行效果的处理。当verticalOffset=0的时候即使整个展开的是时候要做的就是显示要显示的，隐藏要隐藏的设置，在设置透明度，同理当verticalOffset等于appBarLayout.getTotalScrollRange()即等于最大值的时候，就是关闭的时候，处理的展开相反。当他在中间值的时候，通过`int alpha=255-Math.abs(verticalOffset);得到要设置的透明度。当alpha小于0的时候是执行展开的toolbar的透明度效果，反之大于0的时候是闭合时toolbar的透明图效果。
然后看一下完整的代码。

package com.sp.coordinatortry;import android.graphics.Color;import android.support.design.widget.AppBarLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends AppCompatActivity {    private AppBarLayout mAppBarLayout=null;    private View mToolbar1=null;    private View mToolbar2=null;    private ImageView mZhangdan=null;    private TextView mZhangdan_txt=null;    private ImageView mTongxunlu=null;    private ImageView mJiahao=null;    private ImageView mZhangdan2=null;    private ImageView mShaoyishao=null;    private ImageView mSearch=null;    private ImageView mZhaoxiang=null;    private RecyclerView myRecyclerView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        myRecyclerView=(RecyclerView)findViewById(R.id.myRecyclerView);        myRecyclerView.setLayoutManager(new LinearLayoutManager(this));        myRecyclerView.setAdapter(new ToolbarAdapter(this));        mAppBarLayout=(AppBarLayout)findViewById(R.id.app_bar);        mToolbar1=(View)findViewById(R.id.toolbar1);        mToolbar2=(View)findViewById(R.id.toolbar2);        mZhangdan=(ImageView)findViewById(R.id.img_zhangdan);        mZhangdan_txt=(TextView)findViewById(R.id.img_zhangdan_txt);        mTongxunlu=(ImageView)findViewById(R.id.tongxunlu);        mJiahao=(ImageView)findViewById(R.id.jiahao);        mZhangdan2=(ImageView)findViewById(R.id.img_shaomiao);        mShaoyishao=(ImageView)findViewById(R.id.img_fukuang);        mSearch=(ImageView)findViewById(R.id.img_search);        mZhaoxiang=(ImageView)findViewById(R.id.img_zhaoxiang);        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                if (verticalOffset == 0){                    //张开                    mToolbar1.setVisibility(View.VISIBLE);                    mToolbar2.setVisibility(View.GONE);                    setToolbar1Alpha(255);                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {                    //收缩                    mToolbar1.setVisibility(View.GONE);                    mToolbar2.setVisibility(View.VISIBLE);                    setToolbar2Alpha(255);                } else {                    int alpha=255-Math.abs(verticalOffset);                    if(alpha<=0){                        //收缩toolbar                        mToolbar1.setVisibility(View.GONE);                        mToolbar2.setVisibility(View.VISIBLE);                        setToolbar2Alpha(Math.abs(verticalOffset));                    }else{                        //张开toolbar                        mToolbar1.setVisibility(View.VISIBLE);                        mToolbar2.setVisibility(View.GONE);                        setToolbar1Alpha(alpha);                    }                }            }        });    }    //设置展开时各控件的透明度    public void setToolbar1Alpha(int alpha){        mZhangdan.getDrawable().setAlpha(alpha);        mZhangdan_txt.setTextColor(Color.argb(alpha, 255, 255, 255));        mTongxunlu.getDrawable().setAlpha(alpha);        mJiahao.getDrawable().setAlpha(alpha);    }    //设置闭合时各控件的透明度    public void setToolbar2Alpha(int alpha){        mZhangdan2.getDrawable().setAlpha(alpha);        mShaoyishao.getDrawable().setAlpha(alpha);        mSearch.getDrawable().setAlpha(alpha);        mZhaoxiang.getDrawable().setAlpha(alpha);    }}

到此就基本实现了。上面代码参考了一些他人的博客，导致自己对appbarlayout和CoordinatorLayout的应用还不是很深入，还要继续学习啊。