关于android:fillViewport和android:clipToPadding的使用
今天在做一个典型的CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout页面时,发现底部的FloatingActionButton在小屏幕上,会遮挡部分scroll view中的内容,所以就想在scrollview上加paddingBottom能让内容能居于FloatActionButton的上面,就遇到了一些问题:
android:fillViewport
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="@+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:title="test" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="50dp">
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:background="@color/colorAccent"
android:paddingBottom="50dp"
android:text="123"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:background="@color/colorPrimaryDark"
android:paddingBottom="50dp"
android:text="456"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
<!--<include layout="@layout/content_scrolling" />-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
android:fillViewport
Defines whether the scrollview should stretch its content to fill the viewport.
意思是当scrollview中的children不足以撑满整个scrollview满屏(以collapsingbar收缩时状态计算)时,设置这个属性为true可以让scrollview的布局撑到满屏。
- 如果paddingBottom属性设置在child中,这里的paddingBottom是参与scrollview滚动的,这个好理解,毕竟是在child中设置的
- 如果paddingBottom属性设置在scrollview上面,paddingBottom的距离是不参与scrollview滚动的(和recyclerview类似)
android:clipToPadding的使用
android:clipToPadding
Defines whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero. This property is set to true by default.
May be a boolean value, such as "
true
" or "false
".
定义ViewGroup(这里scrollview)滚动且padding不为0时,children是否会裁剪,什么意思呢?
-
当clipToPadding为默认值true时,效果和没有是一样的,padding添加在scrollview,不参与滚动
-
当clipToPadding为false时,padding的距离是可以一起随内容滑动的。也就是他的child不会被自己的padding所裁剪(我理解为遮挡)
图一:clipToPadding为默认值true
device-2019-02-27-144822.gif
图二:clipToPadding为false
device-2019-02-27-145217.gif
网友评论