纸墨设计文档: 卡片 Card

jopen 9年前

在 谷歌官方的纸墨设计文档 中介绍如下：

卡片是包含了一组相关信息，通过卡片显示摘要信息，点击该卡片可以进入详情界面。

如何使用

  • 在项目的 build.gradle 文件中添加 appcompat 库：

Java 

dependencies {      compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version  }
dependencies {      compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version  }
</div>
  • 在布局文件中使用 CardView

XHTML 

<android.support.v7.widget.CardView        android:layout_width="match_parent"      android:layout_height="200dp">        <TextView          android:text="Hello World!"          android:layout_width="wrap_content"          android:layout_height="wrap_content"/>    </android.support.v7.widget.CardView>
<android.support.v7.widget.CardView        android:layout_width="match_parent"      android:layout_height="200dp">         <TextView          android:text="Hello World!"          android:layout_width="wrap_content"          android:layout_height="wrap_content"/>     </android.support.v7.widget.CardView>  
</div>

如何修改样式？

  • 在你的 styles.xml 中定义自定义样式：

XHTML 

<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>
<stylename="MyCardViewStyle" parent="Theme.AppCompat.Light">        <itemname="cardCornerRadius">2dp</item>      <itemname="cardElevation">2dp</item>      <itemname="contentPaddingBottom">24dp</item>      <itemname="contentPaddingTop">24dp</item>      <itemname="contentPaddingLeft">16dp</item>      <itemname="contentPaddingRight">16dp</item>      <itemname="cardBackgroundColor">@color/indigo</item>  </style>  
</div>
  • 通过 style 属性来使用该theme

XHTML 

<android.support.v7.widget.CardView        android:layout_width="match_parent"      android:layout_height="wrap_content"      style="@style/MyCardViewStyle">
<android.support.v7.widget.CardView        android:layout_width="match_parent"      android:layout_height="wrap_content"      style="@style/MyCardViewStyle">    
</div> </div> </div>

来自： http://blog.chengyunfeng.com/?p=841

相关经验