ToolBar的title居中以及一些注意事项

标签： androidToolBartitle居中注意事项

2015-12-03 12:39 18414人阅读 评论(5) 收藏 举报

 分类：

【Android常用知识点】（61） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

一、居中方法

Android自带的toolbar有设置title的功能，但是设置的title都是居左的，但是很多需求都是要title居中，主要的方法就是：不使用setTitle，而是在toolBar的xml定义中插入一个TextView，然后设置其layout_gravity为center，它就在正中间了。。

1、定义toolbar的xml文件

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"    android:background="@color/primary">    <TextView        android:id="@+id/toolbar_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:singleLine="true"        android:textColor="@color/white"        android:textSize="20sp" /></android.support.v7.widget.Toolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

具体代码中使用toolbar

public Toolbar initToolbar(int id, int titleId, int titleString) {        Toolbar toolbar = (Toolbar) findViewById(id);//        toolbar.setTitle("");        TextView textView = (TextView) findViewById(titleId);        textView.setText(titleString);        setSupportActionBar(toolbar);        android.support.v7.app.ActionBar actionBar = getSupportActionBar();        if (actionBar != null){            actionBar.setDisplayHomeAsUpEnabled(true);            actionBar.setDisplayShowTitleEnabled(false);        }        return toolbar;    }
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

3、修改toolbar的返回按钮图标

在toolbar里面添加如下几句话，

    xmlns:app="http://schemas.android.com/apk/res-auto"    app:navigationIcon="@drawable/navigationIcon"    android:navigationIcon="@drawable/navigationIcon"
1
2
3
1
2
3

全部xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"    xmlns:app="http://schemas.android.com/apk/res-auto"    app:navigationIcon="@drawable/navigationIcon"    android:navigationIcon="@drawable/navigationIcon"    android:background="@color/primary">    <TextView        android:id="@+id/toolbar_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:singleLine="true"        android:textColor="@color/white"        android:textSize="20sp" /></android.support.v7.widget.Toolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果 
 
4、修改一些属性

<!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/primary</item>        <item name="colorPrimaryDark">@color/primary_dark</item>        <item name="android:textColorPrimary">@color/white</item>        <item name="colorAccent">@color/primary</item>        <!-- Toolbar Theme / Apply white arrow -->        <item name="colorControlNormal">@android:color/white</item>        <!--Navigation icon颜色设置-->        <item name="drawerArrowStyle">@style/AppTheme.MyDrawerArrowStyle</item>    </style>    <!--加入一個新的 navigation drarwer 的風格-->    <style name="AppTheme.MyDrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">        <!--將 spinBars 屬性設定為 false-->        <item name="spinBars">false</item>        <!--設定 drawer arrow 的顏色-->        <item name="color">@android:color/white</item>    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下： 

二、注意事项

这些方法很简单，网上的处理一大推，这边主要讲解的是一些注意事项。 
1、定义toolbar的时候，尽量使用

    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"
1
2
3
1
2
3

而不是

    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"
1
2
1
2

因为当toolbar里面的textView的字体太大的时候，第一种方法能够包裹住，而第二种方法字体就会显示不全。如下图所示

这是使用第一种方法的： 
 
这是使用第二种方法的： 

2、textview尽量使用android:singleLine="true"这个不解释了。

3、让原始的toolbar的title不显示，可以使用

actionBar.setDisplayShowTitleEnabled(false);
1
1

或者

toolbar.setTitle("");
1
1

4、TextView尽量直接包在ToolBar下面，布局使用android:layout_gravity="center"

如果TextView还在另外一个布局里面，例如：

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="?attr/actionBarSize"    android:background="@color/primary">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <TextView            android:id="@+id/toolbar_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:layout_gravity="center"            android:singleLine="true"            android:textColor="@color/white"            android:textSize="20sp" />    </RelativeLayout></android.support.v7.widget.Toolbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

则title会减去toolbar那个返回按钮的宽度再让title居中，效果会是这样的： 
 
就是不居中了。