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

Question

我想在我的 Android 应用程序中添加一个类似于我在 iOS 应用程序中的操作栏：

.

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

有人能帮帮我吗？

Answer 1

您可以创建一个 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" />

& 查看所需输出

Answer 2

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

您只需为自定义 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.

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

Android custom back button with text

android

android-layout

android-actionbar