如何将操作栏中的按钮与导航视图正确对齐

Question

我创建了一个带有两个按钮的操作栏。此 activity 还包含在侧边菜单中。为此，我使用了导航视图。

所以，我的 activity 如下所示，

但实际上我想要它如下（注意 "Cancel" 按钮更靠近导航栏，并且两个按钮都正确对齐），

这是我的操作条码（在布局文件中），

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_target_ranges"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                android:id="@+id/target_ranges_layout_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_cancel_btn"
                    style="@style/ButtonStyle_Med"
                    android:layout_weight="1"
                    android:text="@string/action_cancel" />

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_save_btn"
                    style="@style/ButtonStyle_Med"
                    android:layout_weight="1"
                    android:text="@string/action_save" />

            </LinearLayout>

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

</android.support.design.widget.AppBarLayout>

如何实现？有什么想法吗？

Answer 1

问题是你的Toolbar没有为内部LinearLayout设置重心。您可以通过将 LayoutParams 设置为 LinearLayout 来实现，如下所示：

    Toolbar toolbar = (Toolbar) findViewById(R.id. toolbar_target_ranges);

    LinearLayout toolbarRow = (LinearLayout) toolbar.findViewById(R.id. target_ranges_layout_main);

    toolbarRow.setLayoutParams(new Toolbar.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER));

Answer 2

试试这个，

<?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="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_target_ranges"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
          >

            <LinearLayout
                android:id="@+id/target_ranges_layout_main"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_cancel_btn"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_weight="1"
                    android:text="Cancel"
                    android:layout_marginLeft="40dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <android.support.v7.widget.AppCompatButton
                    android:id="@+id/target_ranges_save_btn"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_weight="1"
                    android:text="Add"
                    android:layout_marginLeft="20dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

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

    </android.support.design.widget.AppBarLayout>


</LinearLayout>

Answer 3

采取 RelativeLayout 并调整您的 Button 而不是 LinearLayout。

 <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_target_ranges"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">

        <RelativeLayout
            android:id="@+id/target_ranges_layout_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/target_ranges_cancel_btn"
                style="@style/ButtonStyle_Med"
                android:text="Cancel"
                android:layout_width="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_alignParentLeft="true"
                android:layout_height="wrap_content" />

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/target_ranges_save_btn"
                style="@style/ButtonStyle_Med"
                android:layout_alignParentRight="true"
                android:text="Save"
                android:layout_marginRight="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </RelativeLayout>

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

</android.support.design.widget.AppBarLayout>

如何将操作栏中的按钮与导航视图正确对齐

How to correctly align buttons in an action bar with a navigation view

xml

android

android-layout

android-toolbar

android-appbarlayout