Toolbar的使用详细介绍
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(); } });
>其他设置