Toolbar总结学习

最新推荐文章于 2020-06-11 18:22:56 发布

易辰_

最新推荐文章于 2020-06-11 18:22:56 发布

阅读量1.7k

点赞数 1

分类专栏： Android基础

本文链接：https://blog.csdn.net/u013210620/article/details/52156581

版权

Android基础专栏收录该内容

136 篇文章 1 订阅

订阅专栏

此篇博客还没总结完毕！！！还有一些细节需要处理，后续继续更新

在material design材料设计中，有Toolbar控件，代替了ActionBar，可以对某页面的标题栏、状态栏，进行的统一管理
既然替代了ActionBar，为了做到在ActionBar的基础上进一步扩充，我们只需要在styles样式文件中，进行操作，就可以实现Toolbar的效果
在AndroidManifest.xml中，我们随便自定义一个主题 android:theme=”@style/AppTheme”
然后在styles.xml中进行如下设计

<resources>
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 状态颜色 粉色-->
        <item name="colorPrimaryDark">#FFB5C5</item>
        <!-- toolbar颜色 咖啡色 -->
        <item name="colorPrimary">#A0522D</item>
        <!-- 窗口的背景颜色 -->
        <item name="android:windowBackground">@color/windowback_color</item>
        <item name="android:navigationBarColor">@color/accent_material_color</item>

        <!--黄色，这颜色可以忽略不计算，在ToolBar布局中进行设计-->
        <item name="android:textColorPrimary">#CDCD00</item>
    </style>
    <style name="AppTheme" parent="@style/AppBaseTheme"></style>
</resources>

//对应的颜色窗口背景色，软键盘颜色
   <color name="windowback_color"> #104E8B</color>
    <color name="accent_material_color">#00FF7F</color>

我们在看看Theme.AppCompat.Light.NoActionBar进行了什么操作？如下是v7包中的设计

  <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

这样做在隐藏ActionBar的同时，也进行了ToolBar的设计
值得注意一点的是在5.0以后的SDK，某些机型，比如谷歌N5底部有缩回软键盘，回到桌面，进入任务列表的软键盘
所以我们还需要在values-v21\styles.xml进行设置，用来应付这3个软键盘的一些设置，比如navigationBarColor

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="@style/AppBaseTheme">
    </style>
</resources>

这里写图片描述
以上图片就是Toolbar的一些区域指示

接下里看我们的布局文件吧，我们在ToolBar中titleTextColor、subtitleTextColor进行灰色，白色设计
android:background=”?attr/colorPrimary”如果这个去掉的话，那么Toolbar颜色就不能运用
#A0522D的咖啡色了
activity_main.xml

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMain"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:title="App Title"
        app:titleTextColor="#ccc"
        app:subtitle="Sub Title"
        app:subtitleTextColor="#ffffff"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@mipmap/back"
        android:background="?attr/colorPrimary">

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

</LinearLayout>

menu_main.xml 我就用了2个相同的icon

<?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:icon="@mipmap/back"
        android:id="@+id/confirm1"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="always"/>

    <item
        android:icon="@mipmap/back"
        android:id="@+id/confirm2"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="always"/>


</menu>

MainActivity

package com.example.administrator.myapplication;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.view.menu.MenuBuilder;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

import java.lang.reflect.Method;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain);
        setSupportActionBar(toolbar);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if(item.getItemId() == R.id.confirm1){
            this.finish();
        }
        if(item.getItemId() == R.id.confirm2){
            this.finish();
        }
        return true;
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        menu.findItem(R.id.confirm1).setVisible(true);
        menu.findItem(R.id.confirm2).setVisible(true);
        invalidateOptionsMenu();
        return super.onPrepareOptionsMenu(menu);
    }

}

看效果图如下：
这里写图片描述

如果上图的Menu需要弹出Popupwindow的类型我们只需要修改如下的布局就可以了
修改成app:showAsAction=”never”，其他的均不变

<?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/confirm1"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="never"/>

    <item
        android:id="@+id/confirm2"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="never"/>


</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/confirm1"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="always"/>

    <item
        android:id="@+id/confirm2"
        android:orderInCategory="100"
        android:title="选中"
        app:showAsAction="never"/>
</menu>

效果图如下：
这里写图片描述

如果想要取消右边的东东呢？我们只需要在MainActivity中去掉如下方法即可：
onCreateOptionsMenu
onOptionsItemSelected
onPrepareOptionsMenu
效果图如下：
这里写图片描述

以上就是ToolBar的基本用法了，不过以上的效果，肯定不是我们喜欢的，我们需要进行一些细节的操作，诸如中间textview，右边的列表的位置等

一、我们先来看看如何在ToolBar中间增加一个TextView（有问题）颜色，大小，位置

直接在Toolbar里面增加一个Textview，设置为center

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        app:navigationIcon="@mipmap/back"
        android:background="?attr/colorPrimary">
        <TextView
            android:textColor="#ffffff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="20sp"
            android:text="标题"/>
    </android.support.v7.widget.Toolbar>
</LinearLayout>

这里写图片描述
我就去掉了Logo、Title、Sub、
如果需要去掉toolbar去除默认title显示，需要在代码中进行设置

 setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain);
        setSupportActionBar(toolbar);

        //setSupportActionBar(toolbar)後面進行設置
        getSupportActionBar().setDisplayShowTitleEnabled(false);

效果图如下
这里写图片描述

二：Toolbar中的PopuMenu菜单的显示位置

增加app:popupTheme=”@style/OverflowMenuStyle”属性

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMain"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:navigationIcon="@mipmap/back"
        app:popupTheme="@style/OverflowMenuStyle"
        android:background="?attr/colorPrimary">

 <style name="OverflowMenuStyle" parent="@style/ThemeOverlay.AppCompat">
        <!-- 是否覆盖overflow按钮，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
    </style>

在AppBaseTheme中我去掉了#CDCD00所以item颜色为黑色
这里写图片描述

在AppBaseTheme中如果填上这个#CDCD00
效果图如下：

这里写图片描述

如果要修改item的字体

  <style name="OverflowMenuStyle" parent="@style/ThemeOverlay.AppCompat">
        <!-- 是否覆盖overflow按钮，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <item name="android:textSize">30sp</item>
        <item name="android:colorBackground">#5a5a5a</item>
    </style>

效果图如下：
这里写图片描述

三、在AppBaseTheme中添加如下配置，点击更多按钮，会有切换效果
这里写图片描述

   <item name="android:actionBarItemBackground">@drawable/menu_selector</item>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@color/windowback_color" android:state_pressed="true" />
    <item android:drawable="@color/windowback_color" android:state_focused="true"/>

    <item android:drawable="@android:color/transparent"/>
    </selector>

四、如果希望菜单条目也有同样的效果进行如下设置

    <style name="OverflowMenuStyle" parent="@style/ThemeOverlay.AppCompat">
        <!-- 是否覆盖overflow按钮，默认为true，即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <!--字體大小-->
        <item name="android:textSize">30sp</item>
        <!--顏色-->
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <!--背景色-->
        <item name="android:colorBackground">#ccc</item>
        <!--selector選擇切換-->
        <item name="android:selectableItemBackground">@drawable/menu_selector</item>
    </style>

这里写图片描述

五、如果希望菜单条目有icon进行如下配置

默认只能显示文字而不能显示icon，但是觉得这样不美观啊，icon必须得显示出来。icon显示不显示是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，如果我们在PopuMenu被展开的时候给这个方法传入true，那么里面的每一个MenuItem对应的图标就都会显示出来了这个方法并没有对完开发，所以要调用此方法当然用到反射了

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_settings1"
        android:orderInCategory="100"
        android:icon="@mipmap/ic_launcher"
        android:title="action_settings"
        app:showAsAction="never" />
    <item
        android:icon="@mipmap/ic_launcher"
        android:id="@+id/action_settings2"
        android:orderInCategory="100"
        android:title="action_settings"
        app:showAsAction="never" />
</menu>

  @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsMenu(menu);
    }