【Android Studio】常用布局 --- 滚动视图ScrollView
·
问题引入:手机屏幕的显示空间有限,常常需要上下滑动或左右滑动才能拉出其余页面内容,可惜一般的布局节点 都不支持自行滚动,这时就要借助滚动视图了。与线性布局类似,滚动视图也分为垂直方向和水平方向 两类,其中垂直滚动视图名为ScrollView,水平滚动视图名为
HorizontalScrollView
这两个滚动视图的 使用并不复杂,
主要注意以下3点:
(1)垂直方向滚动时,layout_width属性值设置为match_parent,layout_height属性值设置为wrap_content。
(2)水平方向滚动时,layout_width属性值设置为wrap_content,layout_height属性值设置为match_parent。
(3)滚动视图节点下面必须且只能挂着一个子布局节点,否则会在运行时报错。
Caused by:java.lang.IllegalStateException:ScrollView can host only one direct child
下面是垂直滚动视图ScrollView和水平滚动视图HorizontalScrollView的XML例子:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- HorizontalScrollView是水平方向的滚动视图,当前高度为200dp -->
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="200dp">
<!-- 水平方向的线性布局,两个子视图的颜色分别为青色和黄色 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#aaffff" />
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#ffff00" />
</LinearLayout>
</HorizontalScrollView>
<!-- ScrollView是垂直方向的滚动视图,当前高度为自适应 -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 垂直方向的线性布局,两个子视图的颜色分别为绿色和橙色 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#00ff00" />
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ffffaa" />
</LinearLayout>
</ScrollView>
</LinearLayout>
运行测试App,可知ScrollView在纵向滚动,而HorizontalScrollView在横向滚动。 有时ScrollView的实际内容不够,又想让它充满屏幕,怎么办呢?如果把layout_height属性赋值为match_parent,结果还是不会充满,正确的做法是再增加一行属性android:fillViewport(该属性为true表示允许填满视图窗口),属性片段举例如下:
android:layout_height="match_parent"
android:fillViewport="true"
运行结果:
注:运行前修改清单文件
滑动页面
感谢观看!!!
更多推荐
已为社区贡献1条内容
所有评论(0)