【问题标题】:Android - Overflow Menu and Back Button not showing in Collapsing ToolbarAndroid - 折叠工具栏中未显示溢出菜单和后退按钮
【发布时间】:2015-08-29 12:30:06
【问题描述】:

我正在尝试实现新设计支持库中的功能,以创建一个看起来类似于新材料设计 WhatsApp 配置文件页面的视差滚动工具栏。但是,我无法让溢出菜单和后退按钮显示在顶角。

我曾尝试使用以下方法显示后退按钮,但均无效。

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

并且覆盖溢出菜单的 onCreateOptionsMenu 方法也不起作用。

有谁知道如何将这些工具栏图标添加到设计支持库中的 CollapsingToolbar 中?下面是我的活动布局 xml。谢谢!

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/primary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/headerbg"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
            app:layout_collapseMode="pin" />

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    android:layout_marginBottom="?attr/actionBarSize"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v4.widget.NestedScrollView>

【问题讨论】:

    标签: android android-support-library material-design androiddesignsupport


    【解决方案1】:

    我遇到了同样的问题,现有答案中没有一个对我有帮助,我的问题令人惊讶的解决方法是在问题描述中。


    AppCompat 活动解决方案

    因此,带有后退按钮的折叠工具栏需要控制器 onCreate 方法中的那几行:

    //change id to Your id
    toolbar = (Toolbar) findViewById(R.id.toolbar); 
    setSupportActionBar(toolbar);
    
    //this line shows back button
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
    

    此活动的清单(注意 parentActivityName 属性):

    <activity
      android:name=".SomeActivity"
      android:parentActivityName=".MainActivity"
      android:theme="@style/AppTheme.NoActionBar"/>
    

    模板部分:

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
    
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            android:fitsSystemWindows="true"
            app:expandedTitleGravity="center_horizontal"
            >
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
    
        </android.support.design.widget.CollapsingToolbarLayout>
    
    </android.support.design.widget.AppBarLayout>
    

    替代解决方案(也是 AppCompat Activity)

    控制器onCreate方法:

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    
    toolbar.setNavigationIcon(android.support.v7.appcompat.R.drawable.abc_ic_ab_back_material);
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
    
                onBackPressed();
            }
    });
    

    此方法使用与第一个解决方案中相同的清单和模板。

    【讨论】:

      【解决方案2】:

      就我而言,这是可行的! app:layout_collapseMode="pin"内部工具栏布局

      【讨论】:

      • “工具栏布局”是什么意思?
      • 他的意思是把app:layout_collapseMode="pin添加到&lt;android.support.v7.widget.Toolbar&gt;这样&lt;android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /&gt;
      【解决方案3】:

      尽量不要把这个放在coordinatorLayout中:

      android:fitsSystemWindows="true"
      

      它对我有用。不知道为什么。祝你好运

      【讨论】:

      • 也尝试添加toolbar.setBackgroundColor(Color.TRANSPARENT);将背景颜色初始化为透明。有时它会产生很酷的效果
      【解决方案4】:

      以下启用导航按钮:

      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_arrow_back_white_24dp, null));
      toolbar.setNavigationOnClickListener(new OnClickListener() {
          @Override
          public void onClick(View v) {
              //onBackPressed()
          }
      });
      

      要获得溢出菜单行为,您必须声明一个带有 showAsAction 的 menu.xml 文件:从不应用于您的菜单项,例如:

      <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
      
          <item android:id="@+id/action_one"
              android:title="action 1"
              android:orderInCategory="1"
              app:showAsAction="never"/>
      
          <item android:id="@+id/action_two"
              android:title="action 2"
              android:orderInCategory="2"
              app:showAsAction="never"/>
      </menu>
      

      然后像这样膨胀它:

      toolbar.inflateMenu(R.menu.main);
      toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
          @Override
          public boolean onMenuItemClick(MenuItem item) {
              switch (item.getItemId()) {
                  case R.id.action_one:
                      break;
                  case R.id.action_two:
                      break;
              }
              return true;
          }
      });
      

      【讨论】:

      • 感谢您的回复,但不幸的是这并不能解决我的问题
      【解决方案5】:

      改变 应用程序:layout_collapseMode="视差" 到 应用程序:layout_collapseMode="pin" 在图像视图中。 希望这对你有用

      【讨论】:

      • 它对我有用,但我将图像和工具栏的 collapseMode 更改为“pin”.. 将很快更新原因。
      • 在 PIN Collapse 中,当视图折叠时,它保持顶部区域,其余区域折叠,但在 parralex 中,它保持中心区域。
      【解决方案6】:

      如果你没有在清单文件中添加 parentActivityName 标签,那么通过添加以下代码行来实现

      <activity android:name=".Activity.MovieData"
              android:parentActivityName=".Activity.Home">
      </activity>
      

      “Activity”是我的包名 “MovieData”是我的活动名称 “家”是我的目的地活动名称

      编辑:如果您支持 android api 级别 15 及以下,则 parentActivityName 将不起作用。

      为了支持低版本,你需要添加元数据标签为

      <meta-data
          android:name="PARENT_ACTIVITY"
          android:value="com.example.Activity.Home"/>
      

      【讨论】:

        【解决方案7】:

        改变这个..

                <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:elevation="15dp"
        
                android:layout_width="match_parent"
                app:logo="@drawable/action_bar_logo"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        

        popupTheme 与众不同,这正是您所寻找的......

        这是我的完整 xml

        <?xml version="1.0" encoding="utf-8"?>
        <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            tools:context=".AddUser">
                <android.support.design.widget.AppBarLayout
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:theme="@style/AppTheme.AppBarOverlay">
                    <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:elevation="15dp"
                    android:layout_width="match_parent"
                    app:logo="@drawable/action_bar_logo"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />
                    </android.support.design.widget.AppBarLayout>
                <include layout="@layout/content_add_user" />
        </android.support.design.widget.CoordinatorLayout>
        

        祝你好运!

        【讨论】:

        • 这个例子没有使用 CollapsingToolbarLayout。这如何回答这个问题?
        • 自 2016 年以来,巧妙地纠正别人的错误!,我真的不知道我在想什么,但你是正确的..
        【解决方案8】:

        转到 res/values/ 并打开 styles.xml

        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
        

        将 parent="Theme.AppCompat.Light.NoActionBar" 更改为 parent="Theme.AppCompat.Light"

        然后开始调试并删除所有不必要的代码,如// setSupportActionBar(toolbar); 的东西。 绝对有效。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多