写一个Toolbar练练手

来源：互联网发布：js 并且和或者编辑：程序博客网时间：2024/04/27 15:34

学习系统的控件是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;    }

Toolbar常用的内容就写完了，还有很多api没写到的可以查看官方的api文档。下面附上demo源码：
https://github.com/happyan/DemoBlog

阅读全文

0 0