屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组件。

一、ScrollView概述

从前面的学习有的同学可能已经发现,当拥有很多内容时屏幕显示不完,显示不全的部分完全看不见。但是在实际项目里面,很多内容都不止一个屏幕宽度或高度,那怎么办呢?那就需要本节学习的ScrollView来完成。

在默认情况下,ScrollView只是为其他组件添加垂直滚动条,如果应用需要添加水平滚动条,则可借助于另一个滚动视图HorizontalScrollView来实现。ScrollView与HorizontalScrollView的功能基本相似,只是前者添加垂直滚动条,后者添加水平滚动条。

ScrollView由FrameLayout派生而出,它就是一个用于为普通组件添加滚动条的组件。 ScrollView里最多只能包含一个组件,而ScrollView的作用就是为该组件添加垂直滚动条。

ScrollView支持的XML属性如下:

  • android:scrollX:以像素为单位设置水平方向滚动的的偏移值。
  • android:scrollY:以像素为单位设置垂直方向滚动的的偏移值。
  • android:scrollbarAlwaysDrawHorizontalTrack:设置是否始终显示垂直滚动条。
  • android:scrollbarAlwaysDrawVerticalTrack:设置是否始终显示垂直滚动条。
  • android:scrollbarDefaultDelayBeforeFade:设置N毫秒后开始淡化,以毫秒为单位。
  • android:scrollbarFadeDuration:设置滚动条淡出效果(从有到慢慢的变淡直至消失)时间,以毫秒为单位。
  • android:scrollbarSize:设置滚动条的宽度。
  • android:scrollbarStyle:设置滚动条的风格和位置。属性值有以下几个:
  • outsideInset:该ScrollBar显示在视图(view)的边缘,增加了view的padding. 如果可能的话,该ScrollBar仅仅覆盖这个view的背景。
  • outsideOverlay:该ScrollBar显示在视图(view)的边缘,不增加view的padding,该ScrollBar将被半透明覆盖。
  • insideInset:该ScrollBar显示在padding区域里面,增加了控件的padding区域,该ScrollBar不会和视图的内容重叠。
  • insideOverlay:该ScrollBar显示在内容区域里面,不会增加了控件的padding区域,该ScrollBar以半透明的样式覆盖在视图(view)的内容上。
  • android:scrollbarThumbHorizontal:设置水平滚动条的drawable。
  • android:scrollbarThumbVertical:设置垂直滚动条的drawable。
  • android:scrollbarTrackHorizontal:设置水平滚动条背景(轨迹)的色drawable。
  • android:scrollbarTrackVertical:设置垂直滚动条背景(轨迹)的drawable。
  • android:scrollbars:设置滚动条显示。属性值有:none、horizontal、vertical。

ScrollView的几个常用方法有:

  • addView (View child):添加子视图。如果事先没有给子视图设置layout参数,会采用当前ViewGroup的默认参数来设置子视图。
  • addView (View child, int index):添加子视图。如果事先没有给子视图设置layout参数,会采用当前ViewGroup的默认参数来设置子视图。
  • arrowScroll (int direction):响应点击上下箭头时对滚动条滚动的处理。
  • fling (int velocityY):滚动视图的滑动(fling)手势。

二、ScrollView示例

接下来通过一个简单的示例程序来学习ScrollView的使用。

继续使用WidgetSample工程的advancedviewsample模块,在app/main/res/layout/目录下创建scrollview_layout.xml文件,在其中填充如下代码片段:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp"
            android:fillViewport="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image" />
        <Button
            android:id="@+id/more_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="more" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ScrollView"
            android:textAppearance="?android:attr/textAppearanceLarge" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/description"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </LinearLayout>
</ScrollView>

其中description为定义的字符串,由于内容较多,此处不在给出。

运行程序,可以看到下图所示界面效果,界面可以上下滚动。

关于ScrollView先学到这里,更多用法建议自己多加练习。

原文发布于微信公众号 - 分享达人秀(ShareExpert)

原文发表时间:2017-09-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第56天:选中文字弹出提示框

所以这个的事件一定是  onmouseup  ,盒子显示而且盒子的位置 在  鼠标的 clientX 和 clientY 一模一样

1352
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

2692
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

4715
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用图片轮播

1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选...

5448
来自专栏smy

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

3476
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3428
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

1282
来自专栏用户画像

H5新增的嵌入多媒体元素与交互性元素

新增的嵌入多媒体元素有video和audio元素,分别用来插入视频和声音的。值得注意的是可以再开始标签和结束标签之间放置文本内容,这样旧版本的浏览器就可以显示出...

712
来自专栏前端儿

图片轮播(左右切换)--JS原生和jQuery实现

左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分

6271
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

761

扫码关注云+社区