Android自定义后退按钮带文字

时间:2017-09-15 14:45:42

标签: android android-layout android-actionbar

我想在我的Android应用中使用一个操作栏,就像我在iOS应用中使用的那样:

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

有人可以帮助我吗?

2 个答案:

答案 0 :(得分: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.

答案 1 :(得分:1)

您可以创建一个custom_toolbar.xml布局&amp;设计你想要达到的目标,

查看我的范例

<?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" />

<强>&安培;查看所需的输出

enter image description here