CardView 卡片布局


轉自:https://www.baidu.com/link?url=WwHvfX3PB_egfQ6GFwxsDeq4NDzB2AW-zaTzskkNXs0qWnIcHyh3pN3Oqe6YO1lAmVMiGCWFAU4GmhKkRApTC_&wd=&eqid=e2338ad30006445f000000065cad4bd9

CardView適用於實現卡片式布局效果的重要控件,由appcompat-v7庫提供,實際上CardView也是一個FrameLayout,只是額外提供了圓角和陰影效果,看上去有立體的感覺。

一般CardView都用在ListView的item布局中。

使用方法很簡單

1:在app的build.gradle文件里面添加依賴庫,注意版本要一致,不然會出錯。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support:cardview-v7:25.2.0'
    testCompile 'junit:junit:4.12'
}

2.然后就可以直接在xml中使用CardView了,就是這么簡單,被包含的View就會產生卡片的圓角和陰影的立體效果

<android.support.v7.widget.CardView
        android:id="@+id/cardView"
        app:cardCornerRadius="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="棒冰行動,公益傳播設計夏令營" />
    </android.support.v7.widget.CardView>

3.最后,在Activity中,屬性可以動態設置,也可以在xml里面靜態設置

public class MainActivity extends AppCompatActivity {

    private CardView cardView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cardView = (CardView)findViewById(R.id.cardView);

        cardView.setRadius(8);//設置圖片圓角的半徑大小

        cardView.setCardElevation(8);//設置陰影部分大小

        cardView.setContentPadding(5,5,5,5);//設置圖片距離陰影大小
    }
}

4.最后附上CardView的常用屬性,以及CardView的視覺效果

app:cardBackgroundColor這是設置背景顏色 
app:cardCornerRadius這是設置圓角大小 
app:cardElevation這是設置z軸的陰影 
app:cardMaxElevation這是設置z軸的最大高度值 
app:cardUseCompatPadding是否使用CompatPadding 
app:cardPreventCornerOverlap是否使用PreventCornerOverlap 
app:contentPadding 設置內容的padding 
app:contentPaddingLeft 設置內容的左padding 
app:contentPaddingTop 設置內容的上padding 
app:contentPaddingRight 設置內容的右padding 
app:contentPaddingBottom 設置內容的底padding

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM