Question

我想使用我的自定义工具栏显示两个ImageView。这是我的自定义工具栏的XML：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <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="?attr/actionBarSize"
        android:background="@color/white"
        app:titleTextColor="@color/colorPrimaryDark">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/cr_logo1"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                />
            <ImageView
                android:id="@+id/action_sos2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/sos_button_copy"

                android:gravity="end"
   />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

我想要第一个ImageView居中（正确显示），第二个ImageView在右边。

使用上述XML将显示第一个ImageView，而不显示第二个。如果我在第二个ImageView之前使用第二个ImageView，则第二个ImageView出现在左侧，而第一个ImageView出现在右侧，这不是我想要的。

如何编写XML，使第一个ImageView（@ + id / tool_bar_backbutton）出现在中间，而第二个ImageView（@ + id / action_sos2）出现在右侧？

Answer 1

尝试一下

将LinearLayout更改为RelativeLayout，并从Toolbar的左侧删除contentInset

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

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <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:contentInsetEnd="0dp"
        android:contentInsetLeft="0dp"
        android:contentInsetRight="0dp"
        android:contentInsetStart="0dp"
        app:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@android:color/white"
        app:titleTextColor="@color/colorPrimaryDark">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp"
                android:src="@drawable/ic_share" />

            <ImageView
                android:id="@+id/action_sos2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:gravity="end"

                android:src="@drawable/ic_eye" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Answer 2

尝试以下代码：

 <?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
xmlns:android="http://schemas.android.com/apk/res/android">
<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="?attr/actionBarSize"
    android:background="@color/white"
    app:titleTextColor="@color/colorPrimaryDark">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:id="@+id/tool_bar_backbutton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/cr_logo1"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            />
        <ImageView
            android:id="@+id/action_sos2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:src="@drawable/sos_button_copy"

  />
    </LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Answer 3

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <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="?attr/actionBarSize"
        android:background="@color/white"
        android:gravity="center"
        app:titleTextColor="@color/colorPrimaryDark">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding_top="5dp"
            android:padding_bottom="5dp"
            android:layoutDirection="ltr"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/sos_button_copy"
                android:visibility="invisible"

                />

            <ImageView
                android:id="@+id/tool_bar_backbutton"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/cr_logo1"
                />


            <ImageView
                android:id="@+id/action_sos2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/sos_button_copy"

                />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

在自定义工具栏中正确对齐两个图像视图-Android

3 个答案: