web-dev-qa-db-ja.com

仕切りのあるカードビュー

多くのアプリで使用されている仕切りでCardViewsCardViewsであるかどうかわかりません)を見たので、それらを作成する簡単な方法があると思います。私はそれが正確にどのように行われているのか尋ねたいと思いましたか?それらはCardViewsですか?

Viewの名前が正確にわからなかったので、それらについて詳しく知ることができませんでした。だから誰かがコードを使って例を教えてくれたら、ありがたいです。

画像の例: enter image description here

20
Amer Mograbi

このコードを使用して、これが役立つ場合があります

 <Android.support.v7.widget.CardView
        Android:id="@+id/cardview"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="@dimen/margin_large"
        Android:layout_marginRight="@dimen/margin_large"
        Android:elevation="100dp"
        card_view:cardBackgroundColor="@Android:color/white"
        card_view:cardCornerRadius="8dp">

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="50dp"
                Android:gravity="center_vertical"
                Android:paddingLeft="25dp">

                <TextView
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="Conversations" />
            </LinearLayout>

            <View
                Android:layout_width="match_parent"
                Android:layout_height="2dp"
                Android:background="@Android:color/darker_gray" />

            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical"
                Android:paddingLeft="30dp"
                Android:paddingTop="20dp"
                Android:paddingBottom="10dp">

                <TextView
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:text="game" />
                    ...
            </LinearLayout>
        </LinearLayout>
    </Android.support.v7.widget.CardView>
24

表示されているスクリーンショットは、間に仕切りとしてビューがある通常のCardViewを示しています。このようなものを検索する場合、DividerViewなどはありません。高さと背景を持つ単純なViewを使用するだけです。

私のライブラリには似たようなものがあります。これを使用して仕切りを作成します。

<View
        Android:layout_width="match_parent"
        Android:layout_height="1dp"
        Android:background="@color/stroke"/>

card_library.xml

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

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:gravity="center_vertical"
        Android:orientation="horizontal">

        <TextView
            Android:id="@+id/libraryname"
            style="@style/CardTitle"
            Android:fontFamily="sans-serif-condensed"
            Android:textStyle="normal"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:maxLines="1"/>

        <TextView
            Android:id="@+id/libraryversion"
            style="@style/CardTitle"
            Android:fontFamily="sans-serif-condensed"
            Android:textStyle="normal"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_marginLeft="4dp"
            Android:layout_marginTop="4dp"
            Android:gravity="left|bottom"
            Android:maxLines="1"
            Android:textSize="12sp"/>

        <TextView
            Android:id="@+id/librarycreator"
            style="@style/CardTitle"
            Android:fontFamily="sans-serif-condensed"
            Android:textStyle="normal"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginTop="2dp"
            Android:gravity="right"
            Android:maxLines="2"
            Android:textSize="14sp"/>
    </LinearLayout>

    <View
        Android:layout_width="match_parent"
        Android:layout_height="1dp"
        Android:layout_marginTop="4dp"
        Android:background="@color/stroke"/>

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:gravity="center_vertical"
        Android:padding="4dp">

        <TextView
            Android:id="@+id/description"
            style="@style/CardText"
            Android:fontFamily="sans-serif-condensed"
            Android:textStyle="normal"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_marginLeft="8dp"
            Android:maxLines="20">
        </TextView>
    </LinearLayout>

</LinearLayout>

これは次のようになります。

Divider

10
mikepenz

App:cardElevation = "0dp"を設定してから、ビューを使用します-以下を参照

<Android.support.v7.widget.CardView
Android:id="@+id/cv"
xmlns:Android="http://schemas.Android.com/apk/res/Android"
app:cardElevation="0dp"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
xmlns:app="http://schemas.Android.com/apk/res-auto">

<!-- Insert UI elements -->

    <View
        Android:layout_width="fill_parent"
        Android:background="@Android:color/darker_gray"
        Android:layout_height="2dp"/>

</Android.support.v7.widget.CardView>
2
npr