一 概述
ScrollView是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容。
创建ScrollView设置ScrollView
二 创建ScrollView
2.1 XML创建ScrollView
2.2 ScrollView效果图
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-create-xml.gif)
三 设置ScrollView
ScrollView的速度、滚动、回弹等常用接口如下
方法作用doFling(int velocityX, int velocityY)doFlingX(int velocityX)doFlingY(int velocityY)设置X轴和Y轴滚动的初始速度,单位(px)fluentScrollBy(int dx, int dy)fluentScrollByX(int dx)fluentScrollByY(int dy)根据像素数平滑滚动到指定位置,单位(px)fluentScrollTo(int x, int y)fluentScrollXTo(int x)fluentScrollYTo(int y)根据指定坐标平滑滚动到指定位置,单位(px)setReboundEffect(boolean enabled)设置是否启用回弹效果,默认falsesetReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent)setReboundEffectParams(ReboundEffectParams reboundEffectParams)setOverscrollPercent(int overscrollPercent)setOverscrollRate(float overscrollRate)setRemainVisiblePercent(int remainVisiblePercent)配置回弹效果overscrollPercent:过度滚动百分比,默认值40overscrollRate:过度滚动率,默认值0.6remainVisiblePercent:应保持可见内容的最小百分比,默认值20
3.1 根据像素数平滑滚动
代码
Button btnScroll= (Button) findComponentById(ResourceTable.Id_btnScroll);
ScrollView scrollView= (ScrollView) findComponentById(ResourceTable.Id_scrollview);
btnScroll.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
scrollView.fluentScrollByY(300);
}
});
根据像素数平滑滚动效果
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-scrollby-300.gif)
3.2 平滑滚动到指定位置
代码
Button btnScrollTo= (Button) findComponentById(ResourceTable.Id_btnScrollTo);
ScrollView scrollView= (ScrollView) findComponentById(ResourceTable.Id_scrollview);
btnScrollTo.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
scrollView.fluentScrollYTo(500);
}
});
平滑滚动到指定位置效果
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-scrollto-500.gif)
3.3 设置布局方向
ScrollView自身没有设置布局方向的属性,所以需要在其子布局中设置。以横向布局horizontal为例
xml中配置
...
设置布局方向为横向布局效果
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-orientation-horizontal.gif)
3.4 设置回弹效果
在xml中设置
...
Java代码中设置
scrollView.setReboundEffect(true);
开启回弹效果
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-rebound-effect.gif)
3.5 设置缩放匹配效果
xml中设置
...
Java代码中设置
scrollView.setMatchViewportEnabled(true);
设置缩放匹配效果
![](https://cdn.jsdelivr.net/gh/PGzxc/CDN@master/blog-hmos/hmos-scrollview-viewport-effect.gif)
|