一、滑块基础
滑块组件(Slider),其父类是AbsSlider,AbsSlider的父类是ProgressBar,所以归根到底滑块组件其实也就是一个进度条
- 音量调节、读书进度、视频进度等都是滑块组件的应用。
1、基础属性
- enabled:滑块能否被滑动
- background_instruct_element:总进度的背景颜色
- progress_color:已完成部分的颜色
- thumb_element:设置滑块的颜色
- vice_progress:次一级的进度,比如电影的缓冲进度
- vice_progress_element:次一级进度的颜色
- max:滑块进度的最大值
- min:滑块进度的最小值
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<!-- enabled:滑块能否被滑动 -->
<!-- background_instruct_element:总进度的背景颜色 -->
<!-- progress_color:已完成部分的颜色 -->
<!-- thumb_element:设置滑块(颜色) -->
<!-- vice_progress:次一级的进度(比如电影的缓冲进度) -->
<!-- vice_progress_element:次一级进度的颜色 -->
<Slider
ohos:height="50vp"
ohos:width="300vp"
ohos:enabled="true"
ohos:background_instruct_element="#0000FF"
ohos:progress_color="#FF0000"
ohos:thumb_element="#00FF00"
ohos:vice_progress="80"
ohos:vice_progress_element="#000000"
/>
</DirectionalLayout>
二、滑块状态值改变事件
public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//找到组件
Slider slider = (Slider) findComponentById(ResourceTable.Id_slider);
//给滑块组件绑定事件
//进度值改变事件
slider.setValueChangedListener(this);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
//当滑块组件中的进度值改变的时候就会调用这一方法
//参数1:滑块组件的对象
//参数2:当前的进度值
//参数3:当前滑块能否被滑动
@Override
public void onProgressUpdated(Slider slider, int i, boolean b) {
MyToast.showDialog(this, "当前的进度值为:" + i);
}
//当用户用鼠标或手指按下滑块不松的时候会调用
@Override
public void onTouchStart(Slider slider) {
MyToast.showDialog(this, "按下不松手");
}
//当用户用鼠标或手指松开滑块的时候会调用
@Override
public void onTouchEnd(Slider slider) {
MyToast.showDialog(this, "松开手");
}
}
三、案例分析
实现一个图片方法器,为了在方法后浏览图片的细节,可以随意拖动图片
本案例需求如下:
- 滑动滑块之后,需要放大或者缩小图片
- 可以拖放大之后的图片(这个需求和图片有关)
XML中定义组件:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Image
ohos:id="$+id:img"
ohos:height="match_content"
ohos:width="match_content"
ohos:image_src="$media:flower"
/>
<Slider
ohos:id="$+id:slider"
ohos:height="50vp"
ohos:width="300vp"
ohos:background_instruct_element="#0000FF"
ohos:max="10"
ohos:min="1"
/>
</DirectionalLayout>
Java中定义逻辑代码:
package com.example.demo2.slice;
import com.example.demo2.ResourceTable;
import com.example.demo2.dialogutils.MyToast;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;
import java.time.temporal.ValueRange;
public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener, Component.TouchEventListener {
//图片组件
Image image = null;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//业务分析
//1、滑动滑块之后,需要放大或者缩小图片
//2、可以拖放大之后的图片(这个需求和图片有关)
//找到图片组件
image = (Image) findComponentById(ResourceTable.Id_img);
Slider slider = (Slider) findComponentById(ResourceTable.Id_slider);
//给滑块绑定状态值改变事件
slider.setValueChangedListener(this);
//图片拖动
//给图片绑定触摸事件
image.setTouchEventListener(this);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
//参1:进度值变化的滑块组件
//参2:当前的进度值
//参3:当前的滑块是否可以被滑动
@Override
public void onProgressUpdated(Slider slider, int i, boolean b) {
//根据滑块的状态值放大或者缩小图片
//图片缩放API
image.setScale(i, i);
}
//这里鼠标按下和松开时暂时不需要做什么事情
//所以下面的两个方法暂时不用
@Override
public void onTouchStart(Slider slider) {
//用户看图片的开始事件
}
@Override
public void onTouchEnd(Slider slider) {
}
//手指起始落点的位置
float x1;
float y1;
//图片的位置
float imgX;
float imgY;
//为图片拖动定义的事件
//参数1:当前操作的组件
//参数2:动作对象(对组件进行操作封装到里面)
@Override
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
//获取手指的坐标
MmiPoint position = touchEvent.getPointerPosition(0);
//获取当前的操作
int action = touchEvent.getAction();
if(action == TouchEvent.PRIMARY_POINT_DOWN) {
//按下不松开的位置
x1 = position.getX();
y1 = position.getY();
//获取图片的位置
imgX = image.getTranslationX();
imgY = image.getTranslationY();
} else if(action == TouchEvent.POINT_MOVE) {
//移动手指
//获取手指当前的位置
float moveX = position.getX();
float moveY = position.getY();
//拿手指当前的位置 跟起始位置相减,就可以得到手指移动的距离
float x = moveX - x1;
float y = moveY - y1;
//设置图片移动
image.setTranslation(imgX + x, imgY + y);
} else if(action == TouchEvent.PRIMARY_POINT_UP) {
//松开手
//用户看图片的结束事件
//得到用户观看图片的总时间,完了将数据传给服务器
//不断的积累,服务器上数据越来越多,这也就是目前用的很多的大数据分析,分析人的喜好和行为
}
return true;
}
}