美化你的APP——从Toolbar開始

Toolbar是什么

Toolbar是Google在Android 5.0中推出的一款替代ActionBar的View。ActionBar必须得作为Activity内容的一部分，而Toolbar能够放在不论什么层次。

Toolbar比ActionBar支持很多其它的功能，从開始到终点，Toolbar包括以下可选的元素：

- 一个导航button。 能够是一个向前的button、导航菜单button。等等。

- 一个logo图片

- 标题和副标题

- 一个或多个自己定义一View

- 一个menu

以下先以一张图片来介绍一下Toolbar的布局。例如以下：

怎样使用Toolbar

简单使用

如今。我用Android Studio创建一个Module，默认的，它会为我生成一个带Toolbar的Activity，其界面例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMTk0MzEzMzM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="Toolbar" title="">

当中顶部就是ToolBar。

关于使用。有两点须要说明：

1. Activity须要继承自AppCompatActivity，Activity使用没有ActionBar的theme

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }

}

以下是theme主题设置：

android:theme="@style/AppTheme.NoActionBar"

1. 在布局文件里使用Toolbar控件

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?

attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

稍复杂一点使用

以下的使用将显示Toolbar的各个元素。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMTk0MzEzMzM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="Toolbar" title="">

当中从左到右依次为Navigation Icon、App Icon、Title和SubTitle以及菜单。

当中导航图标、应用图标、标题这些既能够在XML中定义。也能够在代码中定义。要让Toolbar支持Menu。能够重写Activity的onCreateContextMenu中载入menu,然后给Toolbar设置一个MenuListener就可以，例如以下：

ublic class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setOnMenuItemClickListener(this);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.action_search:
                Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_add:
                Toast.makeText(this, "Add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_setting:
                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
                break;
        }

        return false;
    }
}

当中假设要想给导航button，添加返回的功能，须要重写onOptionsItemSelected方法，例如以下：

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (item.getItemId() == android.R.id.home) {
            finish();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

Toolbar让标题居中显示

非常多应用，没有使用ActionBar。而是使用了自己定义的Topbar。

使用Toolbar后发现，有些布局可能也无法实现。或者说不好实现，比方说将Title至于Toolbar中间。Toolbar提供了titleMargin属性通过设置Marigin能够达到Title文本居中的效果，只是以下我的方案是在Toolbar中间加入一个TextView。效果例如以下：



当中实现是通过一个ToolbarHelper来实现的，事实上现例如以下：

public class ToolbarHelper {

    public static void addMiddleTitle(Context context, CharSequence title, Toolbar toolbar) {

        TextView textView = new TextView(context);
        textView.setText(title);

        Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER_HORIZONTAL;
        toolbar.addView(textView, params);

    }

}

这样就能够实现一种效果，比方QQ



这样上图中的“动态”两字我们就能够使用Toolbar的title属性。而中间的好友动态就能够通过加入TextView的方式来实现。

至于其它功能，也能够通过Toolbar来加入View来实现。

源代码请见Github