鸿蒙应用开发 | (Slider) 用法，拖动进度条改变图片大小和透明度

Love The Way You Lie 2022-08-30 11:36 203阅读 0赞

导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。

今天来一个小小的实战，使用进度条的托送功能，实现改变图片的比例和透明度 。

![图片][f9d4265662f4545c6ce8143948ab5510.png]

不多说了，今天的内容简单，下面我们开始今天的文章，还是老规矩，通过如下几点来说：

> 1，功能的使用场景  
> 2，用到的属性  
> 3，实战

### 简介 ###

鸿蒙中进度条目前有3种方式：RoundProgressBar，ProgressBar，Slider，分别是：圆形，线性，和拖动，今天来说说拖动进度条，该类型的进度条有一个拖动bar用来拖动，通过重写Slider.ValueChangedListener 的函数 onProgressUpdated 实现拖动的操作更新 。

### 用到的属性 ###

**Image：**

image_scane.setScale(i/10,i/10);
    image_scane.setAlpha(i/10);

### 实战 ###

**1，添加两个拖动条**

<?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:padding="10vp"
        ohos:alignment="horizontal_center"
        ohos:orientation="vertical">
    
        <Image
            ohos:id="$+id:image_scane"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:scale_mode="clip_center"
            ohos:image_src="$media:image"
            />
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:top_margin="100vp"
            ohos:text_size="18fp"
            ohos:text="改变图片大小"/>
        <Slider
            ohos:id="$+id:slider_opt"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:top_margin="10vp"/>
    
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:top_margin="10vp"
            ohos:text_size="18fp"
            ohos:text="改变图片透明度"/>
        <Slider
            ohos:id="$+id:slider_opt2"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:top_margin="10vp"/>
    
    </DirectionalLayout>

**2，添加监听接口**  
  
实现 接口 ：Slider.ValueChangedListener  
  
重写函数：

@Override
    public void onProgressUpdated(Slider slider, int i, boolean b) {
        image_scane.setScale(i/10,i/10);
        image_scane.setAlpha(i/10);
    }
    
    @Override
    public void onTouchStart(Slider slider) {
    
    }
    
    @Override
    public void onTouchEnd(Slider slider) {
    
    }

在 onProgressUpdated 函数中更新操作：

image_scane.setScale(i/10,i/10);image_scane.setAlpha(i/10);

**源码：**  
[https://gitee.com/codegrowth/haomony-develop/tree/master/SliderChangeImageScanAphen][https_gitee.com_codegrowth_haomony-develop_tree_master_SliderChangeImageScanAphen]

老规矩 代码不能少，下载代码 运行效果看看，记得点个赞。  
源码：  
**[https://gitee.com/codegrowth/haomony-develop/tree/master/ProgressBar][https_gitee.com_codegrowth_haomony-develop_tree_master_ProgressBar]**

关注公众号【**程序员漫话编程**】，后台回复 **”鸿蒙“** ，**即可获得上千鸿蒙开源组件。**

> 原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。  
>

**觉得不错的小伙伴，记得帮我** 点个赞和关注哟，笔芯笔芯~\*\*

> 作者：码工  
>

有问题请留言或者私信，可以 微信搜索：**程序员漫话编程**，关注公众号获得更多免费学习资料。

[f9d4265662f4545c6ce8143948ab5510.png]: /images/20220829/27b8d1b8bfa2406fad34a196f04da674.png
[https_gitee.com_codegrowth_haomony-develop_tree_master_SliderChangeImageScanAphen]: https://gitee.com/codegrowth/haomony-develop/tree/master/SliderChangeImageScanAphen
[https_gitee.com_codegrowth_haomony-develop_tree_master_ProgressBar]: https://gitee.com/codegrowth/haomony-develop/tree/master/ProgressBar