讓你的佈局滾動起來—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，裏面有各類大神回答小夥伴們遇到的問題，咱們的微信羣立刻也將要和你們見面啦，屆時但願你們踊躍加入其中~~