材料 TabLayout 标高不起作用答案

【问题标题】：Material TabLayout elevation not working材料 TabLayout 标高不起作用
【发布时间】：2015-09-18 00:17:06
【问题描述】：

由于某种原因，海拔属性似乎不适用于材料设计支持库中的新 TabLayout。有任何想法吗？ XML：

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

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

在父片段中像这样连接：

ViewPager viewPager = (ViewPager) view.findViewById(R.id.view_pager);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
AppPagerAdapter appPagerAdapter = new AppPagerAdapter(getChildFragmentManager());
viewPager.setAdapter(appPagerAdapter);
tabLayout.setupWithViewPager(viewPager);

图片：

Activity 有一个工具栏，但它在片段之外，不应该影响 tablayout 有阴影的能力：

相关活动xml：

<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:orientation="vertical"
tools:context="com.bluckapps.appinfomanager.ui.MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    tools:ignore="UnusedAttribute" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

【问题讨论】：

您使用的是Toolbar（我知道您的布局中没有说明，但我只是想知道）？另请注意，android:elevation 属性仅适用于 API 级别 21 及更高级别（即 Android Lollipop (5.0) 及更高版本）。
外观应该有选项卡下方的阴影，而不是它们上方。工具栏位于片段外部的活动中。我可以稍微扩展一下问题来详细说明
你试过了吗：falsefalse ?这应该会移除 ActionBar 下的阴影。然后，您可以在 xml 中添加一个视图，就在显示较深颜色的布局之上。
你可以看看这个code.google.com/p/android/issues/detail?id=179408

标签： android material-design android-elevation

【解决方案1】：

您应该使用ToolBar 和TabLayout。然后你可以把它们都放在AppBarLayout 中并得到一个阴影。这仅适用于 Lollipop+。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            style="@style/ToolBarStyle"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="@dimen/abc_action_bar_default_height_material"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

见http://inthecheesefactory.com/blog/android-design-support-library-codelab/en

【讨论】：

这实际上并没有回答这个问题。标高本身是否在 tablayout 上起作用？
这只是一种解决方法，可能是该问题的最佳实践。我不知道它为什么不起作用的确切原因。
非常感谢，但是否存在相关的错误或无法正常工作的原因？我想我要问的是我使用不正确还是某个地方实际上存在谷歌错误？
我非常有信心这是 TabLayout 的最佳实践。用 AppBar 包装它。在设计库的未来版本中，谷歌可能会为 prte lollipop 添加影子支持。
这不是关于棒棒糖的，整个问题只是大约 5.0+。这仍然不能回答实际出了什么问题

【解决方案2】：

您需要使用 CoordinatorLayout 作为 Activity 的容器布局，然后将 TabLayout 放在 AppBarLayout 的正下方。根据材料设计规范，您应该使用

android:elevation="4dp"

elevation 并使您的 TabLayout 成为 AppBarLayout 的一部分。另请注意，高程仅在 v21 (5.0) 或更高版本上可见。

【讨论】：

你应该使用app:elevation

【解决方案3】：

无需使用Fragment。一个 Activity 布局就足够了。喜欢：

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/home_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/home_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="2dp"
        app:paddingEnd="0dp"
        app:paddingStart="0dp">

        <include layout="@layout/toolbar_appcompat"></include>

        <android.support.design.widget.TabLayout
            android:id="@+id/home_tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@android:color/tab_indicator_text"
            app:tabTextColor="@android:color/darker_gray" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/home_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/arrow_toggle"
        app:borderWidth="1dp"
        app:elevation="3dp"
        app:fabSize="normal"
        app:layout_anchor="@+id/home_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="2dp"
        app:rippleColor="@color/swipe_refresh_color_scheme_green" />

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

同时，elevation 在 Lollipop 上很有用。如果要向后兼容，最好使用app:elevation。如果app:elevation不起作用，最好手动在TabLayout下方添加阴影，就像android:background="@drawable/myrect"一样：

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

【讨论】：

【解决方案4】：

要显示阴影，您必须在 TabLayout 上设置背景。它可以是与窗口背景相同的颜色（只要它是没有 alpha 的纯色）。

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="6dp"
    android:background="@color/white" />

【讨论】：

小心，只有 v21+
如果不添加底部边距，这对我不起作用。对于 4dp 的高度，android:layout_marginBottom="10dp" 完成了这项工作。

【解决方案5】：

以上所有答案都对我不起作用，所以我发现了这一点：

app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="@color/colorAccent"

那好吧！

【讨论】：