写一个Toolbar练练手

最新推荐文章于 2024-09-14 15:55:09 发布

非秃头程序员

最新推荐文章于 2024-09-14 15:55:09 发布

阅读量216

点赞数

分类专栏： android进阶文章标签： android android开发设计

本文链接：https://blog.csdn.net/happy1223247773/article/details/78654162

版权

android进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习系统的控件是Android开发的基础，我想在学习的过程中顺便写一些博客，以此来增加自己的印象。
Toolbar是随material design一起发布的，Google为了方便和规范应用标题栏的开发和替换Actionbar而推出（据说Actionbar很多坑，本人入行晚，没在项目中使用），所以为了兼容低版本的系统需要使用V7包；在APP的gradle 使用如下代码添加依赖：

implementation 'com.android.support:appcompat-v7:26.1.0'//
compile 'com.android.support:palette-v7:26.1.0'//用于提取颜色
compile 'com.android.support:design:26.1.0'

然后在layout引用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/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>

这里使用了两个Toolbar的属性popupTheme和theme，分别是设置右边菜单的Theme和Toolbar的主theme。
然后还可以在style配置Toolbar的背景颜色和search的主题颜色

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">  

        <!-- toolbar（actionbar）颜色 -->  
        <item name="colorPrimary">#4876FF</item>  
        <!-- 状态栏颜色 -->  
        <item name="colorPrimaryDark">#3A5FCD</item>  
        <!-- 窗口的背景颜色 -->  
        <item name="android:windowBackground">@android:color/white</item>  
        <!-- SearchView -->  
        <item name="searchViewStyle">@style/MySearchViewStyle</item>  
    </style>

为了表现一下material design的强大，我这里引入DrawerLayout，DrawerLayout是用于侧滑菜单：


    <android.support.v4.widget.DrawerLayout
        android:id="@+id/id_drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--内容界面-->
        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="@mipmap/mm">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="内容"
                android:textColor="@android:color/white"/>
        </LinearLayout>
        <!--侧或菜单界面-->
        <LinearLayout
            android:id="@+id/ll_tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/slt11"
            android:orientation="vertical"
            android:layout_gravity="start">
            <TextView
                android:id="@+id/tv_close"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:clickable="true"
                android:text="侧滑界面,点击收回侧滑"
                android:textColor="@android:color/white"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>

接下来开始写Activity的Java代码，

   private DrawerLayout mDrawerLayout;
    private LinearLayout llContent;
    private LinearLayout llTabs;
    private TextView tvClose;
    private Toolbar mToolbar;
    private ActionBarDrawerToggle mDrawerToggle;

    private void assignViews() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerlayout);
        llContent = (LinearLayout) findViewById(R.id.ll_content);
        llTabs = (LinearLayout) findViewById(R.id.ll_tabs);
        tvClose = (TextView) findViewById(R.id.tv_close);
        mToolbar= (Toolbar) this.findViewById(R.id.toolbar);

        mToolbar.setTitle("Title");
        mToolbar.setTitleTextColor(Color.parseColor("#ffffff"));
        setSupportActionBar(mToolbar);
        //是否给左上角图标的左边加上一个返回的图标
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher_round);//设置logo图片

        //设置右边菜单的点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_settings:
                        Toast.makeText(MyToolbarActivity.this, "设置", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_share:
                        Toast.makeText(MyToolbarActivity.this, "分享事件", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return true;
            }


        });

        //设置侧或布局
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
                R.string.drawer_close);
        mDrawerToggle.syncState();
        mDrawerLayout.addDrawerListener(mDrawerToggle);//设置点击左边按钮打开侧边栏
        tvClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            }
        });
    }

Toolbar还有一些api我没用到的，如下

//        mToolbar.setTitle("ToolBar Title");//设置标题
//        mToolbar.setSubtitle("This is subtitle");//设置子标题
//        mToolbar.setTitleTextColor(Color.parseColor("#ff0000"));//设置标题颜色
//        mToolbar.setLogo(R.drawable.ic_launcher);
//        mToolbar.setNavigationIcon(drawable);//设置导航按钮

看到这里你可能会想，刚才不是还有个palette吗？这是干嘛的呀？接下来就要到它上场了。
Palete是用来提取颜色，从而让主题能够动态适应当前界面的色调，做到整个App颜色的颜色基调和谐统一。
比如我的内容主要是一个ImageView，那我就取ImageView的主色调来设置给Toolbar。代码如下：

    private void setPatette() {
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.mm);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch swatch=palette.getVibrantSwatch();
                getSupportActionBar().setBackgroundDrawable(new ColorDrawable(swatch.getRgb()));

            }
        });
    }

写了这么多，把效果图放上瞧瞧
这里写图片描述

一般人可能会发现，有一个菜单，那个这个菜单的内容哪里来的？怎么写事件？接下来就写右边三个控件的写法。在res下面建一个menu目录，然后建一个main.xml，xml里面的代码如下：

<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=".MyToolbarActivity" >
    <item
        android:id="@+id/ab_search"
        android:orderInCategory="80"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="分享"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="设置一"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_s"
        android:orderInCategory="100"
        android:title="设置二"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_setti"
        android:orderInCategory="100"
        android:title="设置三"
        app:showAsAction="never"/>
</menu>

这里主要知识点是showAsAction，ifRoom表示当Toolbar还有空位时，就不显示在后面菜单中，never表示它永远显示在菜单中。然后在Java代码里面设置menu：

   @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

前面已经写了一个事件了，我们也可以重写onOptionsItemSelected方法来监听menu的事件：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
//                Toast.makeText(MyToolbarActivity.this, "设置", Toast.LENGTH_SHORT).show();
               startActivity( new Intent(this,MyTabLayoutActivity.class));
                break;
            case R.id.action_share:
                Toast.makeText(MyToolbarActivity.this, "分享事件", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }