Toolbar的使用详细介绍

2017-06-19 1347 Lei 0

Toolbar能够为运行API7和更高版本的安卓设备上提供Matrial Design效果，可以保证不同安卓系统的设备能够尽可能保持一样的用户体验，所以安卓推荐使用Toolbar代替原生操作栏（ActionBar）。但实际上并不是这样的，低版本安卓机仍然体验不到Material Design的效果。

> 添加Toolbar

1.添加支持库

在Android Studio工程的Module的build.gradle中添加对 v7 appcompat的支持，在dependencies中添加如下代码：

compile 'com.android.support:appcompat-v7:25.3.1'

然后点击Sync Now。

2.继承AppCompatActivity

所有使用Toolbar的Activity都继承AppCompatActivity

public class YourActivity extends RayAppcompatActivity{ ... }

3.在res/values/styles.xml中声明如下样式：

因为要使用Toolbar，所以样式要继承自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> 
<style name="MyAppTheme" parent="@style/AppTheme"></style>

4.在AndroidManifest.xml中，给 application添加android:theme为@style/Theme.AppCompat.Light.NoActionBar。这样所有的Activity都将隐藏原生的操作栏。

5.在Activity的布局中添加一个Toolbar。Material Design建议设置4dp的仰角（android:elevation）。

<android.support.v7.widget.Toolbar android:id="@+id/Tb_main" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:background="?attr/colorPrimary" 
    android:elevation="4dp" 
    android:theme="@style/RayWhiteAppTheme"> 
</android.support.v7.widget.Toolbar></span>

layout_height设置为android系统的默认高度?attr/actionBarSize。样式设置为@style/RayWhiteAppTheme。如果要设置其他样式，在res/values/styles.xml中新定义一个样式，然后将Toolbar的android:theme属性设置为该样式，即可更换样式。

6.在Activity的onCreate()方法中将Toolbar设置为应用的操作栏。

@Override 
public onCreate(Bundle savedInstanceState){ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    Toolbar Tb_main = (Toolbar) findViewById(R.id.Tb_main); 
    setSupportActionBar(Tb_main); 
}

经过以上操作可以得到一个如下的操作栏：左图是android 4.4的系统（仰角没有效果，没有沉浸式任务栏），右图是android 5.1的系统（有仰角，沉浸式任务栏）。

> 沉浸式操作栏

以上操作栏在android 5.0及以上系统中是沉浸式任务栏，低版本中并不是沉浸式，并没有扩充到系统任务栏。要在API 19（包含）- API 21（不包含）实现沉浸式操作栏，需要如下操作：

1.在res/values/style-v19中新建styles.xml，并定义：

<style name="MyAppTheme" parent="@style/AppTheme"> 
    <item name="android:windowTranslucentStatus">true</item> 
</style>

样式名字是应用在Toolbar上的样式名字。

android:windowTranslucentStatus属性支持的最低版本为API 19.低于API 19的手机无法实现沉浸式任务栏。

2.设置AndroidManifest.xml中application的android:theme为自己定义的样式：

<application ... android:theme="@style/RayAppTheme">

3.设置Toolbar的android:fitsSystemWindows属性为true，minHeight设置为?attr/actionBarSize，layout_height设置为wrap_content.

<android.support.v7.widget.Toolbar android:id="@+id/Tb_main" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:minHeight="?attr/actionBarSize" 
    android:background="?attr/colorPrimary" 
    android:fitsSystemWindows="true" 
    android:theme="@style/RayAppTheme" 
    android:elevation="4dp"> 
</android.support.v7.widget.Toolbar>

可以看到在android 4.4系统中操作栏变为了如下的样子：

在android 5.1系统中的效果如下：

4.Android 4.4系统下状态栏的颜色并不像Material Design中的沉浸式状态栏一样颜色会比Toolbar更深一些，可以在Activity的onCreate()方法中更改状态栏颜色，暂不提供代码。

> 设置标题

Toolbar设置标题需要在Activity的onCreate()方法中使用如下代码设置：

getSupportActionBar().setTitle("Your Title");

Toolbar默认标题居左，并不能居中显示，如果要设置居中标题，需要在Toolbar中添加一个TextView。

<android.support.v7.widget.Toolbar android:id="@+id/TB_login" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:minHeight="?attr/actionBarSize" 
    android:background="?attr/colorPrimary" 
    android:elevation="4dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/RayWhiteAppTheme"> 
    <TextView android:id="@+id/TV_title"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:textSize="20sp" 
        android:textColor="@color/colorBlack"/> 
</android.support.v7.widget.Toolbar>

然后通过代码给TextView设置文字

getSupportActionBar().setTitle(""); 
TV_title.setText(R.string.verify);

> 设置导航按钮

1.Toolbar可以设置返回按钮。如果该页面一定是从某一个指定的页面跳转而来，可以在AndroidManifest.xml中做如下设置：

<activity android:name=".ThisActivity" 
    android:parentActivityName=".MainActivity"> 
</activity>

指定该Activity的parentActivity。上面的声明说明ThisActivity是可以从MainActivity跳转打开的。

2.在Activity的onCreate()方法中执行以下代码：

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

这样就可以实现Toolbar的导航。

3.如果该页面可能会从不同的页面跳转而来，而且要求点击导航按钮跳转到前一个页面。就不能通过指定parentActivity的方法来设置返回按钮，而是需要在Activity的onCreate()方法中做如下处理：

Toolbar TB_login = (Toolbar) findViewById(R.id.TB_login); 
TB_login.setNavigationOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View v) { 
        finish(); 
    } 
});

>其他设置


Toolbar Actionbar
  0