《进阶之光》笔记(4)—— Toolbar与Palette-优快云博客

本文详细介绍了在Android开发中如何使用Toolbar和Palette组件来增强应用界面的视觉效果。通过实例展示了如何设置Toolbar作为应用的顶部栏，并利用Palette从图片中提取颜色，以实现界面颜色的动态适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.zjw.chapter1androidnewcharacteridtics;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

//1.1.5 p23 Toolbar与Palette
/*关于Palette使用可参考http://blog.youkuaiyun.com/lablenet/article/details/52340634
Palette是用来提取颜色的，能够动态适应界面的色调，能使基调和谐统一
依赖：compile 'com.android.support:palette-v7:25.3.1'
几种色调种类：
                //1.活力颜色
                Palette.Swatch a = palette.getVibrantSwatch();
                 //2.亮的活力颜色
                Palette.Swatch b=palette.getLightVibrantSwatch();
                 //3.暗的活力颜色
                Palette.Swatch c = palette.getDarkVibrantSwatch();
                //4.柔色
                Palette.Swatch d = palette.getMutedSwatch();
                //5.亮的柔色
                Palette.Swatch e = palette.getLightMutedSwatch();
                 //6.暗的柔色
                Palette.Swatch f = palette.getDarkMutedSwatch();
 */
public class MainActivity extends AppCompatActivity {

    //黄油刀一次找齐控件
    @BindView(R.id.tb)
    Toolbar mTb;
    @BindView(R.id.ll_content)
    LinearLayout mLlContent;
    @BindView(R.id.tv_close)
    TextView mTvClose;
    @BindView(R.id.ll_menu)
    LinearLayout mLlMenu;
    @BindView(R.id.dl)
    DrawerLayout mDl;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);//黄油刀绑定

        setSupportActionBar(mTb);
        final ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setLogo(R.mipmap.ic_launcher);

        //设置背景色
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch swatch=palette.getVibrantSwatch();
                actionBar.setBackgroundDrawable(new ColorDrawable(swatch.getRgb()));
            }
        });

        //DrawerLayout、Toolbar联动
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDl,mTb,R.string.draw_open, R.string.draw_close);
        toggle.syncState();//该方法会自动和actionBar关联, 将开关的图片显示在了action上，如果不设置，也可以有抽屉的效果，不过是默认的图标  
        mDl.addDrawerListener(toggle);

        //点击监听
        mTb.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.it2://这玩意吐司没反应，然而书上是这么写的，应该是用了系统控件问题
                        Toast.makeText(MainActivity.this, "1", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.it3:
                        Toast.makeText(MainActivity.this, "2", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return true;
            }
        });

    }

    @OnClick({R.id.tv_close, R.id.ll_menu})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.tv_close://侧滑菜单打开后点击关闭
                mDl.closeDrawer(GravityCompat.START);
                break;
        }
    }

    //加载menu布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

主布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zjw.chapter1androidnewcharacteridtics.MainActivity">

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/dl"
        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:background="@mipmap/ic_launcher_round"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="内容界面"/>

        </LinearLayout>

        <!--菜单-->
        <LinearLayout
            android:id="@+id/ll_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/ic_launcher"
            android:layout_gravity="start"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_close"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:clickable="true"
                android:text="菜单界面"/>

        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

include进去的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/tb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:minHeight="?attr/actionBarSize">

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

toolbar的menu菜单item：

<?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/it1"
        android:orderInCategory="80"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"/>
    <item
        android:id="@+id/it2"
        android:orderInCategory="90"
        android:title="分享"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/it3"
        android:orderInCategory="100"
        android:title="设置"
        app:showAsAction="never"/>
</menu>

便于直接复制粘贴的依赖：

compile 'com.jakewharton:butterknife:8.6.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.6.0'
compile 'com.android.support:palette-v7:25.3.1'
compile 'com.mcxiaoke.volley:library:1.0.19'

转载于:https://my.oschina.net/u/3620480/blog/1523829