Material Design

Google在2014年的I/O大会上提出了Material Design，Material Design是Google设计师为了统一Android的风格设计的一整套完整的界面设计语言，包含了视觉、运动、互动效果等特性。

在标题栏上显示图标：Toolbar

1、更改主题：

name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"

2、定义显示的菜单：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/backup"        android:icon="@mipmap/ic_backup"        android:title="Backup"        app:showAsAction="always"/>    <item        android:id="@+id/delete"        android:icon="@mipmap/ic_delete"        android:title="Delete"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/settings"        android:icon="@mipmap/ic_settings"        android:title="Settings"        app:showAsAction="never"/></menu>

3、定义布局文件：

<android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="@color/colorPrimary"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" <--设置Toolbar单独使用深色系，上面的字体不使用深色系-->    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"         <--设置弹出菜单是浅色系-->    app:layout_scrollFlags="scroll|enterAlways|snap"/>

4、使用

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);setSupportActionBar(toolbar);@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.toolbar, menu);    return true;}

滑动菜单：DrawerLayout

允许在该布局中放入两个直接子布局

一个是主屏幕显示的布局，另一个是滑动时显示的布局

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    >......

使用

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);ActionBar actionBar = getSupportActionBar();if (actionBar != null) {    actionBar.setDisplayHomeAsUpEnabled(true);    actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu);}

滑动

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()) {        case android.R.id.home:            drawerLayout.openDrawer(GravityCompat.START);            break;    }    return true;}

使用NavigationView丰富滑动之后的页面

加入依赖

compile 'com.android.support:design:24.2.1'compile 'de.hdodenhof:circleimageview:2.1.0'

设置NavigationView的头布局和具体菜单：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_call"            android:icon="@mipmap/nav_call"            android:title="Call" />        ......    </group></menu>

使用CircleImageView可以设置显示的图片更加圆形化

...    <de.hdodenhof.circleimageview.CircleImageView        android:id="@+id/icon_image"        android:layout_width="70dp"        android:layout_height="70dp"        android:layout_centerInParent="true"        android:src="@mipmap/nav_icon" />    ...

设置NavigationView组件：

......<android.support.design.widget.NavigationView    android:id="@+id/nav_view"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity = "start"    app:menu="@menu/nav_menu"    app:headerLayout="@layout/nav_header">......

使用NavigationView组件：

navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setCheckedItem(R.id.nav_call);navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        return true;    }});

悬浮按钮FloatingActionButton：

<android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="bottom|end"    android:layout_margin="16dp"    android:src="@mipmap/ic_done"/>

使用

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

可交互提示Snackbar:

fab.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {        Snackbar.make(v, "Data deleted", Snackbar.LENGTH_SHORT)                .setAction("Uudo", new View.OnClickListener() {                    @Override                    public void onClick(View v) {                        Toast.makeText(MainActivity.this, "Cancle", Toast.LENGTH_SHORT).show();                    }                }).show();    }});

加强版的FrameLayout——CoordinatorLayout：

监听所有的子控件，从而做出更加合理的响应。

卡片式布局：CardView，设置显示的布局顶角的弧度

添加依赖：

compile 'com.android.support:cardview-v7:24.2.1'

使用

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_margin="5dp"    app:cardCornerRadius="4dp">    <LinearLayout       ……       <ImageView    android:id="@+id/fruit_image"    android:layout_width="match_parent"    android:layout_height="100dp"    android:scaleType="centerCrop" />   <-- 为了使长宽不一致的图片填充整个 ImageView-->       ...    </LinearLayout></android.support.v7.widget.CardView>

AppBarLayout

实现向上滚动遮挡Toolbar，向下滚动显示Toolbar
将Toolbar嵌套到AppBarLayout中：

<android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="wrap_content">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="@color/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        app:layout_scrollFlags="scroll|enterAlways|snap"/></android.support.design.widget.AppBarLayout>

设置需要显示的组件的行为：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

下拉刷新SwipeRefreshLayout：

需要注意的API:

1. setOnRefreshListener(OnRefreshListener listener) 设置下拉监听，当用户下拉的时候会去执行回调
2. setColorSchemeColors(int... colors) 设置进度条的颜色变化，最多可以设置4种颜色
3. setProgressViewOffset(boolean scale, int start, int end) 调整进度条距离屏幕顶部的距离
4. setRefreshing(boolean refreshing) 设置SwipeRefreshLayout当前是否处于刷新状态，一般是在请求数据的时候设置为true，在数据被加载到View中后，设置为false。

使用SwipeRefreshLayout组件包裹需要下拉刷新的组件：

<android.support.v4.widget.SwipeRefreshLayout    android:id="@+id/swip_refresh"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior">    <android.support.v7.widget.RecyclerView        android:id="@+id/recycle_view"        android:layout_width="match_parent"        android:layout_height="match_parent"/></android.support.v4.widget.SwipeRefreshLayout>

使用

swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {    @Override    public void onRefresh() {        refreshFruit();    }});

可折叠式标题栏collapsingtoolbarlayout:

向上滑动的时候逐渐折叠标题栏，向下滑动的时候显示标题栏
只能用作AppBarLayout的子布局使用

<android.support.design.widget.AppBarLayout    android:id="@+id/appBar"    android:layout_width="match_parent"    android:layout_height="250dp"    android:fitsSystemWindows="true">    <android.support.design.widget.CollapsingToolbarLayout        android:id="@+id/collapsing_toolbar"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        android:fitsSystemWindows="true"        app:contentScrim="?attr/colorPrimary"        app:layout_scrollFlags="scroll|exitUntilCollapsed">  <--设置滚动效果以及滚动完成之后显示的效果-->        <ImageView            ...            app:layout_collapseMode="parallax" />            <--在折叠过程中产生错位偏移-->        <android.support.v7.widget.Toolbar            ...            app:layout_collapseMode="pin" />                  <--在折叠过程中保持不变-->    </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>

被滚动的数据

<android.support.v4.widget.NestedScrollView    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior">    <LinearLayout        ...    </LinearLayout></android.support.v4.widget.NestedScrollView>

使状态栏和背景图融合

将布局控件的属性进行设置即可：

android:fitsSystemWindows="true"