带有文本的 Android 自定义后退按钮

Question

我想在我的 Android 应用中添加一个操作栏，就像我在 iOS 应用中的操作栏：

.

不幸的是，我不知道如何制作仅包含文本的后退按钮以及如何将标题移动到中心。这将适用于整个应用程序，而不仅仅是一种布局。

有人可以帮帮我吗？

Answer 1

我找到了一个简单的解决方案。

您只需为自定义 ActionBar custom_action_bar_layout.xml 创建一个布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="50dp"
   android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textAllCaps="true"
        android:text="name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/back_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff"
        android:text="Back"/>

</RelativeLayout>

然后在你的ExampleActivity

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

    ActionBar mActionBar = getSupportActionBar();
    mActionBar.setDisplayShowHomeEnabled(false);
    mActionBar.setDisplayShowTitleEnabled(false);
    LayoutInflater mInflater = LayoutInflater.from(this);

    View mCustomView = mInflater.inflate(R.layout.custom_action_bar_layout, null);
    TextView title = (TextView) mCustomView.findViewById(R.id.title_text);
    title.setText("Title");
    TextView backButton = (TextView) mCustomView.findViewById(R.id.back_button);
    backButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            finish();
        }
    });

    mActionBar.setCustomView(mCustomView);
    mActionBar.setDisplayShowCustomEnabled(true);
}

and this is the result.

Answer 2

您可以创建一个custom_toolbar.xml 布局并设计您想要实现的目标，

看看我的范例

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"

    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent">

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

            <TextView
                android:id="@+id/txt_back"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="0dp"
                android:gravity="center_vertical"
                android:text="Back" />

            <TextView
                android:id="@+id/txt_name"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/txt_value"
                android:layout_toRightOf="@+id/txt_back"
                android:gravity="center"
                android:text="Name" />

            <TextView
                android:id="@+id/txt_value"
                style="@style/TextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:gravity="end"
                android:text="test" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

现在您可以在 example_activity.xml 中包含此布局

<include
    android:id="@+id/toolbar"
    layout="@layout/custom_toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

& 查看所需的输出