大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
CardView继承FrameLayout
一、常用属性
1、cardBackgroundColor
设置背景色
CardView是View的子类,View一般使用Background
设置背景色,为什么还要单独提取出一个属性让我们来设置背景色呢?
为了实现阴影效果,内部已经消耗掉了 Background 属性
2、cardCornerRadius
设置圆角半径
3、contentPadding
设置内部padding
View提供了padding
设置间距,为什么还要单独提取出一个属性?
相同的原因,内部消耗掉了 padding 属性
4、cardElevation
设置阴影大小
5、cardUseCompatPadding
默认为false,用于5.0及以上,true则添加额外的 padding 绘制阴影
6、cardPreventCornerOverlap
默认为true,用于5.0及以下,添加额外的 padding,防止内容和圆角重叠
二、属性效果展示
三、案例展示
1、在AndroidManifest.xml添加使用cardview需要引入的依赖库
implementation 'androidx.cardview:cardview:1.0.0'
若不记得,File –> Project Structrue –> Dependencies –> app –> + –> 1 Library Dependency –> cardview –> 点击search –> 会显示最新版本
具体代码:
1、一个最简单的示例:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- 帧布局 -->
<FrameLayout 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"
tools:context=".MainActivity">
<!-- 通过cardview添加阴影效果 -->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TextView
android:layout_width="200dp"
android:layout_height="50dp"
android:gravity="center"
android:text="Hello World!" />
<!-- android:layout_gravity="center" 让整个容器居中 -->
</androidx.cardview.widget.CardView>
</FrameLayout>
MainActivity
package com.example.cardviewstudy;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
效果图:
2、复杂化
① 在cardview控件内新增:
app:cardBackgroundColor="#44ff0000" android:background="#4400ff00"
#44ff0000 粉色 , #4400ff00 绿色。因都为半透明色,故如果同时生效的话,是能够看出来的。
效果图:
效果图说明:CardView内部已经消耗掉了 Background 属性
②在cardview控件内新增:
app:cardCornerRadius="10dp"
③在cardview控件内新增:
app:contentPadding="10dp"
效果图:整体卡片的宽高都变大了,因为加了一个10dp的padding
③在cardview控件内新增:
app:cardElevation="10dp"
效果图:
四、案例
目标图:
1、布局搭建
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/listview_MsgList"
android:divider="@null"
android:background="#ffffff"
android:paddingTop="8dp"
>
</ListView>
疑问: android:divider="@null"
答案: 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"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imageview_Image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:layout_margin="8dp"
tools:src="@drawable/img01" />
<!-- tools 测试属性,只会在PreView中看到,运行时没有这些东西 -->
<TextView
android:id="@+id/textview_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: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>
疑问: android:scaleType="centerCrop"
答案: 详解android:scaleType属性
android:scaleType
是控制图片如何resized/moved来匹对ImageView的size
centerCrop
按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)
2、实体类创建
Message
package com.example.cardviewstudy;
/** * function: * Created by TMJ on 2020-02-20. */
public class Message {
private int id;//在整个布局里算第几个Message
private int imgResId;//Image图片的id
private String title;//标题
private String content;//内容
//无参构造函数
public Message() {
}
//有参构造函数
public Message(int id, int imgResId, String title, String content) {
this.id = id;
this.imgResId = imgResId;
this.title = title;
this.content = content;
}
//Getter and Setter
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;
}
}
MessageLab
package com.example.cardviewstudy;
import java.util.ArrayList;
import java.util.List;
/** * function: 辅助作用 * Created by TMJ on 2020-02-20. */
public class MessageLab {
public static List<Message> generateMockList() {
List<Message> messageList = new ArrayList<>();
Message message = new Message(1,
R.drawable.img01,
"如何才能不错过人工智能的时代?",
"下一个时代就是机器学习的时代,慕课网发大招,与你一起预见未来!");
messageList.add(message);
message = new Message(2,
R.drawable.img02,
"关于你的面试、实习心路历程",
"奖品丰富,更设有参与奖,随机抽取5名幸运用户,获得慕课网付费面试课程中的任意一门!");
messageList.add(message);
message = new Message(3,
R.drawable.img03,
"狗粮不是你想吃,就能吃的!",
"你的朋友圈开始了吗?一半秀恩爱,一半扮感伤!不怕,还有慕课网陪你坚强地走下去!!");
messageList.add(message);
message = new Message(4,
R.drawable.img04,
"前端跳槽面试那些事儿",
"工作有几年了,项目偏简单有点拿不出手怎么办? 目前还没毕业,正在自学前端,请问可以找到一份前端工作吗,我该怎么办?");
messageList.add(message);
message = new Message(5,
R.drawable.img05,
"图解程序员怎么过七夕?",
"哈哈哈哈,活该单身25年!");
messageList.add(message);
return messageList;
}
}
3、功能实现
MsgAdapter
package com.example.cardviewstudy;
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;
/** * 继承BaseAdapter,实现4个方法 * Created by TMJ on 2020-02-20. */
public class MsgAdapter extends BaseAdapter {
private Context mContext;//上下文环境
/** * 主要用于加载item_msg的布局 */
private LayoutInflater mInflater;
private List<Message> mDatas;
/** * 构造方法 */
public MsgAdapter(Context context, List<Message> datas) {
/** * 赋值 */
mContext = context;
mInflater = LayoutInflater.from(context);
mDatas = datas;
}
@Override
public int getCount() {
return mDatas.size();
}
@Override
public Object 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();
/** * 获取子布局中三个控件:ImageView TextView TextView */
viewHolder.mIvImg=convertView.findViewById(R.id.imageview_Image);
viewHolder.mTvTitle=convertView.findViewById(R.id.textview_title);
viewHolder.mTvContent=convertView.findViewById(R.id.textview_content);
convertView.setTag(viewHolder);
}
else {
viewHolder= (ViewHolder) convertView.getTag();
}
Message message=mDatas.get(position);
viewHolder.mIvImg.setImageResource(message.getImgResId());
viewHolder.mTvTitle.setText(message.getTitle());
viewHolder.mTvContent.setText(message.getContent());
return convertView;
}
/** * 内部类:可省去findViewById的时间 */
public static class ViewHolder {
ImageView mIvImg;
TextView mTvTitle;
TextView mTvContent;
}
}
MainActivity
package com.example.cardviewstudy;
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<Message> mDatas = new ArrayList<>();
private MsgAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLvMsgList = findViewById(R.id.listview_MsgList);
/** * 多调用两次,数据会更多 */
mDatas.addAll(MsgLab.generateMockList());
mDatas.addAll(MsgLab.generateMockList());
mAdapter=new MsgAdapter(this,mDatas);
mLvMsgList.setAdapter(mAdapter);
}
}
效果图:
5.0以上 <————> 5.0以下
4、适配
通过上图对比:
① 5.0以下卡片之间的距离变大
cardUseCompatPadding
默认为false,用于5.0及以上,true则添加额外的 padding 绘制阴影
在CardView控件内添加:
app:cardUseCompatPadding="true"
效果图:
5.0以上添加前 <————> 添加后 <————> 5.0以下
cardview在5.0以上的效果是比较好的,在5.0以上的布局已经写好的情况下,期望5.0以下与5.0以上保持一致
故cardUseCompatPadding
设置为alse
app:cardUseCompatPadding="true"
② 将5.0以下卡片间的距离,以及左右两侧我们看起来的距离变小
使用限定符
参考资料:
手机适配之 dimen 基础知识
手机适配之 values 目录基础知识
1’ 新建res –> new –> Android Resource Directory,文件夹名:values-v21
新建Values Resource File,文件名:dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 横向的: left right -->
<dimen name="margin_item_msg_l_r">16dp</dimen>
<!-- 纵向的: top bottom -->
<dimen name="margin_item_msg_t_b">8dp</dimen>
</resources>
修改item_msg.xml
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
修改成
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"
2’ 新建res –> values –> new –> Values Resource File –> 文件名: dimens_hack_msg_item_cardview.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 横向的: left right -->
<dimen name="margin_item_msg_l_r">9dp</dimen>
<!-- 纵向的: top bottom -->
<dimen name="margin_item_msg_t_b">0dp</dimen>
</resources>
效果图:间隔变小
5.0以下添加后
③圆角与内容重叠
cardPreventCornerOverlap
默认为true,用于5.0及以下,添加额外的 padding,防止内容和圆角重叠
效果图:
5.0以下添加后
④注意
android:foreground="?attr/selectableItemBackground"
如果cardview在最外层,可以为其设置点击效果
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/183053.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...