Toolbar的使用详细介绍

2017-06-19 · 🙈Ray · 0条 · 324次

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(); 
    } 
});

>其他设置



  0