Cooperation.GTST团队第二周项目总结

项目进展

这周我们把工作主要放在了UI界面的实现上，为了让整款APP看上去能够更加高大上，我们决定采用Android 5.0开始推出的一个Material Design风格的导航控件Toolbar。
现在越来越多的开发者使用Toolbar来作为Android客户端的导航栏，以此来取代之前的Actionbar。与Actionbar相比，Toolbar明显要灵活的多。它不像Actionbar一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计Toolbar的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

由于我们小组之前没有开发过APP，所以一开始对于UI界面的实现在网上搜集了大量的资料，并且花了很大功夫去探究Android Studio的功能，后来根据网上的一些资料大概能实现Toolbar的功能：
首先，在布局文件activity_tool_bar.xml中添加进我们需要的 Toolbar控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da">

        <!--自定义控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock" />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

接着在base_toolbar_menu.xml中添加action menu菜单项

<?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/action_search"
        android:icon="@mipmap/ic_search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="@string/item_01"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="@string/item_02"
        app:showAsAction="never" />
</menu>

最后到ToolbarActivity中调用代码拿到这Toolbar控件，并在代码中做各种set操作

public class ToolBarActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
        toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
        toolbar.setTitle("Title");//设置主标题
        toolbar.setSubtitle("Subtitle");//设置子标题

        toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int menuItemId = item.getItemId();
                if (menuItemId == R.id.action_search) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_notification) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item1) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item2) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();

                }
                return true;
            }
        });

    }

}

Toolbar的基本使用如上所示，此外如果想修改标题和子标题的字体大小、颜色等，可以调用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance这些API。
如图所示，这是实现Toolbar代码的基本结构：

layout和menu文件夹分别是两个Activity的布局文件和actionmenu菜单文件，values、values-v19、values-v21 中包含了一些自定义的theme。

代码托管截图：

总结

自从Material Design设计开始推出后，Google推出的这些新控件使用起来更加简单，这能让我们更好的把精力放在编写业务代码上。很多以前需要借助第三方开源库才能实现的效果，现在已经慢慢的不需要了。当然，我们依旧可以去深入的学习这些优秀开源代码，沉淀到更多的干货。这样，小菜也就慢慢成为大牛了。

秒客网

Cooperation.GTST团队第二周项目总结

项目进展

总结

相关文章