Android18-Material Design

作者: figure_ai | 来源:发表于2017-04-21 14:14 被阅读0次

1. Toolbar

1.使用Toolbar，首先需要将系统的ActionBar隐藏，打开res/values／styles.xml文件，修改AppTheme的parent为Theme.AppCompat.Light.NoActionBar（淡色主题），或者Theme.AppCompat.NoActionBar（深色主题）

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>

两者设置的效果差异如下：

2017-04-17_14-20-54.png

关于其他属性的设置说明如下图：

2017-04-20_14-34-24.png

2.隐藏完ActionBar之后就可以在xml文件中布局Toolbar了

<LinearLayout 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">
    </android.support.v7.widget.Toolbar>
</LinearLayout>

以上这段代码中，使用xmlns:app指定了一个新的命名空间，是因为MaterialDesign是在Android5.0系统中才出现的，而很多Material属性在5.0之前的系统并不存在，为了能够兼容之前的老系统，无法使用android:attribute这样的写法，所以只能使用app:attribute

3.布局完Toobar之后就可以在activity添加Toolbar了

//获得Toolbar实例
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//调哟个setSupportActionBar()方法，设置Toolbar
setSupportActionBar(toolbar);

4.如果要修改Toolbar显示的标签，需要在AndroidManifest.xml文件中进行设置

<activity
  android:name=".MainActivity"
  android:label="Fruits"
  >

5.给Toolbar添加按钮
创建一个menu文件夹（res->New->Directory），然后在menu目录下创建一个toolbar.xml布局文件（右击menu->New->Menu resource file）,作为Toolbar的布局文件

<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="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>
</menu>

上面这段代码中
<item> ：用来定义action按钮
android:id : 用于指定按钮id
android:title : 用于指定按钮文字
android:icon : 用于指定按钮的图标
app:showAsAction 用于指定按钮的显示未知

showAsAction:有以下几种值可选

always：表示永远显示在Toolbar中

ifRoom:表示屏幕空间足够的情况下显示在Toolbar中，不够的话显示在菜单中。

never:表示永远显示在菜单当中。
注：Toolbar中的action按钮只会显示图标，菜单中的按钮只会显示文字。

6.监听Toolbar中action按钮的点击事件：

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //加载toolbar.xml文件
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ///处理Toolbar中action按钮的点击事件
        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:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }

如上代码所示：监听Toolbar中action按钮的点击事件，只需在onCreatOptionMenu()方法中加载toolbar.xml文件，然后在onOptionsItemSelected()方法中处理各个按钮的点击事件即可。

2.DrawerLayout（滑动菜单）

1.Android中可以使用DrawerLayout来实现滑动（显示／隐藏）菜单的功能。
DrawerLayout :是一个布局，在布局允许放入两个字空间，第一个空间是主屏幕中显示的内容，第二个控件是滑动菜单中显示的内容。
综上，添加一个DrawerLayout布局框架代码如下：

<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">
        <LinearLayout 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">
            <!--这里面是主屏幕布局-->
        </LinearLayout>
        <!--这里面是滑动菜单布局-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:text="This is menu"
            android:textSize="30sp"
            android:background="#FFF"/>
</android.support.v4.widget.DrawerLayout>

如上代码，需要注意的是，在第二个子控件中layout_gravity这个属性是必须确定的，这个属性是用来设置DrawerLayout滑动菜单是在屏幕左边还是右边，设为left表示滑动菜单在左边，设为right表示在右边，设为start表示会根据系统语言进行判断，如果系统语言是从左往右就在左边，反之则在右边。

2.在Toolbar中添加一个导航按钮，实现点击的时候也会滑出滑动菜单，代码如下

    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        ///toolbar部分
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//添加toolbar
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);//获得DrawerLayout实例
        ActionBar actionBar = getSupportActionBar();//获得ActionBar
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.drawable.ic_backup);//设置导航按钮的图标，默认为一个返回的箭头
        }
    }
        @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        ///处理Toolbar中action按钮的点击事件
        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:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }

如上代码，在onCreate()函数中添加了导航按钮，然后在onOptionsItemSelected()方法中实现，导航按钮的点击事件。需要注意的是，设置的HomeAsUp按钮的id用于都是android.R.id.home

3.NavigationView

NavigationView是滑动菜单页面的一个布局，当然我们可以在滑动菜单页面定制任意的布局，只不过NavigationView更加简单高效。
1.使用前需要先添加Design Support库
compile 'com.android.support:design:26.0.0-alpha1'
2.添加完库之后，还需要准备menu和headerLayout两个布局，headerLayout是用来在NavigationView中显示头部布局的，menu是用来在Navigation中显示具体菜单项的。
2.1添加menu文件（右击menu文件夹->New->Menu resource file）,布局代码如下:

<menu
    xmlns:android="http://schemas.android.com/apk/res/android">
    //single表示所有菜单项功能智能单选
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            //菜单项的图标
            android:icon="@drawable/nav_call"
            //菜单项的文字
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends"
            />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail"
            />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks"/>
    </group>
</menu>

如上代码，menu中添加了5个菜单项

2.2添加完menu菜单项之后，还需创建headerLayout文件（右击layout文件夹-New->Layout resource file）

<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"
    android:id="@+id/nav_header">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="tonygreendev@gmail.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/username"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp"/>
</RelativeLayout>

如上代码，headerLayout中添加了一张图片，还有两个标签属性

3.menu和headerLayout都准备好后，就可以使用NavigationView了。
修改DrawerLayout的第二个控件为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">
        <LinearLayout 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">
            <!--这里面是主屏幕布局-->
        </LinearLayout>
        <!--这里面是滑动菜单布局-->
        <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.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

如上代码，将DrawerLayout中的第二个控件为NavigationView，并将menu和headerLayout设置进去

4.添加完NavigationView之后，还要监听NavigationView中的menu选项的点击事件。

///navigation部分
NavigationView navView = (NavigationView) findViewById(R.id.nav_view);//获得nav实例
View headerView = navView.getHeaderView(0);//获得headerview实例
CircleImageView img = (CircleImageView) headerView.findViewById(R.id.icon_image);//通过headerview获得头像
//监听头像的点击事件
img.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
      Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
  }
});
//监听菜单项的点击事件
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
  @Override
  public boolean onNavigationItemSelected(@NonNull MenuItem item) {
      switch (item.getItemId()) {
          case R.id.nav_call:
              Toast.makeText(MainActivity.this, "点击了call", Toast.LENGTH_SHORT).show();
              break;
          case R.id.nav_friends:
              Toast.makeText(MainActivity.this, "点击了Friends", Toast.LENGTH_SHORT).show();
              break;
          case R.id.nav_location:
              Toast.makeText(MainActivity.this, "点击了Location", Toast.LENGTH_SHORT).show();
              break;
          case R.id.nav_mail:
              Toast.makeText(MainActivity.this, "点击了Mail", Toast.LENGTH_SHORT).show();
              break;
          case R.id.nav_task:
              Toast.makeText(MainActivity.this, "点击了Tasks", Toast.LENGTH_SHORT).show();
              break;
          case R.id.icon_image:
              Toast.makeText(MainActivity.this, "点击了头像", Toast.LENGTH_SHORT).show();
      }
      mDrawerLayout.closeDrawers();
      return true;
  }
});

如上代码所示，在onCreate()方法中，先获得NavigationView实例，然后通过调用setNavigationItemSelectListener()方法监听菜单项的点击事件
具体的效果如下

4.FloatingActionButton和Snackbar（悬浮按钮和可交互提示）

1.悬浮按钮
添加一个悬浮按钮的代码如下

<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="@drawable/ic_done"
            android:elevation="1dp"/>

如上代码，需要注意的是，gravity属性，表示将按钮设置在右下方，end值表示当系统语言是从左往右时按钮在右方，反之则在左方。

1.1监听悬浮按钮的点击事件

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
      ///Snackbar提示框
      Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
          }
      }).show();
  }
});

2.Snackbar可交互式提示框

///Snackbar提示框
 Snackbar.make(v, "是否删除数据", Snackbar.LENGTH_SHORT).setAction("否", new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         Toast.makeText(MainActivity.this, "数据未删除", Toast.LENGTH_LONG).show();
     }
 }).show();

如上代码，调用了Snackbar的make()方法来创建一个Snackbar对象，make()接收三个参数
第一个：当前界面的任意一个View
第二个：Snackbar中显示的内容
第三个：Snacker显示的时长
然后在调用setAction()方法，来设置一个动作，最后再调用show()方法让Snackbar显示出来。

5.CoordinatorLayout

当可交互式提示框从底部弹出时，可能会遮挡住界面部分内容，这时就可使用CoordinatorLayout来解决这一问题，CoordinLayout可以监听子控件的所有事件，是一个加强版的FrameLayout，使用时直接将FrameLayout替换成CoordinatorLayout即可。注：这里由于Snackbar的make()方法为一个CoordinatorLayout的子控件，所以Snackbar也会受到监听。

6.CardView（卡片式布局）

用于实现卡片式布局效果的中药控件，由appcompat-v7提供，实际上跟CardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果，看上去会有立体感。使用前依旧需要添加依赖

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

2.布局一个CardView的具体代码如下：

<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
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

如上代码：app:cardCornerRadius属性指定了卡片圆角的弧度，数值越大，圆角的弧度越大；另外还可通过app:elevation属性指定卡片的高度，高度值越大，投影范围越大，但是投影效果也越淡。这一点和悬浮按钮的是一致的。
在CardView布局中放置了一个LinearLayout布局。布局中加入了一个ImageView和一个TextView。

7.AppBarLayout

AppBarLayout实际上是一个垂直方向上的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些Material Design的设计理念。AppBarLayout必须是CoordinatorLayout的子布局。

8.SwipeRefreshLayout（下拉刷新）

SwipeRefreshLayout是实现下拉刷新功能的核心类，由support-v4库提供，使用时只需把控件放到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/recycler_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

在activity中处理具体的刷新逻辑

//获得SwipeRefreshLayout实例
swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);
swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//设置刷新动画的颜色
swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
  @Override
  public void onRefresh() {
      //处理具体的刷新逻辑
      refreshFruits();
  }
});

9.CollapsingToolbarlayout（可折叠式标题栏）

CollapsingToolbarlayout是一个作用于Toolbar基础之上的布局，可以让Toolbar的效果变得更佳丰富，CollapsingToolbarlayout在设计的时候被限定只能作为AppBarLayout的直接子布局，而AppBarLayout又必须是CoordinatorLayout的子布局。

   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:fitsSystemWindows="true"
       app:layout_scrollFlags="scroll|exitUntilCollapsed"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:contentScrim="?attr/colorPrimary"
       >
       <ImageView
           android:id="@+id/fruit_image_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="centerCrop"
           android:fitsSystemWindows="true"
           app:layout_collapseMode="parallax"/>
       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:layout_collapseMode="pin"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:contentScrim="?attr/colorPrimary"/>
   </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

如上代码中，在CollapsingTollbarLayout中定义了一个ImageView和一个Toolbar，意味着这个标题栏是由图片和普通的标题栏组合而成。其中app:layout_collapseMode 用于指定控件在折叠过程中的折叠模式，其中Toolbar指定成pin表示在折叠的过程中位置始终保持不变，ImageView指定成parallax表示会在折叠过程中产生一定的错位偏移。
。

2017-04-21_11-28-56.gif

Android18-Material Design

1. Toolbar

2.DrawerLayout（滑动菜单）

3.NavigationView

4.FloatingActionButton和Snackbar（悬浮按钮和可交互提示）

5.CoordinatorLayout

6.CardView（卡片式布局）

7.AppBarLayout

8.SwipeRefreshLayout（下拉刷新）

9.CollapsingToolbarlayout（可折叠式标题栏）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读