假设我们要做一个效果,界面最顶部是一个标题栏并且是半透明的,标题栏下面是一个ListView,在初始状态 下,ListView是top是在标题栏的bottom位置的,但当ListView滚动的时候可以透过标题栏看到下面的 ListView的内容。如下面两张图所示:
正常态:
滚动态:
乍一看,不是很简单吗,只要设置一下marginTop或者paddingTop就可以了,但问题是只用这两个其中一个属性的话,ListView 滑动的时候就不能滚到paddingTop或者marginTop那部分区域,有人说可以用HeaderView来解决,这是其中一个办法,但仅仅了为这 个占空使用HeadView有点浪费而且会影响onItemClick的position.于是这里介绍可以到这个效果的两个属性,就是 android:clipToPadding和android:clipChildren,这两个属性不是太多人用到,这里说明一下
clipToPadding就是说控件的绘制区域是否在padding里面的,true的情况下如果你设置了padding那么绘制的区域就往里 缩,clipChildren是指子控件是否超过padding区域,这两个属性默认是true的,所以在设置了padding情况下,默认滚动是在 padding内部的,要达到上面的效果主要把这两个属性设置了false那么这样子控件就能画到padding的区域了。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingTop="50dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="标题栏"
android:gravity="center_vertical"
android:textSize="20dp"
android:paddingLeft="20dp"/>
</FrameLayout>
这个属性RecyclerView也有,使用RecycleView的时候也可以使用。
android:clipChildren还有一些功能,先看图:
咱们只看下面的导航栏的效果,为了做出这种效果图你能想到的方式是什么呢?用RelativeLayout?还是…….
其实很简单,只要用了这个神奇的属性后这个效果很容易就可以实现,下面是注意点:
1、只需在根节点设置android:clipChildren为false即可,默认为true,注意:一定是在布局文件的根节点设置,否则不起作用
2、可以通过android:layout_gravity控制超出的部分如何显示
3、android:clipChildren的意思:是否限制子View在其范围内,我们将其值设置为false后那么当子控件的高度高于父控件时也会完全显示,而不会被压缩
布局文件如下:(标题栏和ListView重复了,我就在xml里面删了)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="#B0C4DE"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:scaleType="fitCenter"
android:src="@mipmap/tab_5_true" />
<ImageView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:scaleType="fitCenter"
android:src="@mipmap/tab_5_true" />
<ImageView
android:layout_width="0dip"
android:layout_height="70dip"
android:layout_gravity="bottom"
android:layout_weight="1.0"
android:scaleType="fitCenter"
android:src="@mipmap/tab_5_true" />
<ImageView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:scaleType="fitCenter"
android:src="@mipmap/tab_5_true" />
<ImageView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:scaleType="fitCenter"
android:src="@mipmap/tab_5_true" />
</LinearLayout>
</RelativeLayout>