Toobar基本使用

作者: Ello_Orld | 来源:发表于2018-11-17 21:57 被阅读6次

一.Toolbar的基本使用

1. 去掉原生默认的ActionBar，修改默认主题为NoActionBar

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

2. 修改MainActivity的布局，添加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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.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>

需要注意toolbar的颜色设置为colorPrimary，则需要为toolbar指定主题为Dark Actionbar，因为之前activity的主题设置的是浅色主题，如果toolbar不指定深色主题，那么显示的文字都会是深色，不太美观。

但是这样设置之后，弹出的菜单颜色又变成了黑色，为了调整美观，需要添加app:popupTheme为浅色菜单。

3. 使用，调整MainActivity的代码

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

运行程序：

toolbar

4. 为toolbar添加菜单：

添加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="backup"
        app:showAsAction="always"
        android:icon="@drawable/backup"
        android:title="Backup" />
    <item
        android:id="delete"
        app:showAsAction="ifRoom"
        android:icon="@drawable/delete"
        android:title="Delete" />
    <item
        android:id="setting"
        app:showAsAction="never"
        android:icon="@drawable/settings"
        android:title="Setting" />
</menu>

在Activity中启用菜单

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

添加菜单的点击事件

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

运行一下：

image.png

其他：onOptionsMenuClosed
/**
* 每次菜单被关闭时调用.
*菜单被关闭有三种情形:
*1.展开menu的按钮被再次点击
*2.back按钮被点击
*3.用户选择了某一个菜单项
*/
@Override
public void onOptionsMenuClosed(Menu menu) {
super.onOptionsMenuClosed(menu);
}

 /**
     * 在onCreateOptionsMenu执行后，菜单被显示前调用；如果菜单已经被创建，则在菜单显示前被调用。 同样的，
     * 返回true则显示该menu,false 则不显示; （可以通过此方法动态的改变菜单的状态，比如加载不同的菜单等）
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        return super.onPrepareOptionsMenu(menu);
    }

5. NavigationIcon

NavigationIcon是toolbar最左侧的一个小图标，一般主要显示返回或者主页等
如果要启用，方法
void setDisplayHomeAsUpEnabled(boolean showHomeAsUp);

//注意要在setSupportActionBar(Toolbar toolbar)之后调用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

效果如下：

image.png

默认显示的是后退菜单。如果要修改，可以调用以下方法：
//设置NavigationIcon的icon.可以是Drawable ,也可以是ResId
void setNavigationIcon(@Nullable Drawable icon);
void setNavigationIcon(@DrawableRes int resId)
或者app:navigationIcon="@drawable/menu"

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.menu);
        }

运行一下：

image.png

设置点击事件：
//设置NavigationIcon的点击监听.
void setNavigationOnClickListener(OnClickListener listener);
一般可以设置为点击展开侧滑菜单。

6. Title 的使用

//是否显示
getSupportActionBar().setDisplayShowTitleEnabled(boolean showTitle);
//设置title.
getSupportActionBar().setTitle(title);
//设置title.
Toolbar.setTitle(title);
//设置Margin边距.
Toolbar.setTitleMargin();
//设置字体.
Toolbar.setTitleTextAppearance();
//设置字的颜色
Toolbar.setTitleTextColor(int color);

7. style

1.app:theme ------------------toolbar的主题
2.app:popupTheme------------弹出的menu的主题.

style的有些方法必须是Sdk21以上才能用
所以需要

image.png

普通values中的style改成如下:

 <style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>

        <item name="android:fitsSystemWindows">true</item>
    </style>
    <style name="base_toolbar" parent="toolbar"/>

values-v21中的style如下:

 <style name="base_toolbar" parent="@style/toolbar">
        <item name="android:elevation">3dp</item>
        <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    </style>

使用这个style

style="@style/base_toolbar"

1.修改toolbar的字体

<!-- ToolBar样式 .-->
   <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title颜色.正确-->
       <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
       <!--修改toolbar的subtitle(小标题)颜色.正确-->
       <item name="subtitleTextColor">@android:color/holo_red_dark</item>
   </style>

2.修改Toolbar的menu折叠图标和NavigationIcon的颜色

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--这个也正确,用这个吧-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
    </style>

image.png

3.修改menu的字体颜色

  <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
      <!--设置背景-->
       <item name="android:background">@android:color/white</item>
       <!--设置字体颜色-->
      <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

image.png

4.menu菜单的显示位置.
默认是这样的:

image.png

会遮盖toolbar
可以修改popuptheme的这个属性来设置:

<!--设置不覆盖锚点-->
 <item name="overlapAnchor">false</item>

最终效果的style代码:

    <style name="toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:fitsSystemWindows">true</item>
    </style>
   <style name="base_toolbar" parent="toolbar"/></style>
     <!-- ToolBar样式.-->
    <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title(大标题)颜色-->
        <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
        <!--修改toolbar的subtitle(小标题)颜色-->
        <item name="subtitleTextColor">@android:color/holo_red_dark</item>
        <!--修改toolbar的图标颜色.-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
    </style>
    <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--设置背景-->
        <item name="android:background">@android:color/white</item>
        <!--设置字体颜色-->
        <item name="android:textColor">@android:color/holo_red_dark</item>
        <!--设置不覆盖锚点-->
        <item name="overlapAnchor">false</item>
    </style>

values-v21的style的代码:

  <style name="base_toolbar" parent="@style/toolbar">
        <item name="android:elevation">6px</item>
        <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    </style>

toolbar布局的代码

<android.support.v7.widget.Toolbar
    android:id="@+id/tl_costom"
    style="@style/base_toolbar"
    app:theme="@style/toolbar_theme"
    app:popupTheme="@style/popup_theme"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
</android.support.v7.widget.Toolbar>

参考原文：

Toolbar设置掉坑总结 @jlanglang
https://juejin.im/post/5a30de4051882531d828680d
郭霖《第一行代码》
http://item.jd.com/12012505.html

Toobar基本使用

一.Toolbar的基本使用

1. 去掉原生默认的ActionBar，修改默认主题为NoActionBar

2. 修改MainActivity的布局，添加Toolbar

3. 使用，调整MainActivity的代码

4. 为toolbar添加菜单：

5. NavigationIcon

6. Title 的使用

7. style

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Toobar基本使用

一.Toolbar的基本使用

1. 去掉原生默认的ActionBar，修改默认主题为NoActionBar

2. 修改MainActivity的布局，添加Toolbar

3. 使用， 调整MainActivity的代码

4. 为toolbar添加菜单：

5. NavigationIcon

6. Title 的使用

7. style

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3. 使用，调整MainActivity的代码