美文网首页
CardView基本使用

CardView基本使用

作者: aidlFor | 来源:发表于2018-07-08 13:39 被阅读0次

    CardView继承自FrameLayout,并且可以设置圆角和阴影,让卡片变得更具有立体感。

    1. 引入CardView

      implementation 'com.android.support:cardview-v7:27.1.1'
      

    2)xml >> layout_cardview

    <?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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    
    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="20dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="20dp"
        app:cardBackgroundColor="@color/cardview_dark_background"
        >
    
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            android:layout_gravity="center"
            android:scaleType="centerInside"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@android:color/white"
            android:text="银行卡"/>
    
    </android.support.v7.widget.CardView>
    
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="改变圆角和阴影的强度"/>
    
    </LinearLayout>
    

    因为继承自FrameLayout,可以看到CardView可以包容组件,这里面有两个属性实现了立体感的效果, app:cardCornerRadius圆角和 app:cardElevation阴影,app:cardBackgroundColor是设置卡片的背景,也可以在JAVA中设置

         btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                cardView.setRadius(100);
                cardView.setCardElevation(100);
            }
        });
    

    效果如下


    CardView.png

    相关文章

      网友评论

          本文标题:CardView基本使用

          本文链接:https://www.haomeiwen.com/subject/zvhouftx.html