Android

Question

问题很简单。我在 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 在为其设置动画时被剪裁 position/bounds。

干杯

Answer 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);
    }

...将解决问题。

谢谢

Android - 防止 TabLayout 的子元素剪裁 Tab 内容

Android - Prevent TabLayout's children from clipping Tab contents

clip

android-custom-view

android-tabs

android-tablayout