Android ：安卓第一行代码学习笔记之 material design简单理解和使用

Posted 2021-12-29 JMW1407

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Android ：安卓第一行代码学习笔记之 material design简单理解和使用相关的知识，希望对你有一定的参考价值。

material design简单理解和使用

material design简单理解和使用
参考

material design简单理解和使用

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

1、 Toolbar

ToolBar是我们接触的第一个 Material Design 控件，对于它的另一个相关控件ActionBar。

ActionBar的设计被限定只能位于活动的顶部，从而不能实现 Material Design 的效果。因此官方更加推荐使用ToolBar。

创建的基本步骤：

step1.更改程序的ActionBar主题
step2.在布局中添加Toolbar控件
3.活动中设置支持动作栏

1、把之前默认的深色主题改为不带ActionBar的主题

任何一个新建项目，默认都会显示ActionBar。它是根据项目中指定的主题来显示的，打开androidManifest.xml文件，如下：

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
    </application>

使用android：theme属性指定了一个AppTheme的主题。打开res/values/styles.xml文件，如下：

<resources>

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

</resources>

这里定义了一个叫AppTheme的主题，然后指定了它的parent主题是Theme.AppCompat.Light.DarkActionBar。这个DarkActionBar是一个深色的主题，项目中自带的ActionBar就是因为指定了这个主题才出现的。

接下来我们使用ToolBar来代替ActionBar，通常Theme.AppCompat.NoActionBar（表示深色主题，将界面的主题颜色设成深色，陪衬颜色设成淡色）和Theme.AppCompat.Light.NoActionBar（表示淡色主题，将界面的主题颜色设成淡色，陪衬颜色设成深色）两种主题可选。那我们就选用淡色主题，如下所示：

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

step2.在布局中添加Toolbar控件

现在我们已经将ActionBar隐藏起来了，使用ToolBar来代替ActionBar。修改activity_main.xml中的代码如下：

<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 单独指定弹出的菜单项的主题-->

使用了 xmlns:app 指定了一个新的命名空间。是由于 Material Design 是在 Android5.0 系统中才出现的，为了兼容之前老的系统，我们就必须使用app:attribute。

定义了一个Toolbar控件。为了让ToolBar单独使用深色主题，这里我们使用 android:theme 属性，将Toolbar的主题指定成了ThemeOverlay.AppCompat.Dark.ActionBar。为了使Toolbar中的菜单按钮弹出的菜单项也变成淡色的主题，这里使用了 app:popupTheme ,是因为popupTheme这个属性是 Android5.0 新增的，这样我们就可以兼容 Android5.0 以下的系统了。

3.活动中设置支持动作栏

接下来我们修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity 

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); //将Toolbar的实例传入

这样我们就让它的外观和功能都和ActionBar一致了。运行程序如下：

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

Toolbar常用的一些功能，比如修改标题栏上显示的文字内容。在AndroidManifest.xml中指定，如下：

// 在activity标签中修改，如果没有指定，默认用application中指定的label内容。
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="Fruits">
            ...
        </activity>
    </application>

这里在activity新增了一个label属性，用于指定Toolbar显示的文字内容，如果没有指定就会默认使用application中指定的label内容，也就是我们的应用的名称。

1.2、添加action按钮

和添加普通菜单流程基本一样。

step1.创建菜单项的xml文件

为了丰富我们Toolbar，可以再添加 action 按钮。准备一些图片来作为按钮的图标。将它们放在 drawable-xxhdpi 目录下。创建一个 menu文件夹。再创建一个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/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>

通过< item>标签定义 action 按钮，android:id 用于指定按钮的 id，android:icon 用于指定按钮的图标，android:title 指定按钮的文字。app:showAsAction 指定按钮显示的位置，使用app命名空间，为了能够兼容更低的系统。可选值：always（永远显示在Toolbar中，屏幕空间不足则不显示），ifRoom（屏幕空间足够的情况下显示在Toolbar中，不够则显示在菜单当中），never（永远显示在菜单中）。注意：Toolbar中的action按钮只会显示图标，菜单中的 action 只会显示文字。

step2.加载菜单文件、设置点击事件

修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity 
     ...

    /**
     * 加载toolbar.xml文件
     *
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    

    /**
     * 处理各个按钮的点击事件
     *
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(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;
            default:
                break;
        
        return true;

2、滑动菜单

2.1、DrawerLayout

DrawerLayout控件可用来实现滑动菜单的效果。首先它是一个布局，在布局中允许放入两个直接子控件:

第一个子控件用于显示主屏幕中的内容
第二个子控件用于显示滑动菜单中的内容

示例：

修改activity_main.xml中的代码如下：

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

我们可以看到第一个子控件FrameLayout（用于作为主屏幕显示的内容）；第二个子控件TextView（作为滑动菜单中显示的内容），这个子控件中 android:layout_gravity 这个属性必须指定（滑动菜单是在屏幕的左边还是右边，left，right，这里我指定了start，根据系统语言进行判断，比如英语，汉语，滑动就在左边，阿拉伯语滑动就在右边）。

运行程序，左侧向右侧滑动，如图：

向左滑动，或者点击菜单以外的区域，都可以将滑动菜单关闭。

为了解决用户不知道这个功能，Material Design建议我们在Toolbar 的最左边接入了一个导航按钮，点击也会将滑动菜单展示出来。（这样就相当于给用户提供了良两种打开滑动菜单的方式）。

将准备好的c_menu.png放在drawable-xxhdpi目录下，修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity 

    private Toolbar toolbar;
    private DrawerLayout mDrawerLayout;


    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) 
            actionBar.setDisplayHomeAsUpEnabled(true); //显示导航按钮
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置导航按钮图标（默认返回箭头，含义返回上一个活动）
        
    
    ...
    @Override
    public boolean onOptionsItemSelected(MenuItem item) 
        switch (item.getItemId()) 
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);//对HomeAsUp按钮（id永远是 android.R.id.home），显示滑动菜单，传入GravityCompat.START
                break;
                ...
        
        return true;

运行程序，如下：

在Toolbar 最左边就会出现导航按钮，点击按钮，滑动菜单就会显示。

2.2、NavigationView

NavigationView是Design Support库中的一个控件，借助它，可让滑动菜单页面的实现变得简单。

step1、添加依赖

 implementation 'com.google.android.material:material:1.0.0'
implementation 'de.hdodenhof:circleimageview:3.1.0'

第二个是开源项目CircleimageView的依赖，GitHub地址，借助它可轻松实现图片圆形化的功能。

step2、准备menu

我们首先要准备：menu（在NavigationView中显示的菜单项）和 headerLayout（在NavigationView中显示头部布局的）。

准备几张图片放在了drawable-xxhdpi目录下。右击menu，创建一个nav_menu.xml文件，编写代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <!-- group表示一个组，android:checkableBehavior="single"表示组中的所有菜单项只能单选 -->
        <item
            android:id="@+id/item_cgl1"
            android:title="grape"
            android:icon="@drawable/grape"/>
        <item
            android:id="@+id/item_cgl2"
            android:title="orange"
            android:icon="@drawable/orange"/>
        <item
            android:id="@+id/item_cgl3"
            android:title="pear"
            android:icon="@drawable/pear"/>
        <item
            android:id="@+id/item_cgl4"
            android:title="watemelon"
            android:icon="@drawable/watemelon"/>
    </group>


</menu>

在< menu>嵌套了< group>（一组），将group的checkableBehavior属性设为single（所有菜单项只能单选）。接下来定义了5个菜单项。这样准备好了menu。

step3、写headLayout

headerLayout，这是一个随意定制的布局，那我们就在里面放置头像，用户名，邮箱吧。

准备一张图片放在drawable-xxhdpi目录下。最好是一张正方形，因为一会将它圆形化。右击layout，创建一个nav_header.xml文件。修改代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">

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

    <TextView
        android:id="@+id/tv_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Jack@mail.com"
        android:textColor="#FFF"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_mail"
        android:text="Jack"
        android:textColor="#FFF"
        android:textSize="14sp" />
</RelativeLayout>

step4、使用NavigationView

接下来我们使用 NavigationView 了，修改activity_main中的代码如下：

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

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

    <com.google.android.material.navigation.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:menu="@menu/nav_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

这样NavigationView定义好了。

step5、处理菜单项的点击事件

接下来处理菜单的点击事件，修改MainActivity中的代码如下：

public class MainActivity extends AppCompatActivity 

    private Toolbar toolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView navView;


    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        navView= (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) 
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        
        navView.setCheckedItem(R.id.nav_call); //设置默认选中
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener()  //菜单选项监听事件
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) 
                //处理逻辑
                mDrawerLayout.closeDrawers();
                return true;
            
        );
    
    ...

运行程序，点击Toolbar左侧导航按钮，如下：

3、悬浮按钮和可交互提示

立体效果的代表性的设计：悬浮按钮。

一种可交互式提示工具（可对用户做出响应）。

3.1、悬浮按钮（FloatingActionButton）

FloatingActionButton是实现悬浮按钮的效果。还可以给这个按钮指定图标，表示来做什么。

1、在布局中添加

我们准备好一个ic_done.png，修改activity_main.xml中的代码如下：

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

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.Ap以上是关于Android ：安卓第一行代码学习笔记之 material design简单理解和使用的主要内容，如果未能解决你的问题，请参考以下文章 
 Android ：安卓第一行代码学习笔记之 material design简单理解和使用
 Android ：安卓第一行代码学习笔记之 解析LifeCycle 的简单理解和使用
 Android ：安卓第一行代码学习笔记之 ViewModel组件的简单理解和使用
 Android：安卓学习笔记之MVP模式的简单理解和使用
 Android：安卓学习笔记之MVP模式的简单理解和使用
 Android：安卓学习笔记之MVP模式的简单理解和使用

Android ：安卓第一行代码学习笔记之 material design简单理解和使用

material design简单理解和使用

material design简单理解和使用

1、 Toolbar

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

1.2、添加action按钮

2、 滑动菜单

2.1、DrawerLayout

2.2、NavigationView

3、 悬浮按钮和可交互提示

3.1、悬浮按钮（FloatingActionButton）

2、滑动菜单

3、悬浮按钮和可交互提示