自定义工具栏在 backArrow 和标题之间添加 imageView

Question

我有一个聊天应用程序，在聊天室内我想使用自定义工具栏。这样做的原因是因为我需要显示（从左到右的顺序）

后退箭头按钮
头像为 ImageView
下面有标题和副标题
右侧的选项菜单

我的问题是 2（头像），因为我不知道如何将它放在后退箭头和 title/subtitle

之间

我的聊天室xml是

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/chatRoomAppBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/chatRoomToolBar"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                app:contentInsetEnd="8dp"
                app:contentInsetRight="8dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            // avatar example
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginStart="16dp"
                android:src="@drawable/ic_person"
                app:layout_constraintBottom_toBottomOf="@+id/chatRoomToolBar"
                app:layout_constraintStart_toStartOf="@+id/chatRoomToolBar"
                app:layout_constraintTop_toTopOf="@+id/chatRoomToolBar"
                app:tint="@color/colorAlert" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.appbar.AppBarLayout>


    .....
   </androidx.constraintlayout.widget.ConstraintLayout>

在 ChatRoomActivity 的 onCreate 中，我执行以下操作

@SuppressLint("InflateParams")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_room)
        setSupportActionBar(chatRoomToolBar)

        supportActionBar?.apply {
            setDisplayShowHomeEnabled(true)
            setDisplayHomeAsUpEnabled(true)
        }
....
}

问题是头像和后退箭头正好在同一个位置，互相遮挡。我尝试使用 setIcon() 方法，但我无法将视图作为参数加载，而只能加载可绘制对象，此外我无法将其放置在我想要的任何位置

我该怎么做？

Answer 1

使 NoActionbar 成为您的风格或主题。

然后创建一个布局文件说 toolbar.xml

<androidx.appcompat.widget.Toolbar 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:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?attr/actionBarSize">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

     <ImageView
        android:id="@+id/img"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_gravity="end"
        android:layout_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/YOUR_DRAWABLE" />

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginTop="2dp"
        android:gravity="center_vertical"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@id/img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>

现在将此工具栏添加到您的布局中

<YOUR_ROOT_LAYOUT xmlns:.................>

     <include  id="@+id/my_toolbar"
        layout="@layout/toolbar"/>   ----> this is toolbar.xml 
  
</YOUR_ROOT_LAYOUT>

然后在您的 activity 设置工具栏中

androidx.appcompat.widget.Toolbar mToolbar = findViewById(R.id.my_toolbar);
        TextView title = findViewById(R.id.text);
        ImageView img = findViewById(R.id.img);
        img.setImageDrawable(YOUR_DRAWABLE);
        title.setText("YOUR_TITLE");
        setSupportActionBar(mToolbar);

自定义工具栏在 backArrow 和标题之间添加 imageView

Custom Toolbar add imageView between backArrow and title

android

avatar

android-actionbar

android-toolbar

android-constraintlayout