CardView를 앱에 배포

CardView는 카드형 UI를 실현하는 Android API 중 하나입니다. FrameLayout을 상속합니다.

도입 방법



1.build.gradle에 다음을 추가합니다.



build.gradle
dependencies {
        compile "com.android.support:cardview-v7:+"
}

2.xml 파일을 만듭니다.



메인 화면에는 CardView를 동적으로 추가합니다.

메인 화면

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"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:id="@+id/cardLinear">
        </LinearLayout>
    </ScrollView>

</LinearLayout>


CardView 부속

test_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="match_parent"
    android:weightSum="1">

    <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="78dp"
        card_view:cardCornerRadius="4dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:id="@+id/cardView"
        >

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

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="CardView"
                android:id="@+id/textBox"
                android:textSize="30dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="17dp"
                android:layout_marginStart="17dp" />

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



이런 느낌의 레이아웃을 할 수 있습니다.

3. 프로그램에서 제어



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

 for(int i = 0; i< 5; i++) {
   LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
        LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.test_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);
    }
}

이런 느낌이 들었습니다.



터치했을 때 반응을 원한다면



CardView는 OnClickListener와 OnLongClickListener를 구현하여 터치했을 때 이벤트가 발생하지만 ListView처럼 터치되었습니다! 적인 반응은 해주지 않습니다. 그래서 CardView의 xml에 다음 내용을 추가합니다.
android:foreground="?android:attr/selectableItemBackground"

좋은 웹페이지 즐겨찾기