# HarmonyOS应用开发基础——Slider案例详解

HarmonyOS应用开发基础——Slider组件案例详解

案例详解

基础代码使用

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"> 
<Slider 
ohos:id="$+id:slider" 
ohos:height="50vp" 
ohos:width="300vp" ohos:background_instruct_element="#0000FF" ohos:enabled="true" 
ohos:progress_color="#FF0000" 
ohos:thumb_element="#00FF00" 
ohos:vice_progress="80" 
ohos:vice_progress_element="#923456" 
ohos:max="100" 
ohos:min="0" /> 
</DirectionalLayout>

java文件

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 onProgressUpdated(Slider slider, int i, boolean b) { 
		ToastUtils.showDialog(this,"当前的进度值为：" + i); }
		//当用户用鼠标或者用手指 //按下滑块不松的时候，会调用该方法 
		@Override
		public void onTouchStart(Slider slider) { 
		ToastUtils.showDialog(this,"按下不松"); }
		//松开滑块的时候，会调用该方法。 @Override
		public void onTouchEnd(Slider slider) { ToastUtils.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:msg"
        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:enabled="true"
    ohos:background_instruct_element="#0000ff"
    ohos:max="100"
    ohos:min="0"
    />

</DirectionalLayout>

java文件

package com.example.sliderapplication.slice;

import com.example.sliderapplication.ResourceTable;
import com.example.sliderapplication.toasutil.ToastUtils;
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 {
    Slider slider;
    Image img;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        slider= (Slider) findComponentById(ResourceTable.Id_slider);
        img= (Image) findComponentById(ResourceTable.Id_msg);
        //进度条改变事件
        slider.setValueChangedListener(this);
        img.setTouchEventListener(this);
    }

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

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

    /**
     * 滑动组件的进度改变事件
     * @param slider 组件对象
     * @param i 进度值
     * @param b 是否可以被滑动
     */
    @Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        if(i==0){
            i=1;
        }
        float result= (float) (i*0.1);
        img.setScale(result,result);
    }

    /**
     * 鼠标或手指按下,一次方法只会被调用一次
     * @param slider
     */
    @Override
    public void onTouchStart(Slider slider) {
        ToastUtils.showDialog(this,"按下不松");
    }

    /**
     * 鼠标或手指抬起
     * @param slider
     */
    @Override
    public void onTouchEnd(Slider slider) {
        ToastUtils.showDialog(this,"松开");
    }
    float x1,y1;
    float imgx,imgy;
    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        int action=touchEvent.getAction();
        MmiPoint position=touchEvent.getPointerPosition(0);
        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();
            float x=movex-x1;
            float y=movey-y1;
            img.setTranslation(imgx+x,imgy+y);
        }
        else if(action==3){

        }
        return false;
    }
}