CardView的那点事儿
概述
官方說明和文檔
CardView官方API
創建列表與卡片
類繼承關系:
java.lang.Object
? android.view.View
? android.view.ViewGroup
? android.widget.FrameLayout
? android.support.v7.widget.CardView
從官方的文檔中我們可以看出:
CardView:有圓角的背景和陰影的FrameLayout。
CardView 擴展 FrameLayout 類別并讓您能夠顯示卡片內的信息,這些信息在整個平臺中擁有一致的呈現方式。CardView 小組件可擁有陰影和圓角。
如果要使用陰影創建卡片,請使用 card_view:cardElevation 屬性。CardView 在 Android 5.0(API 級別 21)及更高版本中使用真實高度與動態陰影,而在早期的 Android 版本中則返回編程陰影實現。如需了解詳細信息,請參閱保持兼容性
使用以下屬性定制 CardView 的外觀:
- 如果要在布局中設置圓角半徑,請使用 card_view:cardCornerRadius 屬性。
- 如果要在代碼中設置圓角半徑,請使用 CardView.setRadius 方法。
- 如果要設置卡片的背景顏色,請使用 card_view:cardBackgroundColor 屬性。
常用屬性:
- card_view:cardElevation 陰影的大小
- card_view:cardMaxElevation 陰影最大高度
- card_view:cardBackgroundColor 卡片的背景色
- card_view:cardCornerRadius 卡片的圓角大小
- card_view:contentPadding 卡片內容于邊距的間隔
- card_view:contentPaddingBottom
- card_view:contentPaddingTop
- card_view:contentPaddingLeft
- card_view:contentPaddingRight
- card_view:contentPaddingStart
- card_view:contentPaddingEnd
- card_view:cardUseCompatPadding 設置內邊距,V21+的版本和之前的版本仍舊具有一樣的計算方式
- card_view:cardPreventConrerOverlap 在V20和之前的版本中添加內邊距,這個屬性為了防止內容和邊角的重疊
一般來說和RecyclerView搭配起來使用效果更加~
如何使用
添加依賴項
RecyclerView 與 CardView 小組件為 v7 支持內容庫的一部分
將這些 Gradle 依賴項添加至您的應用模塊
dependencies {...compile 'com.android.support:cardview-v7:21.0.+'compile 'com.android.support:recyclerview-v7:21.0.+' }布局文件中編寫CardView
注意事項:
如果使用 card_view:cardCornerRadius 或者 card_view:cardBackgroundColor,布局文件根布局中需要添加namespace,如下:
xmlns:card_view=”http://schemas.android.com/apk/res-auto”
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:card_view="http://schemas.android.com/apk/res-auto"... ><!-- A CardView that contains a TextView --><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"><TextView android:id="@+id/info_text"android:layout_width="match_parent"android:layout_height="match_parent" /></android.support.v7.widget.CardView> </LinearLayout>示例
效果圖
5.0以上的效果
5.0以下版本的效果
Code
CardViewAct.java
package demo.turing.com.materialdesignwidget.cardView;import android.os.Build; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.CardView; import android.widget.SeekBar; import android.widget.Toast;import demo.turing.com.materialdesignwidget.R;public class CardViewAct extends AppCompatActivity {private CardView mCardView;private SeekBar mRadiusSeekBar,mElevationSeekBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_card_view);mCardView = (CardView)findViewById(R.id.cardview);mRadiusSeekBar = (SeekBar)findViewById(R.id.cardview_radius_seekbar);mRadiusSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){@Overridepublic void onStopTrackingTouch(SeekBar seekBar){// TODO Auto-generated method stub}@Overridepublic void onStartTrackingTouch(SeekBar seekBar){// TODO Auto-generated method stub}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser){mCardView.setRadius(progress);}});mElevationSeekBar = (SeekBar)findViewById(R.id.cardview_elevation_seekbar);mElevationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}/*** 加了 @TargetApi(Build.VERSION_CODES.LOLLIPOP)* 在API21上運行時沒有問題的,但是低版本的會報錯,最好做下判斷* @param seekBar* @param progress* @param fromUser*/@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {mCardView.setElevation(progress);} else{Toast.makeText(CardViewAct.this,"5.0以下版本不支持~",Toast.LENGTH_SHORT).show();}}});} }activity_card_view.xml
<?xml version="1.0" encoding="utf-8"?> <ScrollView 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="match_parent"><LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"><android.support.v7.widget.CardView android:id="@+id/cardview"android:layout_width="fill_parent"android:layout_height="160dp"android:layout_marginLeft="@dimen/margin_large"android:layout_marginRight="@dimen/margin_large"android:elevation="100dp"card_view:cardBackgroundColor="@color/cardview_initial_background"card_view:cardCornerRadius="8dp"><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="@dimen/margin_medium"android:text="@string/cardview_contents"/></android.support.v7.widget.CardView><LinearLayout android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/margin_large"android:orientation="horizontal"><TextView android:layout_width="@dimen/seekbar_label_length"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:text="@string/cardview_radius_seekbar_text" /><SeekBar android:id="@+id/cardview_radius_seekbar"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_medium" /></LinearLayout><LinearLayout android:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextView android:layout_width="@dimen/seekbar_label_length"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:text="@string/cardview_elevation_seekbar_text" /><SeekBar android:id="@+id/cardview_elevation_seekbar"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_medium" /></LinearLayout></LinearLayout></ScrollView>更多注意事項~
總結
以上是生活随笔為你收集整理的CardView的那点事儿的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: RecyclerView的那点事儿
- 下一篇: Android Scroll分析