【问题标题】:Getting elevation bewteen Toolbar and Tablayout在 Toolbar 和 Tablayout 之间获取高度
【发布时间】:2020-01-25 05:02:54
【问题描述】:

我正在尝试创建一个布局,其中包括 appbarlayout 中的工具栏和 tablayout。它工作正常,但在工具栏和 appbarlayout 之间显示一条线。我正在动态设置工具栏背景颜色,例如:

toolbar.setBackgroundColor(Color.parseColor("myColor")); tabLayout.setBackgroundColor(Color.parseColor("myColor");

我尝试在 AppbarToolbar 上设置app:elevation="0dp",但它不起作用。

<androidx.coordinatorlayout.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">   

    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                style="@style/MyTabStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="scrollable" />

        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

MyTabsStyle.xml:

<style name="MyTabStyle" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/colorWhite</item>
    <item name="tabIndicatorHeight">2.5dp</item>
    <item name="android:elevation">2dp</item>
    <item name="tabIconTint">@color/colorWhite</item>
    <item name="tabSelectedTextColor">@color/colorWhite</item>
    <item name="tabTextColor">@color/white_trans</item>
</style>

Styles.xml

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />

【问题讨论】:

  • 不是行。它的工具栏立面图。设置 android:elevation="0dp"
  • 工具栏需要添加

标签: android material-design android-toolbar android-appbarlayout material-components-android


【解决方案1】:

试试这个

在 MyTabsStyle.xml 中将高度设置为 0dp

MyTabsStyle.xml:

 <style name="MyTabStyle" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">@color/colorWhite</item>
<item name="tabIndicatorHeight">2.5dp</item>
<item name="android:elevation">0dp</item>
<item name="tabIconTint">@color/colorWhite</item>
<item name="tabSelectedTextColor">@color/colorWhite</item>
<item name="tabTextColor">@color/white_trans</item></style>

【讨论】:

    【解决方案2】:

    下面是修改后的代码。

    <androidx.coordinatorlayout.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">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:elevation="0dp"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
    
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                style="@style/MyTabStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="scrollable" />
    
        </com.google.android.material.appbar.AppBarLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    AppBarLayout 中添加 app:elevation="0dp" 以隐藏工具栏中的阴影。

    【讨论】:

      【解决方案3】:

      在您的 mytheme.xml 更改更新 AppTheme.AppBarOverlay 样式为:

      <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
          <item name="elevation">0dp</item>
      </style>
      

      完成。

      【讨论】:

        【解决方案4】:

        试试这个

           <androidx.appcompat.widget.Toolbar
                    android:id="@+id/tool_bar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/colorAppBar"
                    android:elevation="0dp">
        

        【讨论】:

          【解决方案5】:

          您可以用 AppBarLayout

          包装 ToolbarTabLayout
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              xmlns:android="http://schemas.android.com/apk/res/android">
          
              <com.google.android.material.appbar.AppBarLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
          
                  <androidx.appcompat.widget.Toolbar
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"/>
          
                  <com.google.android.material.tabs.TabLayout
                      android:layout_width="match_parent"
                      app:tabBackground="?attr/colorPrimary"
                      android:layout_height="wrap_content"/>
          
              </com.google.android.material.appbar.AppBarLayout>
          
          <LinearLayout/>
          

          希望对你有帮助。

          【讨论】:

          • 我的布局是一样的!
          猜你喜欢
          • 1970-01-01
          • 2016-07-31
          • 1970-01-01
          • 2016-09-24
          • 2016-11-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多