Android第一行代码——第13章Material Design实战

什么是Material Design

Material Design 是谷歌的一套全新的界面设计语言，包含了视觉，运动，互动效果等特性。
Design Support库，将Material Design中最具代表性的一些控件和效果进行了封装。

Toolbar

Toolabr继承了ActionBar的所有功能，，灵活性很高，而且可配合其他控件来完成一些Material Design效果。

创建的基本步骤：
1.更改程序的ActionBar主题
2.在布局中添加Toolbar控件
3.活动中设置支持动作栏
示例：
1.
把之前默认的深色主题改为不带ActionBar的主题

<resources>
    <!-- Base application theme. -->
    <!-- Theme.AppCompat.Light.NoActionBar不带标题栏淡色主题 -->
    <!-- Theme.AppCompat.Light.NoActionBar不带标题栏的深色主题 -->
    <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>

2.

<androidx.appcompat.widget.Toolbar
	  android:layout_width="match_parent"
	  android:layout_height="?attr/actionBarSize"
	  android:id="@+id/toolbar"
	  android:background="?attr/colorPrimary"
	  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"         
                />
     <!-- android:theme 设置Toolbar的主题风格-->
     <!-- app:popupTheme 单独指定弹出的菜单项的主题-->           

 Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 
修改标题栏上显示的文字内容

 <activity
       android:name=".MainActivity"
       android:label="在这修改">    
</activity>

  在activity标签中修改，如果没有指定，默认用application中指定的label内容。
 
添加action按钮
 和添加普通菜单流程基本一样。
1.创建菜单项的xml文件
注：
  app:showAsAction 指示按钮的显示位值，always：永远显示在Toolbar中,ifRoom：屏幕空间足够的情况下显示在Toolbar中，never：永远显示在菜单中
 如果菜单项指定图标，Toolbar的action按钮只显示图标，菜单中的action只显示文字

<?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/item1"
        android:title="Backup"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item2"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/item3"
        android:title="Setting"
        app:showAsAction="never"/>

</menu>

2.加载菜单文件

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

3.设置点击事件

 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
   
        switch (item.getItemId()){
   
            case R.id.backup:
                Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"you clicked delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"you clicked settings",Toast.LENGTH_SHORT).show();
                break;
           
        }
        return true;
    }

 

滑动菜单

示例：

 

DrawerLayout

DrawerLayout控件可用来实现滑动菜单的效果。首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件用于显示主屏幕中的内容，第二个子控件用于显示滑动菜单中的内容
示例：

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.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" />


    </FrameLayout>

    <TextView
        android:id="@+id/text_view"
        android:text="This is menu"
        android:background="#fff"
        android:textSize="30sp"
        android:layout_gravity="start"//侧拉栏的布局必须声明这一属性，left表示侧拉栏在左，right表示侧拉栏在右，start则会根据系统语言来自动选择
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.drawerlayout.widget.DrawerLayout>

设置友好提示
 滑动菜单只有在屏幕的边缘进行拖动时才将菜单拖出来，有些用户可能不知道这个功能，Material Design建议的做法是在Toolbar左边加一个导航按钮。
代码实现：

 	private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        
        drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
   
            actionBar.setDisplayHomeAsUpEnabled(true);      //让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);