Toolbar自定义样式，别致的布局，可复用

最新推荐文章于 2025-02-07 23:07:37 发布

原创最新推荐文章于 2025-02-07 23:07:37 发布 · 6.6k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

知识集锦

本文详细介绍了如何自定义Android的Toolbar，展示在实现过程中遇到的问题及解决方案，提供前后效果对比，并附上完整代码，帮助开发者创建可复用的别致布局。

前言

昨天，偶然了解到官方提供在support.v7里面的Toolbar，带着好奇、兴奋的心态开始了一段“撸程”

，下面就是填坑的节奏，说好的幸福呢

遇到的那些坑

1、自定义toolbar_layout布局的时候，没有提示layout_gravity属性（因为设置的Title要居中），在类里面也没有这个View id的提示；

2、action bar都是图片View，怎么去动态的改变它的icon呢，从而使这个Toolbar更加可重复利用。（图片模糊请见谅）

效果图：（前后对照）

代码

导包

<span style="font-size:18px;">compile 'com.android.support:appcompat-v7:22.1.0'</span>

主题样式：styles.xml

<span style="font-size:18px;"><style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">false</item>
    </style>

    <!--<color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#FFFFFF</color>--></span>

自定义布局：toolbar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="20sp" />

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

菜单部分，res/menu/toolbar_menu.xml

<?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/action_share"
        android:icon="@mipmap/ic_launcher"
        android:title="分享"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_commit"
        android:title="完成"
        app:showAsAction="ifRoom"/>
</menu>

界面:activity_main.xml直接<include layout="@layout/toolbar_layout"/>，下面是MainActivity.java

package com.example.jekin.toolbar;

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initToolbar();
    }

    private void initToolbar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        TextView titleText = (TextView) findViewById(R.id.toolbar_title);
        toolbar.setTitle("");
        titleText.setText("佳琪卫浴");
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                Toast.makeText(this, "返回", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.action_share:
                Toast.makeText(this, "分享", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.action_commit:
                Toast.makeText(this, "完成", Toast.LENGTH_SHORT).show();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.toolbar_menu, menu);

        MenuItem commitItem = menu.findItem(R.id.action_commit);
        commitItem.setTitle("完成");
        MenuItem shareItem = menu.findItem(R.id.action_share);
        shareItem.setIcon(R.mipmap.show_share_icon);
        return true;
    }
}

总结

第一个问题解决方法就是直接敲，个人也不知道为什么as没有提示。第二呢，可以查看MenuItem类里面有setIcon方法...有问题请多多指教，吃饭去了

补充

发现个问题，就是定义menu的时候，里面有个title的属性，如果长按此控件就会提示title里面的内容，去掉的方法：

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        new Handler().post(new Runnable() {
            @Override
            public void run() {
                final View v = findViewById(R.id.action_share);

                if (v != null) {
                    v.setOnLongClickListener(new View.OnLongClickListener() {
                        @Override
                        public boolean onLongClick(View v) {
                            return false;
                        }
                    });
                }
            }
        });
        return true;
    }

标签

#Toolbar #ActionBar