关闭

Android Toolbar 开发实践总结

236人阅读 评论(0) 收藏 举报
分类:

初识 Toolbar

              Toolbar 是 Android 5.0 开始推出的一个 Material Design 风格的导航控件,Google非常推荐使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 ActionBar。与Actionbar 相比,Toolbar 显的要灵活很多,它不同于 Actionbar 一样,一定要固定在 Activity的顶端,而是可以放在界面的任意位置。Google 在设计Toolbar 的时候也给开发者留下了很多可定制的空间。

               这些课定制的API 如下:  

  • 设置导航栏图标;
  • 设置App的logo;
  • 支持设置标题和子标题;
  • 支持添加一个或多个的自定义控件;
  • 支持Action Menu;
Android开发:最详细的 Toolbar 开发实践总结


开始使用 Toolbar

              Toolbar 是 Android 5.0 才开始使用,Google为了将这个设计向下兼容,自然需要推出兼容版的 Toolbar 。项目工程中需要引入appcompat-v7 的兼容包,
      compile 'com.android.support:appcompat-v7:23.4.0'

              接下来研究 Toolbar的结构


  • ToolbarActivity 包含了 Toolbar 的一些基本使用,
  • layout和menu文件夹分别是上面提到的两个Activity的布局文件 和 actionmenu 菜单文件。
  • values中包含了一些自定义的 theme,后面用到的时候会顺带讲解。

接下来我们来看下 Toolbar 效果,这里是结合 DrawerLayout  抽屉菜单使用效果如下图。


效果图中,从左到右分别使用到了:导航栏图标,APP的Long,标题、副标题、搜索框,分享,以及ActionMenu。接下来我们来了解布局文件


首先来看在布局文件中,toolbar.xml   也就是我们所使用的  android.support.v7.widget.Toolbar 控件布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >

</android.support.v7.widget.Toolbar>

 

注意事项:

         Toolbar  这个控件需要引入自定义属性声明,相当于我们自定义控件的时候要引入自定义属性声明,下面这行代码必不可少,

          xmlns:app="http://schemas.android.com/apk/res-auto"

         否者引入的属性: app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 就会出现异常


接着来了解 Toolbar 中那些菜单选项,这里引入的是系统提供的一些菜单选项,代码有标注

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >


    <!-- 搜索框 -->
    <item
        android:id="@+id/ab_search"
        android:orderInCategory="80"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>


    <!-- 分享 -->
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>


    <!-- 设置 -->
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="action_settings"
        app:showAsAction="never"/>

</menu>



接下来继续了解我们的首页布局,这里使用到了 android.support.v4.widget.DrawerLayout 控件,这里笔者称它为抽屉菜单,像一个抽屉一样可以拉出来,这个空间用法这里不做详细介绍,有兴趣自己百度。<include layout="@layout/toolbar" /> 这里使用 include 标签引入布局,可以优化布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 内容界面 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_light"
            android:orientation="vertical" >
            <Button
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:text="内容界面"/>
        </LinearLayout>

        <!-- 侧滑菜单内容 必须指定其水平重力 -->
        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical" >
            <Button
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:text="菜单界面"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
 

最后我们来研究 ToolbarActivity 中究竟是如何实现的,代码如下:

public class ToolbarActivity extends ActionBarActivity {

    private Toolbar mToolbar;
    private ShareActionProvider mShareActionProvider;
    private DrawerLayout mDrawerLayout;


    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setLogo(R.mipmap.ic_launcher);

        // 标题的文字需在setSupportActionBar之前,不然会无效
        mToolbar.setTitle("主标题");
        mToolbar.setSubtitle("副标题");
        setSupportActionBar(mToolbar);

        /**
         * 设置是否显示为 Home主页
         *
         * 将此设置为 true  如果选择的  Home主页 返回主页
         */
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //获取侧滑菜单控件
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);


        //关联 Toolbar 和 DrawerLayout
        mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar,
                R.string.abc_action_bar_home_description,
                R.string.abc_action_bar_home_description_format);




        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);



        // 菜单的监听可以在toolbar里设置,
        // 也可通过Activity的onOptionsItemSelected回调方法来处理
        mToolbar.setOnMenuItemClickListener(
                new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_settings:
                                Toast.makeText(ToolbarActivity.this,
                                        "action_settings", Toast.LENGTH_SHORT).show();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_toobar, menu);
        /* ShareActionProvider配置 */
        mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(menu
                .findItem(R.id.action_share));
        Intent intent = new Intent(Intent.ACTION_SEND);
        intent.setType("text/*");
        mShareActionProvider.setShareIntent(intent);
        return super.onCreateOptionsMenu(menu);
    }
}



看到这里以为就万事大吉了嘛!没有还没完呢,接下来提示一下使用过程中遇到的一下问题

        1、在使用  Toolbar 的时候需要先隐藏掉原先的导航栏,这里我采用的是 :

    
   Theme.AppCompat.Light.NoActionBar

         
             还有其他的设置方法,比如:

              supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏(注意,继承AppCompatActivity 可以这样使用,

              如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) );


            样式布局文件如下:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorAccent">@color/colorAccent</item>


        <!-- toolbar 颜色 -->
        <item name="colorPrimary">#4876FF</item>

        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">#3A5FCD</item>

        <!-- 窗口背景颜色 -->
        <item name="android:windowBackground">@android:color/white</item>

      <item name="searchViewStyle">@style/MySerachView</item>
    </style>

    <style name="MySerachView" parent="Widget.AppCompat.SearchView"/>

</resources>

 


       2、如果需要修改标题和副标题的字体大小、颜色、可以调用

             setTitleTextColorsetTitleTextAppearancesetSubtitleTextColorsetSubtitleTextAppearance 这些API;


       3、如果需要自定义View可以在 android.support.v7.widget.Toolbar 控件的布局中嵌入自定义布局,需要注意这里的自定义布局位于titlesubtitleactionmenu 之间,这意味着,如果 titlesubtitle 都在,且 actionmenu选项 太多的时候,留给自定义View的空间就越小;


       对Toolbar的讲解就此为止,后续在学习研究中继续补充。(*^__^*) 嘻嘻……。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13187次
    • 积分:203
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条