Android自定义工具栏（二）——试试Toolbar

最新推荐文章于 2023-11-03 17:08:49 发布

原创最新推荐文章于 2023-11-03 17:08:49 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Toolbar #自定义工具栏

Android应用专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Android中自定义Toolbar，包括将Overflow图标由圆点改为方点，调整菜单弹出位置，以及处理隐藏回退按钮后的空隙问题。通过修改style.xml和设置特定属性实现，同时提出了封装自定义Toolbar以应对更多需求的可能性。

接上篇，上篇提到要实现下面这个样子的工具栏：

主要是两个改动：一是把三个小圆点换成三个小方点，还有就是把弹出菜单的位置改到下面。

既然需要用到Toolbar这个组件，首先先在layout里加上下面这段：

    <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="@dimen/toolbar_height"
                                       android:background="@color/colorBackground"
                                       app:contentInsetStart="0dp">
        <TextView
                android:id="@+id/toolbar_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorWhite"
                android:textSize="20sp"
                android:text="Hit me"/>
    </android.support.v7.widget.Toolbar>

然后在onCreate()里调用一个initToolbar()方法：

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        // set toolbar title as empty
        toolbar.setTitle("");
        // set toolbar
        setSupportActionBar(toolbar);
        // set menu icon
        Drawable menuIcon = zoomDrawable(getDrawable(R.drawable.menu),
                getResources().getDimension(R.dimen.toolbar_menu_icon_width),
                getResources().getDimension(R.dimen.toolbar_menu_icon_height));
        toolbar.setOverflowIcon(menuIcon);
        // set back navigation icon and click listener
        Drawable navigationIcon = zoomDrawable(getDrawable(R.drawable.back_arrow),
                                getResources().getDimension(R.dimen.toolbar_navi_icon_width),
                                getResources().getDimension(R.dimen.toolbar_navi_icon_height));
        toolbar.setNavigationIcon(navigationIcon);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        // set toolbar text click listener
        TextView text = (TextView) findViewById(R.id.toolbar_text);
        text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Hit me!", Toast.LENGTH_SHORT).show();
            }
        });
    }

首先找到Toolbar这个view，然后通过setSupportActionBar()设置生效。

Toolbar确实比ActionBar灵活很多，可以通过setOverflowIcon()设置overflow菜单的图案，也可以通过setNavigationIcon()方法设置回退按钮的图案，还有回退按钮点击后的响应。但是发现一个问题，UX给的overflow菜单的图片太大了，显示出来非常难看，但是又没有办法配置view的size，最后没办法只能自己写个位图缩放的方法来解决这个问题了。。。

    private Drawable zoomDrawable(Drawable drawable, float w, float h) {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap oldBmp = drawableToBitmap(drawable);
        Matrix matrix = new Matrix();
        float scaleWidth = (w / width);
        float scaleHeight = (h / height);
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap newBmp = Bitmap.createBitmap(oldBmp, 0, 0, width, height,
                matrix, true);
        return new BitmapDrawable(null, newBmp);
    }

    private Bitmap drawableToBitmap(Drawable drawable) {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap.Config config = drawable.getOpacity() != PixelFormat.OPAQUE
                ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565;
        Bitmap bitmap = Bitmap.createBitmap(width, height, config);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);
        return bitmap;
    }

下面再看一看修改弹出菜单位置的问题，这个可以通过修改res/values/style.xml实现：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionOverflowMenuStyle">@style/overflowMenuStyle</item>
    </style>

    <style name="overflowMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
        <item name="android:overlapAnchor">false</item>
        <item name="android:dropDownWidth">wrap_content</item>
        <item name="android:dropDownVerticalOffset">18dp</item>
        <item name="android:dropDownHorizontalOffset">-10dp</item>
    </style>
</resources>

首先写一个自定义的overflowMenuStyle，继承自Widget.AppCompat.Light.PopupMenu.Overflow。然后调整一下下面4个配置：