[android] MVVM – 7. ImageView, Blur

이미지뷰에 상황에 따라 이미지를 넣거나, 블러 처리를 하는 것도 간편하다.

지금하는 프로젝트에서 블러처리를 위해 `renderscriptSupportModeEnabled` 관련 구문을 gradle에 넣어주고 있는데, 이 예제를 만들면서 알아챘는데 그 구문을 굳이 안 넣어도 잘 된다.

이미 QA까지 끝난 프로젝트라서 다음에 새로 만들 때는 저걸 안 넣고 해야겠다.

이 예제에 이미지뷰를 총 8개를 넣고, 체크박스 4개와 Slider까지 넣고 해봤는데, MVC보다 코드가 엄청 많이 줄었다.

사용할 뷰모델을 만든다.

public class ImageViewModel implements BaseViewModel {
  private Context context;
  public final ObservableField<Drawable> realImg = new ObservableField<>();
  public final ObservableField<Drawable> blurImg = new ObservableField<>();

  public ImageViewModel(Context context) {
    this.context = context;
  }

  @Override
  public void onCreate() {}

  @Override
  public void onResume() {}

  @Override
  public void onPause() {}

  @Override
  public void onDestroy() {}

  public void start() {
    int resId = R.mipmap.ic_launcher;
    Resources resources = context.getResources();

    realImg.set(ContextCompat.getDrawable(context, resId));

    Bitmap bitmap = BitmapFactory.decodeResource(resources, resId);

    RenderScript rs = RenderScript.create(context);
    Allocation input = Allocation.createFromBitmap(rs, bitmap);
    Allocation output = Allocation.createTyped(rs, input.getType());
    ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
    script.setRadius(15.f);
    script.setInput(input);
    script.forEach(output);
    output.copyTo(bitmap);

    blurImg.set(new BitmapDrawable(resources, bitmap));
  }
}

ObservableField<Drawable> 로 만들면 이미지뷰에서 알아서 잘 표시한다.

블러 처리할 이미지가 많으면 화면이 멈추면 RxJava를 이용해서 비동기 처리를 하면 된다.

레이아웃을 꾸며준다. 기존처럼 android:src 에 넣어주면 따로 처리할 필요도 없다.

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

  <data>

    <variable
      name="model"
      type="kr.susemi99.testmvvm.image_view.ImageViewModel"/>
  </data>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="@{()->model.start()}"
      android:text="start"/>

    <ImageView
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:src="@{model.realImg}"/>

    <ImageView
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:src="@{model.blurImg}"/>
  </LinearLayout>
</layout>

액티비티에서는 뷰모델을 연결만 해주면 된다.

public class ImageActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    ActivityImageBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_image);
    binding.setModel(new ImageViewModel(getApplicationContext()));
  }
}

이렇게 표시된다.