带文字的Android自定义后退按钮

Question

我想在我的Android应用中使用我在iOS应用中使用的操作栏：

。

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

任何人都可以帮助我吗？

Answer 1

我已发现一种简单的解决方案。

你刚才创建一个自定义的布局动作条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" /> 

包括此布局&看看期望的输出