こんにちは！ 投資戦略システム事業部のAndroidエンジニア、本橋です。
今回はRecyclerView上の一部のアイテムにすりガラスをかける方法を紹介します。
経緯
開発に携わっているプロジェクトにて、実際のデータ上にすりガラスと課金誘導のレイアウトを配置することになりました。
iOSにはUIVisualEffectViewなるものが標準で用意されている一方、AndroidにはこんなオサレUIは用意されていません。
さすがにフルスクラッチで自作する時間はなかったので、外部ライブラリを用いて実装しました。
使用するライブラリ
こちらのライブラリを使って実装を進めます。 github.com 他にもライブラリはありましたが、リスト上に表示することを考慮しているものは、これだけだったと思います。
完成形
3の倍数ごとにAppleアイコンを表示し、その上にすりガラスをかけてみます。
完成形はこんな感じです。
なお、Android ロボットの画像については、Google が作成および提供している作品から複製または変更したものであり、クリエイティブ・コモンズ表示 3.0 ライセンスに記載された条件に従って使用しています。
実装する
毎度おなじみGradleファイルに依存関係を追加します。
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
// BlurView
implementation 'com.eightbitlab:blurview:1.6.6' // 追加
}
次に各アイテム用のレイアウトファイルを作成します。
まずはふつうのアイテム用です。
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="300dp" android:padding="5dp"> <ImageView android:id="@+id/visibleImageView" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="center" android:src="@drawable/android_icon"/> </androidx.constraintlayout.widget.ConstraintLayout>
ImageViewが配置されているだけです。
そして肝心要のすりガラス用レイアウトです。
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="300dp" android:padding="5dp" xmlns:app="http://schemas.android.com/apk/res-auto"> <ImageView android:id="@+id/blurImageView" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:adjustViewBounds="true" android:scaleType="center" android:src="@drawable/apple_icon" android:background="@color/teal_200"/> <!-- すりガラス効果をかけるView --> <eightbitlab.com.blurview.BlurView android:id="@+id/blurView" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintTop_toTopOf="@id/blurImageView" app:layout_constraintStart_toStartOf="@id/blurImageView" app:layout_constraintEnd_toEndOf="@id/blurImageView" app:layout_constraintBottom_toBottomOf="@id/blurImageView" app:blurOverlayColor="@android:color/transparent" > <!-- 自主規制君 --> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:adjustViewBounds="true" android:scaleType="centerInside" android:layout_gravity="bottom" android:src="@drawable/miserarenaiyo" /> </eightbitlab.com.blurview.BlurView> </androidx.constraintlayout.widget.ConstraintLayout>
ImageViewが配置されているのは変わりませんが、その下にBlurViewという耳なれないViewが追加されています。
このViewに対して後ほどすりガラス効果をかけていきます。
次にRecyclerView関連の実装です。
RecyclerViewに表示するアイテムクラス。今回はSealedクラスを使います。
sealed class Content { /** すりガラス対象アイテム */ object BlurItem : Content() /** ふつうのアイテム */ object VisibleItem : Content() }
続いてRecyclerViewのアダプターです。
class ItemAdapter : RecyclerView.Adapter<ItemAdapter.BaseViewHolder>() { companion object { private const val VIEW_TYPE_VISIBLE = R.layout.layout_visible_item private const val VIEW_TYPE_BLUR = R.layout.layout_blur_item } var contentList = mutableListOf<Content>() private lateinit var mViewGroup : ViewGroup open class BaseViewHolder(view : View) : RecyclerView.ViewHolder(view) inner class VisibleItemViewHolder(view : View) : BaseViewHolder(view) inner class BlurItemViewHolder(view: View) : BaseViewHolder(view) override fun getItemViewType(position: Int): Int { return when (contentList[position]) { is Content.VisibleItem -> VIEW_TYPE_VISIBLE is Content.BlurItem -> VIEW_TYPE_BLUR } } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder { return when (viewType) { VIEW_TYPE_VISIBLE -> { val view = LayoutInflater.from(parent.context).inflate(R.layout.layout_visible_item, parent, false) VisibleItemViewHolder(view) } VIEW_TYPE_BLUR -> { mViewGroup = parent val view = LayoutInflater.from(parent.context).inflate(R.layout.layout_blur_item, parent, false) BlurItemViewHolder(view) } else -> { val view = LayoutInflater.from(parent.context).inflate(R.layout.layout_visible_item, parent, false) VisibleItemViewHolder(view) } } } override fun getItemCount(): Int { return contentList.size } override fun onBindViewHolder(holder: BaseViewHolder, position: Int) { when (holder) { is VisibleItemViewHolder -> {} is BlurItemViewHolder -> { // すりガラスをかける holder.itemView.blurView.setupWith(mViewGroup) .setBlurAlgorithm(RenderScriptBlur(MainActivity.activity)) .setBlurRadius(6f) .setHasFixedTransformationMatrix(false) } } }
よくある表示アイテムごとにレイアウトを変更するやつですね。 Sealedクラスを使うことで分岐処理が分かりやすくなります。
注目すべきはonBindViewHolder内のこちらの処理。先ほどのBlurViewに対して設定をしています。
// すりガラスをかける holder.itemView.blurView.setupWith(mViewGroup) .setBlurAlgorithm(RenderScriptBlur(MainActivity.activity)) .setBlurRadius(6f) .setHasFixedTransformationMatrix(false)
setHasFixedTransformationMatrix(false)とすることで、RecyclerViewのようなスクロールコンテナ内でもすりガラスがキレイにかかるようになります。
最後にMainActivityの中身です。先ほどのRecyclerViewに対して設定を施します。
今回は3の倍数番目のアイテムにすりガラスをかけます。
class MainActivity : AppCompatActivity() { companion object { lateinit var activity: AppCompatActivity } init { activity = this } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val itemAdapter = ItemAdapter() for (i in 1 until 100) { if (i % 3 == 0 && i != 0) { itemAdapter.contentList.add(Content.BlurItem) } else { itemAdapter.contentList.add(Content.VisibleItem) } } recyclerView.adapter = itemAdapter } }
※MainActivityのレイアウトファイルはRecyclerViewが配置されているだけなので省略
おわりに
今回はRecyclerView上のアイテムにすりガラスをかける方法を紹介しました。 「iOSと同じ表示にしといて！」と言われて困った方は、ぜひ上記の内容を試してみてください。
