CardViewを使用した簡単なサンプル

こんにちは！
イトナブ石巻のとみぎです。

今回は、CardViewを使った簡単なサンプルを作ってみました。

サンプルはこんな感じです↓

こちらのサンプルコードの詳細は以下をご覧ください。

【MainActivity.java】

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout cardLinear = (LinearLayout)this.findViewById(R.id.cardLinear);
        cardLinear.removeAllViews();

        int cardSize = 15; // カードの枚数

        for(int i = 0; i < cardSize; i++) {
            LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
            LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.card, null);
            CardView cardView = (CardView) linearLayout.findViewById(R.id.cardView);
            TextView textBox = (TextView) linearLayout.findViewById(R.id.textBox);
            textBox.setText("CardView " + i);
            cardView.setTag(i);
            cardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, String.valueOf(v.getTag()) + "番目のCardViewがクリックされました", Toast.LENGTH_SHORT).show();
                }
            });
            cardLinear.addView(linearLayout,i);
        }
    }
}

【Activity_main.xml】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView"
        android:fillViewport="false">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cardLinear">
        </LinearLayout>
    </ScrollView>

</LinearLayout>

【card.xml】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="1"
    android:id="@+id/cardLayout">

    <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:foreground="?android:attr/selectableItemBackground"
        android:id="@+id/cardView"
        android:layout_marginBottom="10dp">

        <!-- カードに載せる情報 -->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:id="@+id/cardRelative"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="170dp"
                android:id="@+id/imageView"
                android:src="@mipmap/ic_launcher"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="CardView"
                android:id="@+id/textBox"
                android:textSize="30sp"
                android:layout_marginLeft="17dp"
                android:layout_marginStart="17dp"
                android:gravity="center_vertical" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

今回のサンプルは1つのクラスと2つのxmlファイルのシンプルな構成となっています。
アプリの動作は、カードがタップされたらそのカードに対応したToast文が表示されるのみです。

ここからOnClickの動作を次のActivityに遷移させたり、cardView.xmlのレイアウトをよりカスタムして見た目を変えていく等々、アレンジができるのではと思います。


プロジェクトはGitHub(以下リンク)で公開してますので、こちらもご参考頂ければ幸いです。
GitHub - CardViewSample

posted by とみぎ