Android之CardView[通俗易懂]

Android之CardView[通俗易懂]文章目录一、常用属性二、属性效果展示三、案例展示具体代码:1、一个最简单的示例:2、复杂化四、案例1、布局搭建2、实体类创建3、功能实现4、适配CardView继承FrameLayout一、常用属性1、cardBackgroundColor设置背景色CardView是View的子类,View一般使用Background设置背景色,为什么还要单独提取出一个属性让我们来设置背景色呢?为了…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(0)
blank

相关推荐

  • Marsaglia XORshift随机数算法「建议收藏」

    Marsaglia XORshift随机数算法「建议收藏」引理:二进制矩阵相乘中加法为异或。给定非空向量beta和n阶矩阵T,序列beta*T,beta*T^2,beta*T^3,…的秩为2^n-1的充要条件是矩阵T为非奇异矩阵.L是左移位操作,y=y^(y>b)表示为y=y*(E+R^b),令T=(E+L^a)(E+R^b),n=32或64,找不到这样的非奇异矩阵。但是令T=(E+L^a)*(E+R^b)*(E+L^c)能找

  • 用Java实现QQ登录[通俗易懂]

    用Java实现QQ登录[通俗易懂]Java实现QQ登录写了一个个人网站,增加一个登录的地方,自己写登录太麻烦,而且用户一般也不愿意去登录,接入QQ互联,实现QQ一键登录。所有前提是你得有一个IP地址和域名。==ps:==用处不大,主要是写着玩1进入qq互联官网进入点击头像个创建提交申请2选择个人接入,按照步骤填写注册资料创建成功通过后会哦显示接入的个人信息。3审核成功后点击下面的开始创建,按步骤完成创建过程。4创建成功后可以查看APPID和APPkey,很重要在应用管理界面可以查看如上信息,点击查看就可以

  • 数据库学习笔记【自学教程】—— 如何建立数据库

    数据库学习笔记【自学教程】—— 如何建立数据库PS:本项目将在D盘下创建名为Test的文件夹(D:/Test)。如若想修改文件位置,需在后续代码中一并修改。点击工具栏“新建查询”或者使用快捷键Ctrl+N==>打开查询分析器SQLServer中,一个数据库至少包括两个文件。一个是主数据文件,一个是日志文件。一、建立数据库1)通过语句建立数据库新建一个名为“教师授课管理数据库”的数据库,代码如下:CREATEDATABASE教师授课管理数据库ON(NAME=T…

  • VC++消息钩子编程「建议收藏」

    VC++消息钩子编程「建议收藏」一、消息钩子的概念1、基本概念Windows应用程序是基于消息驱动的,任何线程只要注册窗口类都会有一个消息队列用于接收用户输入的消息和系统消息。为了拦截消息,Windows提出了钩子的概念。钩子(H

  • java中级考试 考点_java中级面试题的考点「建议收藏」

    java中级考试 考点_java中级面试题的考点「建议收藏」在我们对java有一定的基础学习后,能力再往上升一些就是中级。对于初级和中级来说,后者除了对于基础java内容把握能力强外,在一些知识点的比较分析和原理解剖上有所理解能力。本篇就java中级面试题进行了整理,挑出了一些典型的高频试题,都来看看具体内容吧。1.比较接口和抽象类的语法区别(1)抽象类可以有构造方法,接口中不能有构造方法。(2)抽象类中可以有普通成员变量,接口中没有普通成员变量!!!(注…

    2022年10月10日
  • QT QStringList 与 QString 常用方法

    QT QStringList 与 QString 常用方法本文汇集了QString与(QStringList|QByteArray)之间的转换,以及QString、QStringList的一些常用方法。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号