CardView实现卡片布局效果

CardView是什么

1. Android5.0之后新增
2. com.android.support:cardview-v7:26.1.0独立引入
   （androidx.cardview:cardview:1.0.0）
3. 继承自FrameLayout，方便作为其他控件容器，添加3D阴影和圆角效果

CardView常用属性

属性	描述
app:cardBackgroundColor	设置背景色
app:cardCornerRadius	设置圆角半径
app:contentPadding	设置内部padding
app:cardElevation	设置阴影大小
app:cardUseCompatPadding	默认false，用于5.0及以上，true则添加额外的padding绘制阴影
app:cardPreventCornerOverlap	用于5.0以下，添加额外的padding，防止内容和圆角重叠
android:foreground="?attr/selectableItemBackground"	点击效果，android6.0以上，或者FrameLayout中生效

属性效果

Demo

添加依赖
implementation 'androidx.cardview:cardview:1.0.0'

activity_main

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/id_lv_msgList"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#ffffff"
   android:divider="@null"
   android:paddingTop="8dp"
   tools:context=".MainActivity">
</ListView>

item_msg.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <androidx.cardview.widget.CardView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginLeft="16dp"
       android:layout_marginRight="16dp"
       android:layout_marginTop="16dp"
       android:layout_marginBottom="16dp"

       app:cardCornerRadius="8dp"
       app:cardElevation="4dp"
       >
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           >
           <ImageView
               android:id="@+id/id_iv_img"
               android:layout_width="match_parent"
               android:layout_height="150dp"
               android:scaleType="centerCrop"
               tools:src="@mipmap/img01"
               />
           <TextView
               android:id="@+id/id_tv_title"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_margin="8dp"
               android:textColor="#000000"
               android:textSize="16sp"
               android:textStyle="bold"
               tools:text="title1"
               />
           <TextView
               android:id="@+id/id_tv_content"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_marginLeft="8dp"
               android:layout_marginRight="8dp"
               android:layout_marginBottom="8dp"
               tools:text="content"
               />
       </LinearLayout>
   </androidx.cardview.widget.CardView>
</FrameLayout>

Msg.java

public class Msg {
    private int id;
    private int imgResId;
    private String title;
    private String content;

    public Msg() {
    }

    public Msg(int id, int imgResId, String title, String content) {
        this.id = id;
        this.imgResId = imgResId;
        this.title = title;
        this.content = content;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getImgResId() {
        return imgResId;
    }

    public void setImgResId(int imgResId) {
        this.imgResId = imgResId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

MsgLab.java

import java.util.ArrayList;
import java.util.List;

public class MsgLab {
    public static List<Msg> generateMockList() {
        List<Msg> msgList = new ArrayList<>();
        Msg msg = new Msg(1, R.mipmap.img01, "title1", "content1");
        msgList.add(msg);
        msg = new Msg(2, R.mipmap.img02, "title2", "content2");
        msgList.add(msg);
        msg = new Msg(3, R.mipmap.img03, "title3", "content3");
        msgList.add(msg);
        msg = new Msg(4, R.mipmap.img04, "title4", "content4");
        msgList.add(msg);
        msg = new Msg(5, R.mipmap.img05, "title5", "content5");
        msgList.add(msg);
        return msgList;
    }
}

MsgAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class MsgAdapter extends BaseAdapter {

    private Context mContent;
    private LayoutInflater mInflater;
    private List<Msg> mDatas;

    public MsgAdapter(Context content, List<Msg> dats) {
        mContent = content;
        mInflater = LayoutInflater.from(content);
        mDatas = dats;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public Msg getItem(int position) {
        return mDatas.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder=null;
        if(convertView==null){
            convertView=mInflater.inflate(R.layout.item_msg,parent,false);
            viewHolder=new ViewHolder();
            viewHolder.mIvImg=convertView.findViewById(R.id.id_iv_img);
            viewHolder.mTvTitle=convertView.findViewById(R.id.id_tv_title);
            viewHolder.mTvContent=convertView.findViewById(R.id.id_tv_content);
            convertView.setTag(viewHolder);
        }else{
            viewHolder=(ViewHolder)convertView.getTag();
        }
        Msg msg=mDatas.get(position);
        viewHolder.mIvImg.setImageResource(msg.getImgResId());
        viewHolder.mTvTitle.setText(msg.getTitle());
        viewHolder.mTvContent.setText(msg.getContent());
        return convertView;
    }

    public static class ViewHolder{
        ImageView mIvImg;
        TextView mTvTitle;
        TextView mTvContent;
    }
}

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ListView mListView;
    private MsgAdapter mAdapter;
    private List<Msg> mDatas=new ArrayList<>();

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

        mListView=findViewById(R.id.id_lv_msgList);
        mDatas.addAll(MsgLab.generateMockList());
        mDatas.addAll(MsgLab.generateMockList());

        mAdapter=new MsgAdapter(this,mDatas);
        mListView.setAdapter(mAdapter);
    }
}

本文地址：https://blog.csdn.net/u011546312/article/details/108137150