Android(安卓)Material Design之CardView（卡片式布局）
16lz
2021-01-26
目录
1.CardView概念
2.CardView常用属性
3.CardView的使用
3.1 创建CardView
3.2 CardView的使用注意事项
4.CardView案例
4.1 效果图
4.2 步骤1：在MainActivity.xml中添加ListView
4.3 步骤2：为ListView的item创建布局，并在布局中加入GridView
4.4 步骤3：创建适配器,MsgAdapter.java
4.5 步骤4：创建要展示的内容信息实体类
4.6 步骤5：创建数据工具类，获取内容信息数据
4.7 步骤6：在MainActivity.java进行配置
1.CardView概念
CardView是Android5.0之后新增的卡片式控件，以往，我们需要自定义Shape来实现圆角和阴影效果；现在，这些效果集成到了CardView的属性里。 实际上，CardView也可以看做是一个FrameLayout，继承自FrameLayout，方便作为其他控件容器，提供了圆角和阴影等效果，看上去有立体的感觉。
使用的时候需要添加依赖库，应该与appcompat-v7保持相同的版本号，避免出现问题。
com.android.support:cardview-v7:版本号 添加依赖库如下所示：
dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:cardview-v7:28.0.0' ......}
2.CardView常用属性
常用属性如下：
app:cardBackgroundColor 设置背景颜色 app:cardCornerRadius 设置圆角弧度，数值越大，圆角弧度越大 app:contentPadding 设置内容的padding app:cardElevation 设置卡片的高度，越高，投影范围越大，阴影效果越淡；越小，则越浓 app:cardUseCompatPadding 默认为false，表示是否使用CompatPadding，用于5.0以上，true则表示
添加额外的padding绘制阴影
app:cardPreventCornerOverlap 默认为true，表示是否使用CompatPadding，用于5.0以下，true则表示
添加额外的padding，防止内容和圆角重叠。
android:foreground 可以用来设置点击效果，只在FrameLayout中支持
3.CardView的使用
3.1 创建CardView
CardView的创建需要在布局文件中，可作为其他控件的容器，实例如下：
<?xml version="1.0" encoding="utf-8"?>效果图如下：
3.2 CardView的使用注意事项
CardView只有cardBackgroundColor设置的背景颜色才会生效，background设置的背景颜色不会生效，即便如果cardBackgroundColor没有设置颜色。
4.CardView案例
4.1 效果图
4.2 步骤1：在MainActivity.xml中添加ListView
<?xml version="1.0" encoding="utf-8"?>注意：这里使用了android:divider="@null"，使得item之间的横线被隐藏了。
4.3 步骤2：为ListView的item创建布局，并在布局中加入CardView
<?xml version="1.0" encoding="utf-8"?>4.4 步骤3：创建适配器,MsgAdapter.java
public class MsgAdapter extends BaseAdapter{ private ListmMsgList; private LayoutInflater mLayoutInflater; private Context mContext; public MsgAdapter(List msgList, Context context) { this.mMsgList = msgList; this.mLayoutInflater = LayoutInflater.from(context); this.mContext = context; } @Override public int getCount() { return mMsgList.size(); } @Override public Msg getItem(int position) { return mMsgList.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 = mLayoutInflater.inflate(R.layout.item_msg,parent,false); viewHolder = new ViewHolder(); viewHolder.imageView = convertView.findViewById(R.id.imageview); viewHolder.titleTV = convertView.findViewById(R.id.title_tv); viewHolder.contentTV = convertView.findViewById(R.id.content_tv); convertView.setTag(viewHolder); }else{ viewHolder = (ViewHolder) convertView.getTag(); } Msg msg = mMsgList.get(position); viewHolder.imageView.setImageResource(msg.getImageResourceID()); viewHolder.titleTV.setText(msg.getTitle()); viewHolder.contentTV.setText(msg.getContent()); return convertView; } private static class ViewHolder{ ImageView imageView; TextView titleTV; TextView contentTV; }} 4.5 步骤4：创建要展示的内容信息实体类
public class Msg { private int id; private int imageResourceID; private String title; private String content; public Msg() { } public Msg(int id, int imageResourceID, String title, String content) { this.id = id; this.imageResourceID = imageResourceID; this.title = title; this.content = content; } public int getId() { return id; } public void setId(int id) { this.id = id; } public int getImageResourceID() { return imageResourceID; } public void setImageResourceID(int imageResourceID) { this.imageResourceID = imageResourceID; } 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; }}4.6 步骤5：创建数据工具类，获取内容信息数据
public class MsgUtil { public static ListgetMsgList(){ List msgList = new ArrayList<>(); Msg msg = new Msg(1,R.drawable.img01, "华为新一代芯片震撼众人，麒麟990颠覆你认知！", "就在近日，vivo旗下的一款子品牌IQOO在深圳首发了它的第一款新机，该消息一经发布，就引得众人纷纷赶来为了一睹其风采，在当时也引起了各界媒体的关注与争先报道。"); msgList.add(msg); msg = new Msg(2,R.drawable.img02, "网络提速降费今年将放出四个大招!", "今年两会政府工作报告中提出，今年中小企业宽带平均资费再降低15%，移动网络流量平均资费再降低20%以上。随后中国移动、中国电信、中国联通三大运营商作出回应，坚决落实提速降费。"); msgList.add(msg); msg = new Msg(3,R.drawable.img03, "【早报】传谷歌第一款智能手表3月或6月上市", "外媒称，传闻已久的谷歌智能手表确实已经存在，而且谷歌公司预计它将于今年3月中旬至下旬上市。"); msgList.add(msg); msg = new Msg(4,R.drawable.img04, "外媒详测：iPhone XS信号真的有问题吗", "高通在基带芯片上的垄断地位即使是苹果也无法撼动，该交的专利费依旧要交。苹果在今年发布的三款iPhone上，全部采用英特尔的调制解调器和通信芯片，并且苹果今年采用了四天线方案."); msgList.add(msg); msg = new Msg(5,R.drawable.img05, "不仅要卖芯片，英特尔还想做 5G 时代的云端生意", "上网速度更快，是大部分消费者对于 5G 网络最直观的印象，但和 4G 相比增速是否明显，高速网络又有什么新玩法，在 5G 正式落地前，我们都不好妄加揣测。"); msgList.add(msg); return msgList; }} 4.7 步骤6：在MainActivity.java进行配置
public class MainActivity extends AppCompatActivity { private ListView listView; private ListmsgList; private MsgAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = findViewById(R.id.listview); msgList = MsgUtil.getMsgList(); adapter = new MsgAdapter(msgList,this); listView.setAdapter(adapter); }}
更多相关文章
- android 7.0 有关wifi热点设置信息
- 二、Toolbar
- Android(安卓)GLSurfaceView详解
- Android(安卓)TextView部分文字实现点击事件
- Android自屏幕底部滑出更多面板的实现
- Android回音噪音处理Demo
- 关于 android:windowSoftInputMode 的设置
- Android(安卓)Manager之MediaRecorder(音视频录制)
- Android(安卓)自定义titlebar控件（自定义UI控件）