Android MaterialDesign简单使用_toolbar_Android

2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西，开发人员实现起来也很费劲，几乎没有一个可以用的API，都需要自己实现所以普及程度比较低。

而google也意识到了这一问题，于是2015年的Google I/O大会上推出了一个Design Support库，这个库将一些具有代表性的一些控件和效果进行了封装，这样就大大的简化了实现难度。

1.DarkActionBar

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

新建一个工程没有做任何操作的话进入如下：

如果我们需要使用toolbar需要先把原有的 AndroidManifest中application中的theme对应的Theme.AppCompat.Light.DarkActionBar修改为NoActionBar。但是这个NoActionBar有两种分别为Theme.AppCompat.Light.NoActionBar和Theme.AppCompat.DayNight.NoActionBar他们有什么去区别呢？

首先Theme.AppCompat.Light.NoActionBar淡色主题会将主题颜色设置为淡色陪衬颜色设置为深色

然后 Theme.AppCompat.DayNight.NoActionBar深夜主题

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

我们可以清楚的看到除了AppTheme做了对应的修改后我们还可以看到还有单个item他们分别为：

colorPrimary 、colorPrimaryDark 、colorAccent 他们三个分别代表什么位置的颜色呢？

但是图上并没表明colorAccent属性，其实这个就是并不是指定哪个按钮颜色，更多的是强调的意思。

2.使用toolBar:

2.1首先将style中的主题替换了：

我们选择淡色主题来进行下面的讲解

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

添加toolbar

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

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


</FrameLayout>

android:theme：toolbar单独使用深色主题，但是如果toolbar中有按钮按钮也回成为深色主题

app:popupTheme：单独将弹出的菜单项指定成单色主题，同时popuptheme是在Android5.0系统中添加的，使用 app:popupTheme可以兼容5.0以下版本。

然后再activity中添加：

package com.example.mytoolbar;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toobar);
        setSupportActionBar(toolbar);
    }
}

如下图：

看上去和actionbar并没有什么不同，但是他已经不是actionbar了，然后我们继续。

在标题栏修改名称：android:label，如果不添加这个属性系统回默认使用applicaton的属性也就是我们项目的名称

<activity android:name=".MainActivity"
    android:label="大不懂">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

我们在标题中添加一个menu：

首先在点击res ->右键->new->Dirrctory 创建一个menu包，然后点击menu->右键->new->Menu resource file创建一个toolbar.xml

然后编写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="@android:drawable/stat_sys_upload_done"
        android:title="backup"
        app:showAsAction="always" />
    <item
        android:id="@+id/frame"
        android:icon="@android:drawable/menu_frame"
        android:title="backup"
        app:showAsAction="always" />
    <item
        android:id="@+id/delect"
        android:icon="@android:drawable/ic_menu_delete"
        android:title="delect"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/add"
        android:icon="@android:drawable/ic_menu_add"
        android:title="add"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/send"
        android:icon="@android:drawable/ic_menu_send"
        android:title="send"
        app:showAsAction="never" />
    <item
        android:id="@+id/call"
        android:icon="@android:drawable/ic_menu_call"
        android:title="call"
        app:showAsAction="never" />
</menu>

item:定义按钮

android:id：唯一标识

android:icon：图片我这里使用的是系统默认的图片

android:title：按钮名称

app:showAsAction：显示位置 always：永远显示在toolbar中、ifRoom：如果显示空间足够显示在toolbar中如果显示的不够显示在菜单中、never：永远显示在菜单中。 toolbar中只显示图标不显示文字、菜单中只显示文字不显示图标。

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

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()) {
        case R.id.backup:
            Toast.makeText(this, "backup", Toast.LENGTH_SHORT).show();
            break;
        case R.id.frame:
            Toast.makeText(this, "frame", Toast.LENGTH_SHORT).show();
            break;
        case R.id.delect:
            Toast.makeText(this, "delect", Toast.LENGTH_SHORT).show();
            break;
        case R.id.add:
            Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
            break;
        case R.id.send:
            Toast.makeText(this, "send", Toast.LENGTH_SHORT).show();
            break;
        case R.id.call:
            Toast.makeText(this, "call", Toast.LENGTH_SHORT).show();
            break;
    }
    return true;
}