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

如此便完成了这个案例的实现效果。