1. 程式人生 > >Android學習-滾動檢視ScrollView和HorizontalScrollView

Android學習-滾動檢視ScrollView和HorizontalScrollView

一、簡介:

ScrollView,通過官方文件的繼承關係可以看出,它繼承自FrameLayout,所以它是一種特殊型別的FrameLayout,因為它可以使用使用者滾動顯示一個佔據的空間大於物理顯示的檢視列表。值得注意的是,ScrollView只能包含一個子檢視或檢視組,在實際專案中,通常包含的是一個垂直的LinearLayout。

二、ScrollView程式碼塊:

  • 在activity_main.xml中新增一個超出頁面範圍的按鈕:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>
    
    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"
        android:textAllCaps="false"
        android:layout_marginTop="300dp"/>

</LinearLayout>
  • 更改為ScrollView佈局(ScrollView下子元素只能有一個):
<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="wrap_content"
    >

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

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"
        android:textAllCaps="false"
        android:layout_marginTop="300dp"/>

    </LinearLayout>
</ScrollView>
  • 執行截圖:
    ScrollView

三、HorizontalScrollView程式碼塊:

  • 在原有ScrollView基礎上寫入HorizontalScrollView(HorizontalScrollView下子元素只能有一個):
<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="wrap_content"
    >

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

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
        </LinearLayout>
    </HorizontalScrollView>

    </LinearLayout>
</ScrollView>
  • 執行截圖(既能上下滾動也能左右滾動):
    ScrollView