欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android MaterialDesign简单使用_toolbar

程序员文章站 2022-06-24 20:09:42
2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西,开发人员实现起来也很费劲,几乎没有一个可以用的API,都需要自己实现所以普及程度比较低。 而google也意识到了这一问题,于是2015年的Google I/O大会上推出了一个Design Support库,这个库将一些具有代表性的一些控件和效果进行了封装,这样就大大的简化了实现难度。1.DarkActionBar toolb......

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

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

1.DarkActionBar

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

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

Android MaterialDesign简单使用_toolbar

如果我们需要使用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  他们三个分别代表什么位置的颜色呢?

Android MaterialDesign简单使用_toolbar

但是图上并没表明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>

Android MaterialDesign简单使用_toolbar

添加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);
    }
}

如下图:

Android MaterialDesign简单使用_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>

Android MaterialDesign简单使用_toolbar

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

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

Android MaterialDesign简单使用_toolbar

然后编写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;
}

Android MaterialDesign简单使用_toolbar           Android MaterialDesign简单使用_toolbar

以上就是toolbar的基本使用了。

转发表明出处https://blog.csdn.net/qq_35698774/article/details/107892669

点击下载

android互助群:

Android MaterialDesign简单使用_toolbar

感谢:郭霖的《第一行代码 第二版》

本文地址:https://blog.csdn.net/qq_35698774/article/details/107892669