android Toolbar浅谈

来源：互联网发布：ps是什么软件编辑：程序博客网时间：2024/05/16 21:02

前言：

Google在2015年的Google I/O大会上推出了一个Design Support库，这个库封装了Material Design中的控件。

Toolbar是Material中的一个控件。

Toolbar的出现是来代替ActionBar的，那么Toolbar于ActionBar有哪些优点呢

第一Toobar比ActionBar要更灵活，它不必像Activity一样一定要固定在顶部

第二在设计Toolbar的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标
设置APP的Logo
支持设置标题和子标题
支持添加一个或多个自定义空件
支持Action Menu

在使用ToolBar之前先来看看ActionBar

任何一个新建的项目，默认都会显示ActionBar的，这个ActionBar是根据项目中指定的主题来显示的，打开AndroidManifest文件看一下：

    <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/AppTheme">        <activity android:name=".MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>

这个android:theme属性指定了一个AppThome主题，看看这个主题吧

<resources>    <!-- Base application theme. -->    <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></resources>

Theme.AppCompat.Light.DarkActionBar:这是一个默认的主题，是一个深色主题

现在我们要用ToolBar代替ActionBar,需要把主题改成不带ActionBar的主题，有以下两种主题可选：

1.Theme.AppCompat.NoActionBar

表示深色主题，它会将界面的主体颜色设成深色，陪衬颜色设成淡色。

2.Theme.AppCompat.Light.NoActionBar

表示淡色主题，它会将界面的主体颜色设成淡色，陪衬颜色设成深色

这里我们把主题改成了Theme.AppCompat.Light.NoActionBar：

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

来看看运行效果图：

开始使用ToolBar

ToolBar是在Android 5.0加上的，Google为了将这一设计向下兼容，在appcompat-v7中加入了ToolBar，

1 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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="toolbar.csdn.com.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/tl_test"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorPrimary"        >    </android.support.v7.widget.Toolbar></LinearLayout>

运行效果图

2 修改标题文字

第一步 AndroidManifest.xml中指定标题文字

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="toolbar.csdn.com">    <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/AppTheme">        <activity android:name=".MainActivity"            android:label="Toolbar测试">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

第二步 FindViewById得到ToolBar实例

package toolbar.csdn.com;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;public class MainActivity extends AppCompatActivity {    private Toolbar tl_test;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tl_test= (Toolbar) findViewById(R.id.tl_test);        setSupportActionBar(tl_test);    }}

效果图

黑色文字很难看对不对

怎么把它改成白色呢

很简单只要在activity_main.xml里加一句代码

      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

我们之前在style.xml中将程序的主题设置成了淡色主题，因此ToolBar默认也是淡色主题，ToolBar上面的元素默认会是深色系，故文字默认是黑色的。

而这里我们把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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="toolbar.csdn.com.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/tl_test"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        >    </android.support.v7.widget.Toolbar></LinearLayout>

运行截图

3 ToolBar显示更多元素

第一步创建一个toolmenu.xml文件

res目录-New-Directory,创建toolmenu.xml文件，然后右击menu文件夹-New-Menu resource file,创建一个toolmenu文件，并编写如下代码：

<?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/item1"        android:title="测试item1"        app:showAsAction="never" />    <item        android:id="@+id/item2"        android:title="测试item2"        app:showAsAction="never" />    <item        android:id="@+id/item3"        android:title="测试item3"        app:showAsAction="never" />    <item        android:id="@+id/item4"        android:title="测试item4"        app:showAsAction="never" /></menu>

这里有一个属性要注意

app:showAsAction 它有三个属性

always:表示永远显示在ToolBar中，如果屏幕空间不够不显示

ifRoom;表示屏幕空间足够的情况下显示在ToolBar中，不够的话显示在菜单中

never则表示永远显示在菜单中

第二步修改MainActivity.class

package toolbar.csdn.com;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    private Toolbar tl_test;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tl_test= (Toolbar) findViewById(R.id.tl_test);        setSupportActionBar(tl_test);    }    /**     * Toolbar菜单     * @param menu     * @return     */    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolmenu,menu);        return true;    }    /**     * 菜单点击事件监听     * @param item     * @return     */    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.item1:                Toast.makeText(this,"第1个",Toast.LENGTH_SHORT).show();                break;            case R.id.item2:                Toast.makeText(this,"第2个",Toast.LENGTH_SHORT).show();                break;            case R.id.item3:                Toast.makeText(this,"第3个",Toast.LENGTH_SHORT).show();                break;            case R.id.item4:                Toast.makeText(this,"第4个",Toast.LENGTH_SHORT).show();                break;        }        return super.onOptionsItemSelected(item);    }}

来看看运行效果

很难看，我们用app:popupTheme这个属性单独将弹出的菜单设成淡色主题就可以了

修改后的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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="toolbar.csdn.com.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/tl_test"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        >    </android.support.v7.widget.Toolbar></LinearLayout>

来一张截图

阅读全文

0 0