Android初学 使用双向绑定实现拖动条改变图片透明度

参考资源:

Android异步更新UI的几种方法

实现效果

在这里插入图片描述

第一步, 开启数据绑定和视图绑定

参加 Android初学 数据的双向绑定(Dabinding和ViewBinding的简单使用)中的第一步

第二步, 写ViewModel

public class MyViewModel extends ViewModel {
    /**
     * 进度条的值
     */
    private final ObservableField<Integer> mProcess = new ObservableField<>(100);
    /**
     * 图片的透明度
     */
    private final ObservableField<Float> mAlpha = new ObservableField<>(1f);

    public ObservableField<Integer> getProcess() {
        return mProcess;
    }

    public ObservableField<Float> getAlpha() {
        return mAlpha;
    }
}

第三步, 写布局文件, 并根据提示修改布局文件为数据绑定布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="myViewModel"
            type="work.wxmx.mvvmtest.MyViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:alpha="@{myViewModel.alpha}"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:mipmap/sym_def_app_icon" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.8" />

        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="267dp"
            android:layout_height="19dp"
            android:max="100"
            android:progress="@={myViewModel.process}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

效果图如下图所示:
在这里插入图片描述

第四步, 写Activity

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding mBinding;
    private MyViewModel mViewModel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = ActivityMainBinding.inflate(getLayoutInflater());
        mViewModel = new ViewModelProvider(this).get(MyViewModel.class);
        setContentView(mBinding.getRoot());
        mBinding.setMyViewModel(mViewModel);
        // 从网络加载图片 并更新UI
        new Thread(() -> {
            Bitmap bitmap = loadImageFromNetwork("https://wx1.sinaimg.cn/mw2000/006a0Rdhly1gsqqjwj048j31ed2a77wi.jpg");
            mBinding.imageView.postDelayed(() -> mBinding.imageView.setImageBitmap(bitmap), 2000);
        }).start();
        // 监听拖动条值的变化 改变透明度的值
        mViewModel.getProcess().addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
            @Override
            public void onPropertyChanged(Observable sender, int propertyId) {
                mViewModel.getAlpha().set(mViewModel.getProcess().get() / 100.0f);
            }
        });
    }

    private Bitmap loadImageFromNetwork(String s) {
        try {
            URL url = new URL(s);
            URLConnection urlConnection = url.openConnection();
            urlConnection.connect();
            InputStream inputStream = urlConnection.getInputStream();
            return BitmapFactory.decodeStream(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

完! peace!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值