20 - Slider组件案例 相亲APP

题目

界面为下图，要求拖动滑块组件时可以放大缩小图片，当图片放大或缩小时，可以滑动图片位置。

代码

ability_main.xml

    <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="#0000FF"
        ohos:max="100"
        ohos:min="0"
        />

MainAbilitySlice.java

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.滑动滑块之后需要放大或缩小图片
        //2.可以拖动放大之后的图片

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

        //绑定事件
        slider.setValueChangedListener(this);
        img.setTouchEventListener(this);

    }

    //参数一：进度条组件对象
    //参数二：当前进度值
    //参数三：是否可以拖动滑块
    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        //根据i的值来放大或缩小图片
        if (i == 0) {
            i = 1;
        }

        float result = (float) (i * 0.1);
        img.setScale(result, result);
//        img.setScale(): 放大的倍数;

    }

    //当按下滑块或松开滑块不需要做任何事情，
    // 所以下面的两个方法暂时都用不到
    @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 position = touchEvent.getPointerPosition(0);


        int action = touchEvent.getAction();
        if (action == TouchEvent.PRIMARY_POINT_DOWN) {
            //按下不松 获取手指的位置
            x1 = position.getX();
            y1 = position.getY();

            //获取图片的位置
            imgX = img.getTranslationX();
            imgY = img.getTranslationY();
        } else if (action == TouchEvent.POINT_MOVE) {
            //移动手指

            //按下当前手指不松的位置
            float moveX = position.getX();
            float moveY = position.getY();
            //拿着手指当前的位置，将x1，y1相减，就可以得到手指移动的距离
            float x = moveX - x1;
            float y = moveY - y1;
            //把图片也移动这么多距离就可以
            //是在图片原有的基础上，再移动x和y的距离
            img.setTranslation(imgX + x, imgY + y);
        } else if (action == TouchEvent.PRIMARY_POINT_UP) {
            //松开手指

        }

        return true;
    }
}