Material Design Toolbar

最新推荐文章于 2024-01-03 23:12:34 发布

tony499074462

最新推荐文章于 2024-01-03 23:12:34 发布

阅读量250

点赞数

分类专栏： Material 文章标签： Android

本文链接：https://blog.csdn.net/tony499074462/article/details/95310282

版权

Material 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Material Design 是谷歌公司提出的一套界面设计规范，使用它的相应主题就能得到相对应的Material Design风格

Material主题有三种
在这里插入图片描述
两种兼容主题 兼容主题都在 com.android.support:appcompat-v7:28.0.0 各个版本V7包下面

我们一般使用兼容主题

Theme.AppCompat.Light.DarkActionBar

新建一个项目，使用 Theme.AppCompat.Light.DarkActionBar 主题看看界面的效果

 <style name="AppThemes" 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>
        <!-- 窗口颜色 -->
        <item name="android:windowBackground">@android:color/white</item>
        <!-- 虚拟导航栏颜色 -->
        <item name="android:navigationBarColor">@color/colorPrimary</item>
        <!--&lt;!&ndash;设置menu菜单的背景色&ndash;&gt;-->
        <!--<item name="android:itemBackground">@color/black</item>-->
        <!--&lt;!&ndash;设置Menu菜单的字体颜色&ndash;&gt;-->
        <!--<item name="android:textColorPrimary">@android:color/darker_gray</item>-->
        <!--&lt;!&ndash;设置Menu窗口不覆盖ToolBar视图&ndash;&gt;-->
        <!--<item name="overlapAnchor">false</item>-->
    </style>
    
  <application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppThemes">//设置Material方式的主题
    <activity android:name=".Toolbarctivity"
        android:theme="@style/AppTheme.NoActionBar"
        />
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppThemes">//设置Material方式的主题
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

在这里插入图片描述
可以看到这就是Material的风格了状态栏标题栏虚拟导航栏我颜色都改变了，接下来我们把虚拟导航栏的颜色改为红色看看效果

 <!-- 虚拟导航栏颜色 -->
 <item name="android:navigationBarColor">@color/colorAccent</item>

在这里插入图片描述

(1) Toolbar的使用

Toolbar是什么了？它其实就是一个标题栏而已，是谷歌公司为我们提供的一个控件
使用它需要先导入 appcompat-v7 包，对应你自己项目版本的就行，然后再你的 xml布局文件中进行添加

我们新建一个Activity Toolbarctivity，在它的布局文件中使用Toolbar

<?xml version="1.0" encoding="utf-8"?>
<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/tb_at_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"// Toolbar 的主题
        app:layout_scrollFlags="scroll|enterAlways"
        app:logo="@mipmap/ic_launcher"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"//菜单显示的主题
        app:subtitle="副标题"
        app:subtitleTextColor="#FFFFFF"
        app:title="标题"
        app:titleTextColor="#FFFFFF">


    </android.support.v7.widget.Toolbar>

</LinearLayout>

menu菜单

<?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/add"
        android:icon="@drawable/ic_menu_camera"
        android:title="add"
        app:showAsAction="always"/>//总是显示

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="delete"
        app:showAsAction="never"/>//不显示这个图标

    <item
        android:id="@+id/tb_setting"
        android:title="Settings"
        android:icon="@drawable/ic_menu_manage"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"/>//如果空间够就显示
</menu>

对应Activity代码

public class Toolbarctivity extends AppCompatActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbarctivity);

        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //把tbAtToolbar  设置到 ActionBar里面 这样就可以当做ActionBar来使用 
        //这一步很重要 不这样设置 就是空白，并且下面两行代码位置不能替换
        setSupportActionBar(tbAtToolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null)
        {
            //设置Toolbar home键可点击
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置Toolbar home键图标 如果不设置，默认是一个箭头
            //actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }
    }

	//配置菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.toobalr, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        switch (item.getItemId())
        {
            case android.R.id.home:
             Toast.makeText(this, "home", Toast.LENGTH_SHORT).show();
                break;
            case R.id.add:
                Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.tb_setting:
                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

manifest配置

   <activity android:name=".Toolbarctivity"
    android:theme="@style/AppTheme.NoActionBar"
    />


  <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="overlapAnchor">false</item>//菜单的显示方式 
        <item name="android:navigationBarColor">@color/colorPrimary</item>//修改当前Activity的虚拟导航栏颜色
    </style>

运行看看效果

在这里插入图片描述

如果我们想自己定义标题，并且居中，可以这么做

  <android.support.v7.widget.Toolbar
        android:id="@+id/tb_at_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_scrollFlags="scroll|enterAlways"
        app:logo="@mipmap/ic_launcher"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:subtitle="副标题"
        app:subtitleTextColor="#FFFFFF"
        app:title="标题"
        app:titleTextColor="#FFFFFF">

          <TextView
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:gravity="center"
              android:text="我是标题"
              android:textColor="#FFFFFF"/>

    </android.support.v7.widget.Toolbar>

我们再看看效果
这里要注意的是如果我们自己添加了标题，那么Toolbar里的标题和副标题就不会在显示了
在这里插入图片描述

在国内App中，标题栏几乎没有这么多的内容，我们来精简一下看看

在布局文件中去掉 logo 标题副标题这些属性

<android.support.v7.widget.Toolbar
        android:id="@+id/tb_at_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center"
        android:text="我是标题"
        android:textColor="#FFFFFF" />

</android.support.v7.widget.Toolbar>

men配置文件中只显示菜单图标 app:showAsAction=“never” 即为不显示，不显示的将会出现在菜单列表中 add 和 delete 将会出现在菜单列表里

<?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/add"
        android:icon="@drawable/ic_menu_camera"
        android:title="add"
        app:showAsAction="never"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="delete"
        app:showAsAction="never"/>

    <item
        android:id="@+id/tb_setting"
        android:title=""
        android:orderInCategory="100"
        app:showAsAction="always"/>
</menu>

Activity里面不设置Home图标默认显示箭头

 //actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);

再来看看效果，是否符合国内的风格
在这里插入图片描述

tony499074462

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design Toolbar

Material Design 是谷歌公司提出的一套界面设计规范，使用它的相应主题就能得到相对应的Material Design风格Material主题有三种两种兼容主题兼容主题都在 com.android.support:appcompat-v7:28.0.0 各个版本V7包下面我们一般使用兼容主题Theme.AppCompat.Light.DarkActionBar新建一个...
复制链接

扫一扫