Android工具栏中是否可以同时具有后退和菜单按钮?

时间:2016-03-16 13:36:33

标签: android mobile

在iOS亚马逊应用中,他们同时实现了后退和菜单按钮。是否有可能在Android中实现相同的功能?

Amazon iOS app

4 个答案:

答案 0 :(得分:11)

您可以在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="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>

然后设置侦听器以执行openDrawer等任务并转到上一屏幕。

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);
    }
});

答案 1 :(得分:1)

如果您想要特别的东西,请自己创建:)

如果您正在使用最新的设计库,则可以创建自定义工具栏面板并添加您想要的任何项目。

我通过这种方式实现了这种行为:

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

答案 2 :(得分:1)

您可以使用以下自定义布局创建工具栏:

<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>

答案 3 :(得分:0)

是的,您绝对可以通过在 Styles.xml 中执行以下操作来隐藏默认工具栏:

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

然后你必须创建你自己的工具栏xml文件,我们将其命名为 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>

然后您必须在活动添加工具栏中添加该工具栏,如下所示

  <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>

然后您可以访问活动中的工具栏,如:

 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);

//然后创建一个公共方法,如下所示,以便您可以访问任何片段的工具栏内容

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