Android开发新手求助：如何在Toolbar中添加头像与搜索栏

嘿，刚入门Android开发就遇到Toolbar的小坎儿太正常啦！我当初第一次自定义Toolbar也卡了好一会儿，不过别担心，带头像和搜索栏的Toolbar实现起来其实挺清晰的，咱们一步步来搞定它～

第一步：先给应用配置正确的主题 #

首先得确保你的App主题是不带默认ActionBar的，不然会和咱们自定义的Toolbar冲突。打开res/values/styles.xml，把主题改成类似这样：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 其他主题配置 -->
    <item name="colorPrimary">@color/your_primary_color</item>
    <item name="colorPrimaryDark">@color/your_primary_dark_color</item>
    <item name="colorAccent">@color/your_accent_color</item>
</style>

第二步：自定义Toolbar的布局文件 #

咱们需要创建一个单独的布局文件来定义Toolbar里的内容（搜索栏+头像），比如命名为toolbar_custom.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:contentInsetStart="0dp"> <!-- 去掉默认的左边内边距，让内容更紧凑 -->

    <!-- 搜索栏，这里用SearchView，你也可以换成EditText -->
    <androidx.appcompat.widget.SearchView
        android:id="@+id/toolbar_search_view"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/search_bg" <!-- 可以自定义搜索栏背景 -->
        android:queryHint="搜索..."
        app:iconifiedByDefault="false" /> <!-- 默认展开搜索栏 -->

    <!-- 头像ImageView -->
    <ImageView
        android:id="@+id/toolbar_avatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:src="@drawable/avatar_default" <!-- 替换成你的头像资源 -->
        android:scaleType="centerCrop"
        android:background="@drawable/avatar_circle_bg" /> <!-- 圆形背景，让头像变成圆形 -->

</androidx.appcompat.widget.Toolbar>

这里提醒几个小细节：

• 用layout_weight="1"让搜索栏占满Toolbar的剩余空间
• app:contentInsetStart="0dp"可以去掉Toolbar默认的左边内边距，避免内容偏右
• 头像加个圆形背景会更美观，你可以自己定义一个圆形drawable

第三步：在Activity中初始化Toolbar #

接下来在你的Activity布局里引入这个自定义Toolbar，比如activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 引入自定义Toolbar -->
    <include layout="@layout/toolbar_custom" />

    <!-- 你的其他布局内容 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- ... -->
    </FrameLayout>

</LinearLayout>

然后在Activity的代码里初始化并设置Toolbar，同时处理搜索和头像的点击事件：

Kotlin版本： #

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.SearchView
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.toolbar_custom.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 设置Toolbar作为ActionBar
        setSupportActionBar(custom_toolbar)
        // 隐藏默认的标题文字
        supportActionBar?.setDisplayShowTitleEnabled(false)

        // 处理搜索栏的搜索事件
        toolbar_search_view.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String?): Boolean {
                // 这里写搜索提交后的逻辑，比如发起搜索请求
                query?.let {
                    // do something with search query
                }
                return true
            }

            override fun onQueryTextChange(newText: String?): Boolean {
                // 实时搜索的逻辑，比如根据输入过滤内容
                return true
            }
        })

        // 处理头像的点击事件
        toolbar_avatar.setOnClickListener {
            // 这里写头像点击后的逻辑，比如打开个人中心页面
        }
    }
}

Java版本： #

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SearchView;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

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

        androidx.appcompat.widget.Toolbar customToolbar = findViewById(R.id.custom_toolbar);
        setSupportActionBar(customToolbar);
        // 隐藏默认标题
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayShowTitleEnabled(false);
        }

        SearchView searchView = findViewById(R.id.toolbar_search_view);
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // 搜索提交逻辑
                return true;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // 实时搜索逻辑
                return true;
            }
        });

        ImageView avatar = findViewById(R.id.toolbar_avatar);
        avatar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 头像点击逻辑
            }
        });
    }
}

一些额外的小技巧 #

• 如果想让搜索栏样式更统一，可以自定义SearchView的样式，比如修改输入框颜色、提示文字颜色等
• 头像可以用Glide或者Picasso加载网络图片，这样更灵活
• 如果需要在Fragment里使用这个Toolbar，只需要在Fragment里获取Toolbar实例，然后调用((AppCompatActivity)getActivity()).setSupportActionBar(toolbar)即可

这样一套下来，你就能得到一个完美的带头像和搜索栏的Toolbar啦！如果还有细节问题，比如样式调整、事件处理，随时再问～

内容的提问来源于stack exchange，提问作者Umair