[Android] CardViewでカード型のレイアウト表示を作成する-Androidアプリ個人開発者の実践的アドバイス集

テキストなどのデータを表示する際、ただテキストを表示したり、線で区切るだけというのは少々味気ない印象を受けてしまいます。

ユーザーにとってより魅力的なUIデザインを持つアプリにするために、`CardView`というビューを実装することで、簡単に以下の赤い四角で囲ったようなカード型の表示を実装することができます。

## build.gradleへのライブラリ追加
  
まずは、build.gradleのdependency以下にCardViewを使うためのライブラリを追加します。
  
```kotlin
implementation("androidx.cardview:cardview:1.0.0")
```

## XMLでのCardView宣言

XMLでは以下のように`androidx.cardview.widget.CardView`でCardViewを宣言できます。
  
```xml
<androidx.cardview.widget.CardView
    android:id="@+id/cvWidget"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#FFFFFF"
    app:cardElevation="4dp"
    android:padding="8dp">
</androidx.cardview.widget.CardView>
```

CardViewの属性設定で特徴的なのは`cardElevation`ですね。これは、カードの浮き出し効果を制御する属性です。視覚的な奥行きや立体感を与えることができます。値はdp単位で指定され、値が大きいほど、カードがより浮き出て見えます。これにより、UIデザインに奥行きや重なりが与えられます。

また、上記の例ではCardViewのみ書いていますが、CardView内にテキストを入れたければTextViewを記述すれば良いです。CardView内でConstraintLayoutなども設定できるので、複雑なレイアウトを組み込むことも可能です。
  
  
## CardViewの実装
  
それではkotlinでの実装例ですが、単に内部に書かれた情報を表示するだけなら特にすることはありません。
  
他のビューと同じように、リソースIDを指定するだけでアクセスできるようになるので、例えばボタンが押された時にのみCardViewを表示するなら`visibility`の設定を変えることで実現できます。フラグメント内なら以下のようになります。

```kotlin
private lateinit var _cardView: androidx.cardview.widget.CardView
  
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
    _cardView = view.findViewById(R.id.cvWidget)
    _cardView.visibility = View.INVISIBLE
    Button.setOnClickListener {
        _cardView.visibility = View.VISIBLE
    }
}
```

[Android] CardViewでカード型のレイアウト表示を作成する

0 件のコメント:

コメントを投稿

このブログを検索

ラベル

自己紹介

人気の投稿

不正行為を報告

リリースしたAndroidアプリ