Android - 防止 TabLayout 的子级剪切 Tab 内容答案

【问题标题】：Android - Prevent TabLayout's children from clipping Tab contentsAndroid - 防止 TabLayout 的子级剪切 Tab 内容
【发布时间】：2016-12-06 13:14:38
【问题描述】：

问题很简单。我在 CoordinatorLayout 中有一个 TabLayout，我在运行时为每个 Tab 动态设置了一个 CustomView。选项卡有一些动画和自定义内容，当前在选项卡的边缘被剪裁。

我已在所有视图层次结构中将 clipToPadding 和 clipChildren 设置为 false，但没有成功。选项卡仍在被剪裁。

那么问题来了，如何避免在 TabLayout 中剪裁标签的自定义视图？

这里有一些代码，你可以看到我在做什么：

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:clipChildren="false"
    android:fitsSystemWindows="false"
    tools:context=".MainTabbedActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:elevation="4dp"
    android:clipToPadding="false"
    android:clipChildren="false"
    android:fitsSystemWindows="false"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:clipChildren="false"
        app:tabPaddingBottom="-1dp"
        app:tabPaddingEnd="-1dp"
        app:tabPaddingStart="-1dp"
        app:tabPaddingTop="-1dp"
        app:tabIndicatorColor="@android:color/white"/>

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

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    ... />

然后，自定义选项卡如下所示：

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

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="32dp"
    android:scaleType="fitCenter"
    android:layout_marginBottom="-4dp"
    android:adjustViewBounds="true"
    android:id="@+id/tab_pic" />

<TextView
    android:id="@+id/tab_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/something"
    android:textColor="@color/white"
    android:textStyle="bold"
    android:textSize="12sp"
    android:visibility="invisible"/>

结果是 ImageView 在为其位置/边界设置动画时被剪裁。

干杯

【问题讨论】：

标签： android android-custom-view android-tabs android-tablayout clip

【解决方案1】：

好的，这很快。我找到了解决方案。在我看来，Android 在 TabLayout 和实际选项卡内容之间创建了一个中间父视图。

所以对每个选项卡执行以下操作...：

ViewGroup realTabs = ((ViewGroup) mTabLayout.getChildAt(0));
    realTabs.setClipToPadding(false);
    realTabs.setClipChildren(false);

    if (realTabs.getChildAt(0) instanceof ViewGroup) { // <-- This is the intermediate parent ViewGroup
        ((ViewGroup)realTab0.getChildAt(0)).setClipToPadding(false);
        ((ViewGroup)realTab0.getChildAt(0)).setClipChildren(false);
    }

...会解决问题的。

谢谢

【讨论】：