目录

​​一: 什么是Material Design​​

​​二:Toolbar​​

​​三 :滑动菜单​​

​​3.1 DrawerLayout​​

​​3.2 NavigationView​​

​​四 悬浮按钮和可交互提示​​

​​4.1 FloatingActionButton​​

​​4.2 SnackBar​​

​​4.3 CoordinatorLayout​​

​​五:卡片式布局​​

​​5.1 CardView​​

​​5.2 AppBarLayout​​

​​六:下拉刷新​​

​​七:可折叠式标题栏​​

​​7.1 CollapsingToolbarLayout​​

​​7.2 充分利系统状态栏空间​​


一: 什么是Material Design

        Material Design是由谷歌的设计工程师基于优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,包含了视觉、运动、互动效果等特性。

二:Toolbar

         虽然对于Toolbar你暂时应该还是比较陌生的,但是对于ActionBar,你就应该有点熟悉了,由于其设计的原因,被限定只能位于活动的顶部,从而不能实现一些 Material Design 的效果,因此官方已不建议使用 ActionBar 了,而推荐使用 Toolbar。

首先修改默认主题,隐藏ActionBar:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>

修改布局文件:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</FrameLayout>

接下来修改活动中的代码如下:

public class MaterialDesignActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_material_design);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);// 将 Toolbar 的实例传入
}
}

如此即可。

接下来添加一些action按钮,右击 res 目录→New→Directory,创建一个 menu 文件夹。然后右击 menu 文件夹→New→Menu resource file,创建一个toolbar.xml 文件

<?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/backup"
android:title="Backup"
app:showAsAction="always"
/>
<!--屏幕空间足够显示-->
<item
android:id="@+id/delete"
android:icon="@mipmap/delete"
android:title="Delete"
app:showAsAction="ifRoom"
/>
<!--永远显示在(菜单)中-->
<item
android:id="@+id/settings"
android:icon="@mipmap/settings"
android:title="Settings"
app:showAsAction="never"
/>
</menu>

在活动页面添加相关操作

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "Backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;
}

return true;
}

三 :滑动菜单

       滑动菜单可以说是Material Design中最常见的效果之一了,虽说这个功能看起来挺复杂的,不过借助谷歌提供的各种工具,我们可以轻松的实现这个炫酷的功能了。

3.1 DrawerLayout

借助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">

<!--********** 第一个子控件 主屏幕显示 ***********-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</FrameLayout>

<!--********** 第二个子控件 滑动菜单显示 **********-->
<!-- 注意:属性 android:layout_gravity 是必须指定的 -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="这是滑动菜单"
android:background="#fff"/>

</android.support.v4.widget.DrawerLayout>

接下来在导航栏上添加左侧按钮:

void initActionBar() {
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.mipmap.menu);
}
}

对于侧滑菜单做一些处理:

在按返回键时:

@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}

在按导航键时:  

case android.R.id.home:
drawerLayout.openDrawer(GravityCompat.START);
break;

3.2 NavigationView

       使用 NavigationView,在滑动菜单页面定制任意布局,首先,将 Design Support 库以及开源项目 CircleImageView(实现图片圆形化,项目主页地址:​​https://github.com/hdodenhof/CircleImageView​​ )引入到项目中:

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

        在使用 NavigationView 之前,还需要准备两个东西:在 NavigationView 中用来显示具体菜单项的 menu 和显示头部布局的 headerLayout。

(1)准备 menu。在 menu 文件夹下创建一个 nav_menu.xml 文件,编写代码如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<!--checkableBehavior指定为single表示组中的所有菜单项只能单选 -->
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@mipmap/call"
android:title="Call"/>
<item
android:id="@+id/nav_friends"
android:icon="@mipmap/friends"
android:title="Friends"/>
<item
android:id="@+id/nav_location"
android:icon="@mipmap/location"
android:title="Location"/>
<item
android:id="@+id/nav_mail"
android:icon="@mipmap/mail"
android:title="Mail"/>
<item
android:id="@+id/nav_task"
android:icon="@mipmap/task"
android:title="Task"/>
</group>
</menu>

(2)准备 headerLayout。在 layout 文件夹下创建一个布局文件 nav_header.xml,编写代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary">

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

<!--*************** 邮箱 ****************-->
<TextView
android:id="@+id/mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="KXwonderful@gmail.com"
android:textColor="@color/white"
android:textSize="14sp"/>

<!--*************** 用户名 ****************-->
<TextView
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/mail"
android:gravity="center"
android:text="开心wonderful"
android:textColor="@color/white"
android:textSize="14sp"/>

</RelativeLayout>

准备好 menu 和 headerLayout 后,可以使用 NavigationView 了,修改布局代码,将之前的 TextView 替换成 NavigationView,如下:

<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">

<!--******** 第一个子控件 主屏幕显示 ********-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</FrameLayout>

<!--******** 第二个子控件 滑动菜单显示 ********-->
<!-- 注意:属性 android:layout_gravity 是必须指定的 -->
<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"/>

</android.support.v4.widget.DrawerLayout>

最后,修改活动中的代码,添加处理菜单项的点击事件,如下:

public class MaterialDesignActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_material_design);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);// 将 Toolbar 的实例传入

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true); //让导航按钮显示出来
actionBar.setHomeAsUpIndicator(R.mipmap.menu);//设置导航按钮图标
}
navView.setCheckedItem(R.id.nav_call);//设置默认选中项
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mDrawerLayout.closeDrawers();//关闭抽屉
ToastUtils.showShort("点击了"+item.getTitle());
return true;
}
});
}

. . .
}

四 悬浮按钮和可交互提示

         立体设计是 Material Design 中一条非常重要的思想,也就是说,按照Material Design的理念,应用程序的界面不仅仅是一个平面,而应该是有立体效果的。

4.1 FloatingActionButton

        FloatingActionButton 是 Design Support 库中提供的一个控件,可以比较轻松地实现悬浮按钮地效果。它默认使用 colorAccent 作为按钮的颜色。下面来具体实现下。

布局添加如下:

<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:headerLayout="@layout/nav_header"
app:itemIconTint="@color/colorAccent"
app:menu="@menu/nav_menu" />

设置点击事件:

fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
}
});

4.2 SnackBar

SnackBar 允许咋提示当中加入一个可交互的按钮,当用户点击按钮的死后可以执行一些额外的逻辑操作。

比如(防止误删):

Snackbar.make(view, "Data delete", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
}
})
.show();

效果如下(提示遮挡了内容,不急,继续往下看):

4.3 CoordinatorLayout

        CoordinatorLayout 是 Design Support 库提供的一个加强版的 FrameLayout 布局,它可以监听其所有子控件的各种事件,然后自动帮我们做出最为合理的响应。

修改布局如下:

<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">

<!--******** 第一个子控件 主屏幕显示 ********-->
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

<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/done"
app:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>

. . .

</android.support.v4.widget.DrawerLayout>

五:卡片式布局

卡片式布局是 Material Design 中提出的一个新概念,它可以让页面中的元素看起来就像在卡片中一样,并且还能拥有圆角和投影。

5.1 CardView

        是 appcompat-v7 库提供的用于实现卡片式布局效果的重要控件,它也是一个 FrameLayout,只是额外提供了圆角和阴影等效果,有立体感。

<!-- app:cardCornerRadius 指定卡片圆角的弧度,值越大弧度越大
app:elevation 指定卡片的高度,值越大投影范围越大,效果越淡-->
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
app:elevation="5dp">
<TextView
android:id="@+id/info_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>

5.2 AppBarLayout

        Design Support 库提供的一个垂直方向的 LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些 Meterial Design 的设计理念。

一会 会解决下面 列表遮挡问题,主要是

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<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="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

六:下拉刷新

       在 Meterial Design 中,SwipeRefreshLayout 是用于实现下拉刷新的核心类,它由 support-v4 库提供,把要实现下拉刷新功能的控件放置到 SwipeRefreshLayout 中,就能让这个控件支持下拉刷新。

在内容外嵌套:

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

<!--appbar_scrolling_view_behavior 唯一的作用是把自己(使用者)放到AppBarLayout的下面-->
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>

上述代码值得注意的是,由于 RecyclerView 变成了 SwipeRefreshLayout 的子控件,因此之前用 app:layout_behavior 声明布局行为要移到 SwipeRefreshLayout 中才行。

修改活动:

// 下拉刷新
swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//设置刷新进度条颜色
swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
// 处理刷新逻辑
refreshPartner();
}
});

处理刷新逻辑(模拟)

/**
* 下拉刷新数据(为简单起见没和网络交互)
*/
private void refreshPartner() {
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
runOnUiThread(new Runnable() {
@Override
public void run() {
initPartner();//重新生成数据
adapter.notifyDataSetChanged();//通知数据变化
swipeRefresh.setRefreshing(false);//隐藏刷新进度条
}
});
}
}).start();
}

七:可折叠式标题栏

7.1 CollapsingToolbarLayout

CollapsingToolbarLayout 是 Design Support 库提供的一个作用于 Toolbar 基础之上的布局,它可让 Toolbar 的效果变得更加丰富。

不过,CollapsingToolbarLayout 是不能独立存在的,只能作为 AppBarLayout 的直接子布局来使用。而 AppBarLayout 又必须是 CoordinatorLayout 的子布局。

新建活动 修改布局页面:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="@+id/appBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/coolapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>

<!--app:layout_collapseMode="parallax" 折叠模式 pin始终不变 parallax 错位偏移 -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:id="@+id/fruit_image_view"
android:fitsSystemWindows="true"
/>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
>


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


</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
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="4dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fruit_content_text"
android:layout_margin="10dp"
/>


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

</LinearLayout>
</android.support.v4.widget.NestedScrollView>

<!--layout_anchor 指定锚点 gravity 右下角-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:src="@mipmap/tele"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"
/>

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

7.2 充分利系统状态栏空间

让背景图和状态栏融合到一起

借助 android:fitsSystemWindows 这个属性实现。将 ImageView 布局结构中的所有父控件都设置上这个属性并且指定为 True,修改 activity_partner.xml 如下:

<android.support.design.widget.CoordinatorLayout
. . .
android:fitsSystemWindows="true">

<!--******************* 标题栏的界面 ****************-->
<android.support.design.widget.AppBarLayout
. . .
android:fitsSystemWindows="true">

<android.support.design.widget.CollapsingToolbarLayout
. . .
android:fitsSystemWindows="true">

<ImageView
android:id="@+id/partner_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>

. . .

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

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

然后还要在程序的主题中将状态栏颜色指定为透明色才行,即在主题中将属性 **android:statusBarColor **的值指定为 @android:color/transparent 就可以了,但问题是这个属性在 Android 5.0 系统开始才有的,因此需要准备两个同名不同内容的主题来实现。

针对5.0及以上的系统,在 res 目录下创建一个 values-v21 目录,然后在此目录创建一个 styles.xml 文件如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="PartnerActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>

针对5.0以下的系统,还需要在 value/styles.xml 文件定义一个同名主题,但内容为空,如下:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<!-- 5.0以下使用主题 -->
<style name="PartnerActivityTheme" parent="AppTheme">
</style>
</resources>

最后修改 AndroidManifest.xml 中的代码,让 PartnerActivity 使用这个主题,如下:

<activity 
android:name=".chapter12.PartnerActivity"
android:theme="@style/PartnerActivityTheme">
</activity>