【问题标题】:Is it possible to have both back and menu button in toolbar Android?工具栏Android中是否可以同时具有后退和菜单按钮?
【发布时间】:2016-07-02 10:15:00
【问题描述】:

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

【问题讨论】:

  • 请张贴图片和/或 XML 布局,显示准确完成后整个工具栏的外观。这对解决方案很重要。
  • 应该类似于amazon app ios。我已经发布了屏幕截图,请检查它
  • 简而言之,是的,它绝对有可能。所以现在去阅读一下并尝试实现它。

标签: android mobile


【解决方案1】:

您可以在 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);
    }
});

【讨论】:

    【解决方案2】:

    您可以像这样创建具有自定义布局的工具栏:

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

      如果你想要一些特别的东西,你可以自己创造它:)

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

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

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

      【讨论】:

        【解决方案4】:

        是的,绝对有可能你只需要通过在 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);
            }
        

        【讨论】:

          猜你喜欢
          • 2018-09-13
          • 2015-08-29
          • 2015-08-05
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多