CardView以及ListView的實體之創建出一個可視化的界面

案例的效果圖為

可以向下翻動，
一.在build.gradle中添加上

implementation 'androidx.cardview:cardview:1.0.0'

出錯的可以參考
https://blog.csdn.net/Lemon_wzq/article/details/103513024
二.構造出我們所需要的視圖界面
主頁面的布局效果為

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/id_lv_msgList"
android:divider="@null"
android:background="#ffffff"
android:paddingTop="8dp"
tools:context="com.example.myapplication.MainActivity">

</ListView>

再構造出我們要添加的視圖頁面，創建一個item_msg的布局檔案內容為

<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"
    //這里的形似于@dimen/margin_item_msg_*_*"目的是為了在不同的安卓版本5.0以上或5.0以下來進行區分的，這兩個檔案就不在寫了
    android:layout_marginLeft="@dimen/margin_item_msg_l_r"
    android:layout_marginRight="@dimen/margin_item_msg_l_r"
    android:layout_marginTop="@dimen/margin_item_msg_t_b"
    android:layout_marginBottom="@dimen/margin_item_msg_t_b"
    app:cardUseCompatPadding="false"
    android:foreground="?attr/selectableItemBackground"
    app:cardPreventCornerOverlap="true"
    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="@drawable/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="16dp"
            android:textStyle="bold"
            tools:text="使用慕課網學習Android技術"
            />

        <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="使用慕課網學習Android技術使用慕課網學習Android技術使用慕課網學習Android技術使用慕課網學習Android技術"
            />


    </LinearLayout>


    </androidx.cardview.widget.CardView>

</FrameLayout>

三.完成物體類的創建，資料的輔助類
1.創建出一個Msg

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;
}
}

2.創建出一個MsgLab

public class MsgLab {

public static List<Msg> generateMockList() {
    List<Msg> msgList = new ArrayList<>();
//利用泛型，以及上一個檔案來讀取出我們所需要的內容
    Msg msg = new Msg(1,
            R.drawable.img01,
            "如何才能不錯過人工智能的時代？",
            "下一個時代就是機器學習的時代，慕課網發大招，與你一起預見未來！");
    msgList.add(msg);

    msg = new Msg(2,
            R.drawable.img02,
            "關于你的面試、實習心路歷程",
            "獎品豐富，更設有參與獎，隨機抽取5名幸運用戶，獲得慕課網付費面試課程中的任意一門！");
    msgList.add(msg);

    msg = new Msg(3,
            R.drawable.img03,
            "狗糧不是你想吃，就能吃的！",
            "你的朋友圈開始了嗎？一半秀恩愛，一半扮感傷！不怕，還有慕課網陪你堅強地走下去！！");
    msgList.add(msg);

    msg = new Msg(4,
            R.drawable.img04,
            "前端跳槽面試那些事兒",
            "作業有幾年了，專案偏簡單有點拿不出手怎么辦？ 目前還沒畢業，正在自學前端，請問可以找到一份前端作業嗎，我該怎么辦？");
    msgList.add(msg);

    msg = new Msg(5,
            R.drawable.img05,
            "圖解程式員怎么過七夕？",
            "哈哈哈哈，活該單身25年！");
    msgList.add(msg);

    return msgList;
}

}

四.功能實作
先創建出一個MsgAdapter

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 mContext;
private LayoutInflater mInflater;
private List<Msg> mDatas;

public MsgAdapter(Context context, List<Msg> datas) {
    mContext = context;
    mInflater = LayoutInflater.from(context);
    mDatas = datas;
}


@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;

}
}

最后在主頁面來實作方法
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 mLvMsgList;
private List<Msg> mDatas = new ArrayList<>();
private MsgAdapter mAdapter;

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

    mLvMsgList = findViewById(R.id.id_lv_msgList);

    mDatas.addAll(MsgLab.generateMockList());
    mDatas.addAll(MsgLab.generateMockList());

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


}
}

如此便完成了這個案例的實作效果，