前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让你的布局滚动起来—ScrollView

让你的布局滚动起来—ScrollView

作者头像
下码看花
发布2019-09-02 17:07:29
3.3K0
发布2019-09-02 17:07:29
举报
文章被收录于专栏:AndroidStudio初识AndroidStudio初识

前言

通过两天的”实战“,今天我们稍微放松一下脚步,让大家喘口气歇一会儿,我们今天为大家带来的控件,解决了太多在项目中遇到的适配问题,如果你已经碰到了这种问题,就紧跟我们的脚步吧~

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

简介

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

先看下 ScrollView类的继承关系:

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

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

使用方式

1.竖直滚动视图 ScrollView

在页面的竖直方向线性布局5个 Button,代码如下:

代码语言:javascript
复制
<?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>

通过 AndroidStudioPreview视图也可以看出,5个 Button已超出屏幕显示,在不使用 ScrollView的情况下,父布局直接使用 LinearLayout,是无法使屏幕滑动显示所有控件的。

使用 ScrollView后显示如下:

注意ScrollView的子元素只能有一个,可以是一个 View(如 ImageViewTextView等) 也可以是一个 ViewGroup(如 LinearLayoutRelativeLayout等),其子元素内部则不再限制,否则会报以下异常。

代码语言:javascript
复制
Caused by: java.lang.IllegalStateException: ScrollView can host only one direct child
2.水平滚动视图 HorizontalScrollView

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

在上面代码头部新增一个 HorizontalScrollView,水平方向线性布局4个 ImageView,代码如下:

代码语言:javascript
复制
<?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,整体页可以竖直方向滑动。

注意:同 ScrollViewHorizontalScrollView中的子元素也只能有一个,否则报错。

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和其子控件两者之间的关系。 属性的值有三种:

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

5. android:fillViewport=“true"

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

常用方法:

滑动开关控制
代码语言:javascript
复制
scrollView.setOnTouchListener(new View.OnTouchListener() {
    @Override
     public boolean onTouch(View view, MotionEvent motionEvent) {
        // true禁止滑动  false可滑动
         return true;
      }
});
滑动位置控制
代码语言:javascript
复制
scrollView.post(new Runnable() {
    @Override
    public void run() {
        //滑动到顶部
        scrollView.fullScroll(ScrollView.FOCUS_UP);

        //滑动到底部
        scrollView.fullScroll(ScrollView.FOCUS_DOWN);
    }
});
滑动到某个位置
代码语言:javascript
复制
scrollView.post(new Runnable() {
    @Override
    public void run() {
        //偏移值
        int offset = 100;
        scrollView.smoothScrollTo(0, offset);
    }
});

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 下码看花 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 简介
  • 使用方式
    • 1.竖直滚动视图 ScrollView
      • 2.水平滚动视图 HorizontalScrollView
      • XML中常用属性介绍
      • 常用方法:
      相关产品与服务
      容器服务
      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档