Android - 阻止TabLayout的子项剪辑选项卡内容

时间:2016-12-06 13:14:38

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

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

我在整个视图层次结构中将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。

干杯

1 个答案:

答案 0 :(得分:3)

好的,这很快。我找到了解决方案。在我看来,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);
    }

......将解决问题。

由于