Android_ToolBar基础

最新推荐文章于 2019-07-04 09:16:13 发布

binjianliu

最新推荐文章于 2019-07-04 09:16:13 发布

阅读量218

点赞数

分类专栏： Android 文章标签： Android_ToolBar基础 ToolBar

本文链接：https://blog.csdn.net/binjianliu/article/details/78064960

版权

Android 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

Android_ToolBar基础

一、ToolBar发展史

用来取代过去 actionbar 的控件，在Meterial design中也有统一名称：app bar

二、概述

Android3.0推出了ActionBar,自2013年Google大力推动所谓的android style,想要改变过去android纷乱的界面设计，希望让终端使用者尽可能在android手机有个一致的操作体验。ActionBar过去最多人使用的两大套件就是ActionBarSherlock以及官方提供在support library v 7里的AppCompat.

三、基础套用

1) 风格（style）

风格要调整的地方有二

l 在res/values/styles.xml

l 在res/values-v21/styles.xml

我们先在res/values/styles.xml里面添加一个AppTheme.Base风格

<style name="AppTheme" parent="AppTheme.Base"></style>

<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

隐藏原本的ActionBae,修改parent属性为新添加的AppTheme.Base

然后调整Android5.0的style(res/values-v21/styles.xml)修改parent属性为新添加的AppTheme.Base

<style name="AppTheme" parent="AppTheme.Base"></style>

2) 界面（Layout）

在布局文件中添加ToolBar控件，要使用support v7里面的ToolBar,否则就只有android5.0以上的版本才能使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">   //这样可以沿用ActionBar大小
    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/toolbar"   //必须设置这个
                android:text="Hello World!" />

</RelativeLayout>

3) 程序（java）

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

四、自定义颜色

android5.0以下直接使用res/values/styles.xml

<resources>
<style name="AppTheme" parent="AppTheme.Base"></style>

<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- ToolBar color -->
<item name="colorPrimary">@color/colorPrimary</item>
<!--Window color（内容布局背景颜色）-->
<item name="android:windowBackground">@color/colorAccent</item>
</style>
</resources>

Android5.0以及以上使用res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- 下面的导航栏颜色设置（API 21以上，并有下面的导航栏）-->
<item name="android:navigationBarColor">@color/accent_material_light</item>
<!-- 下面的状态栏颜色设置（API 21以上）-->
<item name="android:statusBarColor">@android:color/holo_blue_bright</item>
</style>
</resources>

注：android5.0以下的没有专门设置状态栏颜色的style

Style设置完成后，设置布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"> //可沿用ActionBar的颜色设定
    </android.support.v7.widget.Toolbar>

<!-- 注：android:fitsSystemWindows="true" 防止ToolBar与StatusBar融合   -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:text="Hello World!" />

</RelativeLayout>

五、控件设置

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitle("这是标题");
mToolbar.setSubtitle("副标题");
/**
 *上面设置必须在setSupportActionBar(mToolbar)之前设置，否则无效；要不就放在onResume中
 *下面设置必须在setSupportActionBar(mToolbar)之后设置，否则无效
 */
setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.ic_launcher));
mToolbar.setLogo(getResources().getDrawable(R.mipmap.ic_launcher_round));

<item name="android:textColorPrimary">@color/colorAccent</item>

六、自定义控件

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:src="@mipmap/ic_launcher"/>

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_toLeftOf="@+id/share"
                android:layout_toRightOf="@+id/back"
                android:gravity="center"
                android:text="这是标题"/>

            <ImageView
                android:id="@+id/share"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="15dp"
                android:src="@mipmap/ic_launcher"
                android:visibility="invisible"/>
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:text="Hello World!"/>

</RelativeLayout>

设置文件：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

ImageView mImg = (ImageView) findViewById(R.id.back);
TextView mTxt = (TextView) findViewById(R.id.title);
ImageView mShare = (ImageView) findViewById(R.id.share);
mImg.setImageResource(R.mipmap.ic_launcher);
mTxt.setText("替换标题");
mShare.setImageResource(R.mipmap.ic_launcher_round);