欢迎回来Android入门教程的第七课,这一节继续学习两种滚动视图,分别是ScrolView(纵向滚动)和HorizontalScrollView(横向滚动)。这一节的内容非常简单,学会使用就行。

1.ScrollView

在经过前几节课的学习,我的布局文件已经堆积了很多组件,那再向里面添加组件,就会被遮挡,这时就需要一个ScrollView来让布局支持滚动。下面是我当前的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:id="@+id/mytextview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textColor="#3a9fff"
        android:textSize="20sp"
        android:gravity="center"
        android:lines="2"
        android:shadowColor="#000"
        android:shadowDx="1"
        android:shadowDy="1"
        android:background="#000"/>

    <Button
        android:id="@+id/mybutton"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="140dp"
        android:layout_height="40dp"
        android:background="#3a9fff"
        android:text="LovelyCat"
        android:textColor="#fff"
        android:textSize="18sp" />

    <ImageView
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <EditText
            android:layout_marginTop="20dp"
            android:layout_gravity="center"
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:hint="请输入账号"
            android:textSize="15sp"
            android:drawableStart="@drawable/ic_action_name" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:layout_centerInParent="true"
                android:id="@+id/edittext2"
                android:layout_width="200dp"
                android:layout_height="40dp"
                android:hint="请输入密码"
                android:textSize="15sp"
                android:drawableStart="@drawable/ic_action_name" />
            <Button
                android:layout_toEndOf="@id/edittext2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:text="×"
                android:textSize="24sp"
                android:background="#3a9fff"
                android:textColor="#fff"/>
        </RelativeLayout>
        <Button
            android:layout_gravity="center"
            android:layout_width="120dp"
            android:layout_height="30dp"
            android:text="登录"
            android:textColor="#fff"
            android:background="#3a9fff" />
    </LinearLayout>

    <LinearLayout
        android:padding="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RadioButton
                android:id="@+id/r1"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:text="1 单选框1"/>
            <RadioButton
                android:id="@+id/r2"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:text="1 单选框2"/>
        </RadioGroup>

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RadioButton
                android:id="@+id/r3"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:text="2 单选框1" />
            <RadioButton
                android:id="@+id/r4"
                android:layout_width="100dp"
                android:layout_height="40dp"
                android:text="2 单选框2"/>
        </RadioGroup>

        <CheckBox
            android:id="@+id/c1"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="复选框1"/>
        <CheckBox
            android:id="@+id/c2"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="复选框2"/>
        <CheckBox
            android:id="@+id/c3"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:text="复选框3"/>
    </LinearLayout>
    
    <ImageView
        android:layout_gravity="center"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:src="@mipmap/ic_launcher_round"/>
</LinearLayout>

可以看到已经无法容纳下面的ImageView了,那么这时候就需要使用纵向滚动视图。使用也非常简单,只要在你想要滚动的组件内套上一个SrollView即可。如下所示:

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

按照这种格式,就完成了一个滚动视图的创建,在LinearLayout内写入你想要支持滚动的组件即可。这里说明一下,若嵌套ScrollView,会丢失子组件原有的排布方式,这时你可以使用线性布局或其他部件来包裹子组件。

按照上面的格式,复制所有子组件到线性布局内,效果如下:

对于可滚动的布局,只需将鼠标移动到预览窗格内,鼠标滚轮即可滚动查看。

那么ScrollView就讲到这里。

2.HorizontalScrollView

学习了ScrollView,相信你也知道怎么用它来嵌套子组件了吧。下面就不再详细说明,直接看例子就好:

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <Button
                        android:layout_width="300dp"
                        android:layout_height="100dp" />
                    <Button
                        android:layout_width="300dp"
                        android:layout_height="100dp" />
                    <Button
                        android:layout_width="300dp"
                        android:layout_height="100dp" />
                    <Button
                        android:layout_width="300dp"
                        android:layout_height="100dp" />
                </LinearLayout>
            </HorizontalScrollView>

同样的你也可以用鼠标进行横向滚动,只需将鼠标移动到HorizontalScrollView的范围内滚轮即可。

那么本期就到此结束啦,从下节课开始来详细地讲一讲RecyclerView的用法,它是一个非常常用的组件,功能强大,会分三期来讲解。感谢观看。


0 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注