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 –> 会显示最新版本
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);
}
}
效果图:
① 在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"
效果图:
目标图:
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的长(宽)
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;
}
}
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以下
通过上图对比:
① 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在最外层,可以为其设置点击效果
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/183053.html原文链接:https://javaforall.cn