Material Design-CoordinatorLayou

1、概念

• 将经典的设计原则和科技、创新相结合而创造的设计语言，是一个能在不同平台、不同设备上提供一致的体验的底层系统，它代表了一种设计规范

2、Material Design案例

2.1、AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView实现支付宝首页效果

AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView实现滑动吸顶效果，在加上对布局控件颜色的渐变，实现支付宝首页的效果
布局文件：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            android:layout_height="150dp">
            <LinearLayout
                android:orientation="vertical"

                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <include
                    layout="@layout/layout_two"
                    />
                <include
                    layout="@layout/layout_three"
                    />
            </LinearLayout>


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:layout_height="50dp">
                <include
                    layout="@layout/layout_one"
                    />

            </android.support.v7.widget.Toolbar>


        </android.support.design.widget.CollapsingToolbarLayout>



    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="never"
            android:scrollbars="none" />
    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

核心代码：

package com.example.alihomepage;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.design.widget.AppBarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {
    private AppBarLayout appBar;
    private LinearLayout llTwo;
    private LinearLayout llThree;
    private LinearLayout llOne;
    private Toolbar toolbar;
    private ImageView ivSan;
    private TextView tvScan;
    private ImageView ivPay;
    private TextView tvPay;
    private ImageView ivCharge;
    private TextView tvCharge;
    private ImageView ivCard;
    private TextView tvCard;
    private ImageView ivOne;
    private ImageView ivTwo;
    private ImageView ivThree;
    private ImageView ivFour;
    private ImageView ivFive;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        appBar = (AppBarLayout) findViewById(R.id.appBar);
        appBar.addOnOffsetChangedListener(this);
        llTwo = (LinearLayout) findViewById(R.id.ll_two);
        llThree = (LinearLayout) findViewById(R.id.ll_three);
        llOne = (LinearLayout) findViewById(R.id.ll_one);
        ivSan = (ImageView) findViewById(R.id.iv_san);
        tvScan = (TextView) findViewById(R.id.tv_scan);
        ivPay = (ImageView) findViewById(R.id.iv_pay);
        tvPay = (TextView) findViewById(R.id.tv_pay);
        ivCharge = (ImageView) findViewById(R.id.iv_charge);
        tvCharge = (TextView) findViewById(R.id.tv_charge);
        ivCard = (ImageView) findViewById(R.id.iv_card);
        tvCard = (TextView) findViewById(R.id.tv_card);
        ivOne = (ImageView) findViewById(R.id.iv_one);
        ivTwo = (ImageView) findViewById(R.id.iv_two);
        ivThree = (ImageView) findViewById(R.id.iv_three);
        ivFour = (ImageView) findViewById(R.id.iv_four);
        ivFive = (ImageView) findViewById(R.id.iv_five);

    }

    //AppBarLayout的监听方法
    @RequiresApi(api = Build.VERSION_CODES.O)
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        Log.d("aaa", "verticalOffset=" + verticalOffset);
        //720*1080手机 verticalOffset取值范围[0-200]px
        float absVerticalOffset = Math.abs(verticalOffset);//AppBarLayout竖直方向偏移距离px
        float totalScrollRange = appBarLayout.getTotalScrollRange();//AppBarLayout总的距离px
        Log.e("MainActivity", "absVerticalOffset =  "+absVerticalOffset+":"+"totalScrollRange = "+totalScrollRange );
        //滑动超出了一半
        if(absVerticalOffset>=(totalScrollRange/10)){
            llOne.setVisibility(View.VISIBLE);
            llTwo.setVisibility(View.INVISIBLE);
        }
        else{
            llOne.setVisibility(View.INVISIBLE);
            llTwo.setVisibility(View.VISIBLE);
        }
        float px = absVerticalOffset/totalScrollRange;

        //设置渐变

        int argb = changeAlpha(getResources().getColor(R.color.white),1-px);

        ivSan.setAlpha(1-px);
        tvScan.setTextColor(argb);

        ivPay.setAlpha(1-px);
        tvPay.setTextColor(argb);

        ivCharge.setAlpha(1-px);
        tvCharge.setTextColor(argb);

        ivCard.setAlpha(1-px);
        tvCard.setTextColor(argb);


        ivOne.setAlpha(px);
        ivTwo.setAlpha(px);
        ivThree.setAlpha(px);
        ivFour.setAlpha(px);
        ivFive.setAlpha(px);

    }

    /** 根据百分比改变颜色透明度 */
    public int changeAlpha(int color, float fraction) {
        Log.e("MainActivity", "fraction: "+fraction );
        int red = Color.red(color);
        int green = Color.green(color);
        int blue = Color.blue(color);
        int alpha = (int) (Color.alpha(color) * fraction);
        return Color.argb(alpha, red, green, blue);
    }


}

效果：

cf39c2f71fa64cfce380ec9fdc089d47.gif

源码传送门：
https://gitee.com/daxiaa/AlipayHomePage.git