在Android车载的UI设计中，分页、Tab标签页等成为常用的布局。这是Android的 Fragment 为开发者提供了便利，可以实现将一个 Activity
分为多个区域显示，在各自区域实现各自的界面。在各式各样的UI中难免出现特殊的现象，譬如视图超出父控件范围显示被截取的现象。

image.png

下面介绍使用Android的布局 clipChildren 属性来解决被裁减截取的问题。

UI界面

首先UI设计是将 Activity 对半分为两片 Fragment 区域：

Screenshot_20220925_190022.png

在 Activity 的布局如下：

<!--activity_main-->
<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".MainActivity">

   <FrameLayout
       android:id="@+id/layout_fragment1"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       app:layout_constraintEnd_toStartOf="@+id/layout_fragment2"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:background="@android:color/black" />

   <FrameLayout
       android:id="@+id/layout_fragment2"
       android:layout_width="0dp"
       android:layout_height="match_parent"
       app:layout_constraintStart_toEndOf="@+id/layout_fragment1"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Activity 中一分为二，显示两个 Fragment，Fragment2 的界面布局如下：

<!--fragment_layout2-->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">

    <ImageView
        android:id="@+id/ic_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="50dp"
        android:src="@drawable/ic_logo"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="我是Fragment2"
        android:textColor="@android:color/holo_red_dark"
        android:layout_gravity="center_horizontal"/>

</activity_main >

上面的布局，控制 “我的品牌” 的 ImageView 向左偏出一定区域（其中的 ImageView 也可以是自定义View），最终得到下面的效果：

Screenshot_20220925_183009.png

可以看到 “我的品牌” 的 ImageView 显示不完全，被裁减了。
这是系统默认实现对超出部分布局的剪裁，取消裁剪需要用到Android布局的 clipChildren 属性。

解决裁剪的问题

此时需要在 Activity 的布局中，将 Fragment 对应的父布局声明 clipChildren 属性为false，如下：

<!--MainActivity-->
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:clipChildren="false" >
    ...
  
    <FrameLayout
        android:id="@+id/layout_fragment2"
        android:clipChildren="false"
        ...

上面布局中，Fragment2 对应的在 Activity中的 FrameLayout 上有多少层嵌套布局，就需要在多少层嵌套布局中声明clipChildren 属性为false才能生效。最终可以看到下面的效果：

Screenshot_20220925_185217.png

总结

当有多个 View 嵌套在一个View里，而UI的设计父View指定了具体宽度或高度，父类View为一个 Fragment ，而父类 Fragment 在 Activity 中添加，Fragment 指定了显示范围，当UI设计把 Fragment中 的 View 一部分超出父布局，超出部分要在Fragment外显示，此时需要用到clipChildren属性，clipChildren 为 false 时防止父类截取子 View 显示，注意：在 FrameLayout 中添加 Fragment 时，需要在 FrameLayout 添加 clipChildren=false 同时需要在 FrameLayout 的父 Layout 添加此属性在 Fragment 的最外层布局也需要添加此属性才能生效。