Material Design实战之ToolBar

在UI方面，android之前一直不如于ios，但是有一天android拥有了一把神器之后，它就忌惮于ios了，这把神器就叫做Material Design。所有作为一名优秀的android的工程师，我们也必须打造并拥有这把神器。这里就让我们一起学习使用它吧。我们就把这次修炼命名为：Materia Design-最佳的UI体验
一、第一个Material控件-ToolBar
这个控件和我们之前一直使用的ActionBar很相似。由于ActionBar的设计原因，被限定在活动顶部，从而不能实现一些Material Design效果，所以官方现在都不建议使用ActionBar,取而代之的是ToolBar。
所以在开始之前我们要先取消ActionBar的功能：
把app主题更改一下：将style.xml文件的APPTheme修改一下【parent=”Theme.AppCompat.Light.NoActionBar” 】顾名思义NoActionBar没有ActionBar

<resources>
    <!-- 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>
</resources>

这样我们就将ActionBar隐藏起来了，接下来我们要看看如何使用ToolBar替代ActionBar，先修改一下主布局代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <!-- app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  将弹出的菜单项指定成淡色主题-->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >
</android.support.v7.widget.Toolbar>
</FrameLayout>

这段代码里面有个
app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”
我们指定了一个命名空间 xmlns:app ，因为Material Design在Android5.0才出现的，为了兼容老系统，所以不能使用android：attribute的写法了。
之后我们来修改一下MainActivity的代码来显示ToolBar效果：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
        //取代原本的actionbar
        setSupportActionBar(toolbar);
        //添加副标题
        toolbar.setSubtitle("哈哈");
    }
}

基本的ToolBar功能我们已经会了，现在我们来学习一些常见的功能，比如添加一些action的按钮让ToolBar更加丰富一些：
我们在res目录下创建一个menu文件夹，然后在其里面创建一个toolbar.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/ic_backup"
    android:icon="@drawable/ic_back"
    android:title="后退一步"
    app:showAsAction="always"
   />
    <item android:id="@+id/ic_restart"
        android:icon="@drawable/share"
        android:title="重新游戏"
        app:showAsAction="ifRoom"
        />
    <item android:id="@+id/ic_exit"
        android:icon="@drawable/ic_home"
        android:title="退出游戏"
        app:showAsAction="never"
        />
</menu>

android:icon 按钮的图标
android:title 按钮的标题
app:showAsAction 按钮的显示方式（always 一直显示，ifRoom 空间够的话就显示 never 不显示）

最后一步，再次修改MainActivity代码实现标题栏上的按钮点击事件：

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.ic_backup:
                Toast.makeText(this, "后退一步", Toast.LENGTH_SHORT).show();
                break;
            case R.id.ic_restart:
                Toast.makeText(this, "重新游戏", Toast.LENGTH_SHORT).show();
                break;
            case R.id.ic_exit:
                Toast.makeText(this, "退出游戏", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

这里我们可以暂时休息一会了，简单的ToolBar就此结束…
来看一下运行结果：
这里写图片描述
还有一些详细的ToolBar功能请参考这篇博客：http://blog.csdn.net/mchenys/article/details/51533689
下次我们继续Material Design的滑动菜单功能。

Material Design实战之ToolBar

猜你喜欢