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

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 会出现在左侧，而第一个出现在右侧，这不是我想要的。

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

Answer 1

试试这个，

Change LinearLayout to RelativeLayout and also remove spacing from left side of Toolbar by 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

Aligning two imageviews properly in custom toolbar - android

android

android-imageview

android-toolbar