让你的布局滚动起来—ScrollView

前言

经过两天的”实战“，今天咱们稍微放松一下脚步，让你们喘口气歇一下子，咱们今天为你们带来的控件，解决了太多在项目中遇到的适配问题，若是你已经碰到了这种问题，就紧跟咱们的脚步吧~

在前面几篇文章中，向你们介绍了一些经常使用的布局及UI控件。在使用的过程当中，可能会遇到这样的场景，当绘制的UI控件超出手机屏幕尺寸的时候，就会致使此UI控件没法显示。为了解决这一问题，Android提供了滚动视图ScrollView，下面就详细介绍下ScrollView的具体使用。

简介

ScrollView称为滚动视图，当在一个屏幕的像素显示不下绘制的UI控件时，能够采用滑动的方式，使控件显示。

先看下ScrollView类的继承关系：

java.lang.Object
  ↳android.view.View
    ↳android.view.ViewGroup
      ↳android.widget.FrameLayout
        ↳android.widget.ScrollView
复制代码

能够看出，ScrollView原来是一个FrameLayout的容器，不过在他的基础上添加了滚动，容许显示的比实际多的内容。

使用方式

1.竖直滚动视图ScrollView

在页面的竖直方向线性布局5个Button，代码以下：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="20dp" android:gravity="center" android:text="内容一" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:gravity="center" android:text="内容二" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:gravity="center" android:text="内容三" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:gravity="center" android:text="内容四" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:layout_marginBottom="80dp" android:gravity="center" android:text="内容五" android:textColor="#03A9F4" android:textSize="24sp" />
    </LinearLayout>
</ScrollView>
复制代码

经过Android Studio的Preview视图也能够看出，5个Button已超出屏幕显示，在不使用ScrollView的状况下，父布局直接使用LinearLayout，是没法使屏幕滑动显示全部控件的。

使用ScrollView后显示以下：

注意：ScrollView的子元素只能有一个，能够是一个View（如ImageView、TextView等） 也能够是一个ViewGroup（如LinearLayout、RelativeLayout等），其子元素内部则再也不限制，不然会报如下异常。

Caused by: java.lang.IllegalStateException: ScrollView can host only one direct child
复制代码

2.水平滚动视图HorizontalScrollView

在实际使用时，咱们也会遇到水平方向，控件超出屏幕的状况。这时就须要使用水平方向的滚动视图HorizontalScrollView。

在上面代码头部新增一个HorizontalScrollView，水平方向线性布局4个ImageView，代码以下：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

        <HorizontalScrollView android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="20dp">

            <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="horizontal">

                <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="20dp" android:src="@mipmap/ic_launcher" />

                <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="20dp" android:src="@mipmap/ic_launcher" />

                <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="20dp" android:src="@mipmap/ic_launcher" />

                <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="20dp" android:src="@mipmap/ic_launcher" />

            </LinearLayout>
        </HorizontalScrollView>

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="20dp" android:gravity="center" android:text="内容一" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:gravity="center" android:text="内容二" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:gravity="center" android:text="内容三" android:textColor="#03A9F4" android:textSize="24sp" />

        <Button android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="80dp" android:layout_marginBottom="80dp" android:gravity="center" android:text="内容四" android:textColor="#03A9F4" android:textSize="24sp" />
    </LinearLayout>
</ScrollView>
复制代码

展现效果以下：

能够看出，HorizontalScrollView中的图片内容，能够横向滑动，而且整个布局因为外部嵌套了ScrollView，总体页能够竖直方向滑动。

注意：同ScrollView，HorizontalScrollView中的子元素也只能有一个，不然报错。

XML中经常使用属性介绍

1.android:fadingEdge="none"

设置拉滚动条时，边框渐变的方向。none（边框颜色不变），horizontal（水平方向颜色变淡），vertical（垂直方向颜色变淡）。

2.android:overScrollMode="never"

删除ScrollView拉到尽头（顶部、底部），而后继续拉出现的阴影效果，适用于2.3及以上的 不然不用设置。

3.android:scrollbars="none"

设置滚动条显示，none（隐藏），horizontal（水平），vertical（垂直）。

4.android:descendantFocusability=""

该属性是当一个为view获取焦点时，定义ViewGroup和其子控件二者之间的关系。 属性的值有三种：

beforeDescendants	//viewgroup会优先其子类控件而获取到焦点
afterDescendants	//viewgroup只有当其子类控件不须要获取焦点时才获取焦点
blocksDescendants	//viewgroup会覆盖子类控件而直接得到焦点
复制代码

5.android:fillViewport=“true"

这是 ScrollView 独有的属性，用来定义 ScrollView 对象是否须要拉伸自身内容来填充 viewport。通俗来讲，就是容许ScrollView去填充整个屏幕。好比ScrollView嵌套的子控件高度达不到屏幕高度时，虽然ScrollView高度设置了match_parent，也没法充满整个屏幕，需设置android:fillViewport=“true"使ScrollView填充整个页面，给ScrollView设置背景颜色就能体现。

经常使用方法:

滑动开关控制

scrollView.setOnTouchListener(new View.OnTouchListener() {
	@Override
 	public boolean onTouch(View view, MotionEvent motionEvent) {
        // true禁止滑动 false可滑动
 		return true;
  	}
});
复制代码

滑动位置控制

scrollView.post(new Runnable() {
	@Override
	public void run() {
		//滑动到顶部
		scrollView.fullScroll(ScrollView.FOCUS_UP);
        
        //滑动到底部
        scrollView.fullScroll(ScrollView.FOCUS_DOWN);
	}
});
复制代码

滑动到某个位置

scrollView.post(new Runnable() {
	@Override
	public void run() {
		//偏移值
		int offset = 100;
		scrollView.smoothScrollTo(0, offset);
	}
});
复制代码

结语

能够看出，ScrollView是在平常开发中常常使用的View控件，其使用方式也比较简单。上面只是介绍了一些基本的使用操做，在接下来的文章中还会结合实际项目技能点进行深刻分析，快点儿来关注咱们吧！也欢迎各位小伙伴加入咱们的微信技术交流群，在公众号中回复微信群，就能够加入其中，也能够在公众号中回复视频，里面有一些初学者视频哦~

PS:若是还有未看懂的小伙伴，欢迎加入咱们的QQ技术交流群：892271582，里面有各类大神回答小伙伴们遇到的问题，咱们的微信群立刻也将要和你们见面啦，届时但愿你们踊跃加入其中~~