Có thể có cả nút quay lại và menu trong thanh công cụ Android không?

Question

Trong ứng dụng iOS của iOS, họ đã triển khai cả nút quay lại và menu cùng nhau. Có thể thực hiện tương tự trong Android không?

Answer 1

Bạn có thể tạo ra một thiết kế thanh công cụ tùy chỉnh trong XML như

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:fitsSystemWindows="true" 
android:minHeight="?attr/actionBarSize"> 

    <ImageView 
     android:id="@+id/backButton" 
     android:background="@drawable/back_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <ImageView 
     android:id="@+id/homeButton" 
     android:background="@drawable/menu_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
</android.support.v7.widget.Toolbar> 

Sau đó thiết lập thính giả để thực hiện nhiệm vụ như openDrawer và màn hình trước đó goto.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
ImageView homeButton = (ImageView) toolbar.findViewById(R.id.homeButton); 

homeButton.setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View view) { 
     drawerLayout.openDrawer(GravityCompat.START); 
    } 
}); 

Answer 2

Nếu bạn muốn một cái gì đó đặc biệt tạo ra nó bằng cách của riêng bạn :)

Nếu bạn đang sử dụng thư viện thiết kế mới nhất có thể của nó để tạo ra bảng thanh công cụ tùy chỉnh của bạn và thêm bất kỳ mục nào mà bạn muốn có.

tôi đã đạt được hành vi đó theo cách này:

main_activity.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<!-- this is top bar where you need to add both drawer toggle and back button--> 
<include 
    layout="@layout/app_bar_navigation" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<!-- Content of sliding menu--> 
<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="end" 
    android:background="@color/primary_blue_dark" 
    android:fitsSystemWindows="true"> 

    <!-- Custom menu list. Feel free to customize it as listview--> 
    <ListView 
     android:id="@+id/lv_menu" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

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

layout/app_bar_navigation.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
android:orientation="vertical"> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/nav_header_size_pre5" 
    android:background="@color/primary_blue_dark" 
    android:padding="6dp"> 

    <!-- This is where you need to place those items. I had title and imageview there. You may add anything--> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="horizontal" 
     android:layout_centerHorizontal="true" 
     android:gravity="center"> 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:src="@drawable/ic_logo" 
      android:adjustViewBounds="true"/> 

     <TextView 
      android:id="@+id/tv_app_logo" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:text="@string/app_name" 
      android:layout_marginLeft="@dimen/activity_horizontal_margin" 
      android:textColor="@color/primary_yellow" 
      android:textSize="@dimen/middle_text" 
      android:gravity="center"/> 
    </LinearLayout> 


    <ImageView 
     android:id="@+id/iv_drawer_open" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:src="@drawable/ic_drawer_toggle" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentRight="true" 
     android:tint="@color/primary_white"/> 
</RelativeLayout> 

<!-- This is main content--> 
<include layout="@layout/content_navigation" /> 

Answer 3

bạn có thể tạo một thanh công cụ với bố trí tùy chỉnh như thế này:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/main_toolbar" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:minHeight="?attr/actionBarSize"> 

    <ImageView 
     android:id="@+id/backButton" 
     android:background="@drawable/ic_back_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <ImageView 
     android:id="@+id/hamburgerButton" 
     android:background="@drawable/ic_home_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
<ImageView 
     android:id="@+id/logo" 
     android:background="@drawable/logo" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
</android.support.v7.widget.Toolbar> 

Answer 4

Có hoàn toàn có thể bạn chỉ cần ẩn thanh công cụ mặc định bằng cách làm sau đây trong bạn Styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 

Sau đó, bạn phải tạo tệp xml của riêng bạn trên thanh công cụ, hãy đặt tên cho nó là custom_toolbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
app:contentInsetLeft="0dp" 
app:contentInsetStart="0dp"> 

    <ImageView 
     android:id="@+id/back_button" 
     android:background="@drawable/back_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <ImageView 
     android:id="@+id/menu_button" 
     android:background="@drawable/menu_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <TextView 
     android:id="@+id/toolbar_title" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_marginRight="10dp" 
     android:textColor="@android:color/black" 
     android:textSize="@dimen/actionbar_textsize" 
     android:textStyle="bold" /> 
</android.support.v7.widget.Toolbar> 

Sau đó, bạn cần phải thêm thanh công cụ trong hoạt động của bạn thêm thanh công cụ như dưới đây

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="betasoft.com.blankblank.ui.ui.activity.SignUp"> 

    <include 
     android:id="@+id/toolbar" 
     layout="@layout/custom_toolbar" /> 

    <FrameLayout 
     android:id="@+id/main_data" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@+id/toolbar /> 

</RelativeLayout> 

sau đó bạn có thể truy cập vào thanh công cụ trong hoạt động của bạn như:

Toolbar mToolBar; 
ImageView mToolBarBack,mToolBarMenu; 
TextView mToolBarTitle; 

//Inside onCreate 

mToolBar = (Toolbar) findViewById(R.id.toolbar); 
mToolBarBack = (ImageView) mToolBar.findViewById(R.id.toolbar_back); 
mToolBarTitle = (TextView) mToolBar.findViewById(R.id.toolbar_title); 
mToolBarMenu= (TextView) mToolBar.findViewById(R.id.menu_button); 

// sau đó tạo ra một phương pháp nào để như bên dưới để bạn có thể truy cập nội dung trên thanh công cụ ở bất kỳ đoạn nào

public void setActionBarTitle(String title) { 
     mToolBarTitle.setText(title); 
    }