Android 6.0 仿支付宝主页UI实战案例

为了更好的熟练运用6.0相关UI控件，就打算做一个类似支付宝UI界面练练手，有啥不足的，欢迎大家来喷。

效果图如下：

正常情况下：

上滑行为触发AppBarLayout隐藏并且折叠为下：

旧版支付宝UI

UI分析

分析完了，开始码蛋。。。

Activity布局xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.test_design.MainActivity">    <android.support.design.widget.AppBarLayout        android:id="@+id/appBarLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <!--折叠空间-->        <!--contentScrim内容遮罩-->        <!--colorPrimary标题栏颜色-->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsingToolbarLayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:contentScrim="#1984D1"            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">            <!--parallax渐变-->            <!--四个操作-->            <include                layout="@layout/flex_head1"                android:layout_width="match_parent"                android:layout_height="100dp"                android:layout_marginTop="?attr/actionBarSize"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.5"/>            <!--Toolbar-->            <android.support.v7.widget.Toolbar                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:contentInsetStart="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>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>

MainActivity码

@BindView(R.id.img_zhangdan)    ImageView mImgZhangdan;    @BindView(R.id.img_zhangdan_txt)    TextView mImgZhangdanTxt;    @BindView(R.id.toolbar1)    View toolbar1;    @BindView(R.id.toolbar2)    View toolbar2;    @BindView(R.id.jiahao)    ImageView mJiahao;    @BindView(R.id.tongxunlu)    ImageView mTongxunlu;    @BindView(R.id.img_shaomiao)    ImageView mImgShaomiao;    @BindView(R.id.img_fukuang)    ImageView mImgFukuang;    @BindView(R.id.img_search)    ImageView mImgSearch;    @BindView(R.id.img_zhaoxiang)    ImageView mImgZhaoxiang;    @BindView(R.id.appBarLayout)    AppBarLayout mAppBarLayout;    @BindView(R.id.rv)    RecyclerView mRv;    @BindView(R.id.activity_main)    CoordinatorLayout mActivityMain;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        mRv.setLayoutManager(new LinearLayoutManager(this));        mRv.setAdapter(new MyAdapter());        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {//                System.out.println("verticalOffset = [" + verticalOffset + "]" + "{" + Math.abs(verticalOffset) + "}" + "{:" + appBarLayout.getTotalScrollRange() + "}");                if (verticalOffset == 0) {                    //完全展开                    toolbar1.setVisibility(View.VISIBLE);                    toolbar2.setVisibility(View.GONE);                    setToolbar1Alpha(255);                } else if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {                    //appBarLayout.getTotalScrollRange() == 200                    //完全折叠                    toolbar1.setVisibility(View.GONE);                    toolbar2.setVisibility(View.VISIBLE);                    setToolbar2Alpha(255);                } else {//0~200上滑下滑                    if (toolbar1.getVisibility() == View.VISIBLE) {//                        //操作Toolbar1                        int alpha = 300 - 155 - Math.abs(verticalOffset);                        Log.i("alpha:", alpha + "");                        setToolbar1Alpha(alpha);                    } else if (toolbar2.getVisibility() == View.VISIBLE) {                        if (Math.abs(verticalOffset) > 0 && Math.abs(verticalOffset) < 200) {                            toolbar1.setVisibility(View.VISIBLE);                            toolbar2.setVisibility(View.GONE);                            setToolbar1Alpha(255);                        }//                        //操作Toolbar2                        int alpha = (int) (255 * (Math.abs(verticalOffset) / 100f));                        setToolbar2Alpha(alpha);                    }                }            }        });    }    private void setToolbar1Alpha(int alpha) {        mImgZhangdan.getDrawable().setAlpha(alpha);        mImgZhangdanTxt.setTextColor(Color.argb(alpha, 255, 255, 255));        mTongxunlu.getDrawable().setAlpha(alpha);        mJiahao.getDrawable().setAlpha(alpha);    }    private void setToolbar2Alpha(int alpha) {        mImgShaomiao.getDrawable().setAlpha(alpha);        mImgFukuang.getDrawable().setAlpha(alpha);        mImgSearch.getDrawable().setAlpha(alpha);        mImgZhaoxiang.getDrawable().setAlpha(alpha);    }

flex_head1-XML

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="horizontal"              android:layout_width="match_parent"              android:layout_height="100dp"              android:layout_marginBottom="20dp"              android:layout_marginTop="20dp"              android:background="#1984D1">    <RelativeLayout        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:orientation="vertical">            <ImageView                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_gravity="center_horizontal"                android:src="@drawable/saoyisao"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textColor="#ffffff"                android:layout_gravity="center_horizontal"                android:layout_marginTop="5dp"                android:textSize="16sp"                android:text="扫一扫"/>        </LinearLayout>    </RelativeLayout>    <RelativeLayout        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:orientation="vertical">            <ImageView                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_gravity="center_horizontal"                android:src="@drawable/fukuang"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textColor="#ffffff"                android:layout_gravity="center_horizontal"                android:layout_marginTop="5dp"                android:textSize="16sp"                android:text="付款"/>        </LinearLayout>    </RelativeLayout>    <RelativeLayout        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:orientation="vertical">            <ImageView                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_gravity="center_horizontal"                android:src="@drawable/kajuan"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textColor="#ffffff"                android:layout_gravity="center_horizontal"                android:layout_marginTop="5dp"                android:textSize="16sp"                android:text="卡券"/>        </LinearLayout>    </RelativeLayout>    <RelativeLayout        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:orientation="vertical">            <ImageView                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_gravity="center_horizontal"                android:src="@drawable/xiuyixiu"/>            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textColor="#ffffff"                android:layout_gravity="center_horizontal"                android:layout_marginTop="5dp"                android:textSize="16sp"                android:text="咻一咻"/>        </LinearLayout>    </RelativeLayout></LinearLayout>

toolbar1-xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="#1984D1">    <ImageView        android:id="@+id/img_zhangdan"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_alignParentLeft="true"        android:layout_marginLeft="10dp"        android:src="@drawable/zhangdan" />    <TextView        android:id="@+id/img_zhangdan_txt"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_marginLeft="8dp"        android:textColor="#ffffff"        android:layout_toRightOf="@+id/img_zhangdan"        android:textSize="18sp"        android:text="账单" />    <ImageView        android:id="@+id/jiahao"        android:layout_width="20dp"        android:layout_height="20dp"        android:layout_centerVertical="true"        android:layout_alignParentRight="true"        android:layout_marginRight="10dp"        android:src="@drawable/jiahao"/>    <ImageView        android:id="@+id/tongxunlu"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_toLeftOf="@+id/jiahao"        android:layout_marginRight="10dp"        android:src="@drawable/tongxunlu"/></RelativeLayout>

toolbar2-xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="#1984D1">    <ImageView        android:id="@+id/img_shaomiao"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_alignParentLeft="true"        android:layout_marginLeft="20dp"        android:src="@drawable/zhangdan"/>    <ImageView        android:id="@+id/img_fukuang"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_toRightOf="@+id/img_shaomiao"        android:layout_marginLeft="20dp"        android:src="@drawable/fukuang"/>    <ImageView        android:id="@+id/img_search"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_toRightOf="@+id/img_fukuang"        android:layout_marginLeft="20dp"        android:src="@drawable/sousuo"/>    <ImageView        android:id="@+id/img_zhaoxiang"        android:layout_width="25dp"        android:layout_height="25dp"        android:layout_centerVertical="true"        android:layout_alignParentRight="true"        android:layout_marginRight="20dp"        android:src="@drawable/zhaoxiang"/></RelativeLayout>

实现效果

上滑伸缩head1 到顶切换toolbar
下滑切换toolbar

如果觉得我的文章对您有用，请点赞。您的支持将鼓励我继续码蛋！