[HarmonyOS]——滑块组件(Slider)

一、滑块基础 

滑块组件（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, "松开手");
    }
}

三、案例分析

实现一个图片方法器，为了在方法后浏览图片的细节，可以随意拖动图片

本案例需求如下：

1. 滑动滑块之后，需要放大或者缩小图片
2. 可以拖放大之后的图片(这个需求和图片有关)

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;
    }
}