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
网友评论