HarmonyOS开发41：Slider组件案例

练习：相亲app

需求1：拖动滑块的同时放大或者缩小图片
需求2：移动图片

ability_main.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:girl1"
        />

    <Slider
        ohos:id="$+id:slider"
        ohos:height="50vp"
        ohos:width="300vp"
        ohos:background_instruct_element="#FF55A0C8"
        ohos:max="100"
        ohos:min="0"
        />

</DirectionalLayout>

MainAbilitySlice.java代码：

package com.example.sliderapplication.slice;

import com.example.sliderapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Image;
import ohos.agp.components.Slider;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;

public class MainAbilitySlice extends AbilitySlice implements Slider.ValueChangedListener, Component.TouchEventListener {
    Image img;
    Slider slider;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //业务逻辑
        //滑动滑块之后放大缩小照片
        //可以拖动放大之后的照片

        //1.找到组件
        img = (Image) findComponentById(ResourceTable.Id_img);
        slider = (Slider) findComponentById(ResourceTable.Id_slider);

        //2.给滑块组件绑定事件
        slider.setValueChangedListener(this);

        //3.给图片绑定滑动事件
        img.setTouchEventListener(this);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        if (i <= 10) {
            i = 10;
        }

        //打开setScale方法可以看到是float的参数，所以不用double
        float result = (float) (i * 0.1);

        img.setScale(result, result);
    }

    //因为当我们按下滑块和松开滑块的时候不需要做什么事情
    //所以下面两个方法在本案例中暂时用不到
    @Override
    public void onTouchStart(Slider slider) {
        //记录用户看美女的开始时间
    }

    @Override
    public void onTouchEnd(Slider slider) {

    }

    //x1,y1表示手指按下不松的位置
    float x1;
    float y1;
    float imgX;
    float imgY;
    //参数一：当前操作的对象（图片）
    //参数二：动作对象
    //返回值：true:可以触发后续操作,false只能触发第一个操作
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        MmiPoint pointerPosition = touchEvent.getPointerPosition(0);
        int action = touchEvent.getAction();
        if (action == TouchEvent.PRIMARY_POINT_DOWN) {
            //按下不松,获取手指位置
            x1 = pointerPosition.getX();
            y1 = pointerPosition.getY();

            //获取图片位置
            imgX = img.getTranslationX();
            imgY = img.getTranslationY();

        } else if (action == TouchEvent.POINT_MOVE) {
            //移动手指

            //获取的是手指当前的位置
            float moveX = pointerPosition.getX();
            float moveY = pointerPosition.getY();

            //当前位置减去按下位置，可以得到移动距离
            float x = moveX - x1;
            float y = moveY - y1;

            //把图片也移动这么多距离
            //是在图片原有的基础上移动
            img.setTranslation(imgX + x, imgY + y);

        } else if (action == TouchEvent.PRIMARY_POINT_UP) {
            //手指松开
            //还可以记录用户看美女的结束时间，并得到总时间
        }

        return true;
    }
}

运行效果：