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>        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">        -- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary        "colorPrimaryDark">@color/colorPrimaryDark        "colorAccent">@color/colorAccent    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"   >    <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的滑动菜单功能。

更多相关文章

随机推荐