Освой программирование играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

CardView (Карточка)

Новый компонент CardView появился в Android Lollipop (API 21), но благодаря библиотеке совместимости доступен и для старых устройств. По сути является дальнейшим развитием FrameLayout и позволяет создавать красивую карточку с тенью и закруглёнными углами, который служит контейнером для других компонентов.

Доступен на панели инструментов в разделе Custom - AppCompat. В этом случае зависимость пропишется автоматически.

Подключаем библиотеку вручную в Gradle:


compile 'com.android.support:cardview-v7:25.0.0'

Создадим разметку и добавим в карточку текстовое поле.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp"
        style="@style/MyCardViewStyle">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Карточка на кота Василия"
            android:gravity="center_vertical|center_horizontal|top"
            android:textSize="36sp" />
    </android.support.v7.widget.CardView>

</RelativeLayout>

Запустим проект и видим следующее. Это простейший вариант для знакомства.

CardView

Стилизация

Добавим стили для карточки в styles.xml:


<style name="MyCardViewStyle" parent="Theme.AppCompat.Light">  
    <item name="cardCornerRadius">2dp</item>
    <item name="cardElevation">2dp</item>
    <item name="contentPaddingBottom">24dp</item>
    <item name="contentPaddingTop">24dp</item>
    <item name="contentPaddingLeft">16dp</item>
    <item name="contentPaddingRight">16dp</item>
    <item name="cardBackgroundColor">@color/indigo</item>
</style>  

Подключаем через атрибут android:style.

В последнее время карточки часто используют в RecyclerView. Например, в этом уроке - Toolbar+RecyclerView+CardView+FAB

Реклама