Android进阶：网络与数据存储—步骤1：Android网络与通信(第7小节：CadView)

内容概要：

• CardView基础

1. CardView介绍
2. CardVie常用属性
3. CardView属性效果展示

• CardView案例实现

1. CardVie基本操作
2. 案例-布局搭建
3. 案例-实体类创建
4. 案例-功能实现
5. 案例-适配
6. CardView开发注意事项

一、CardView基础

1、CardView介绍

CardView是什么？

1. Android5.0之后新增
2. com.android.support:cardview-v7:26.1.0独立引用
3. 继承自FragmeLayout，方便作为其他控件的容器，添加3D阴影和圆角效果

2.CardVie常用属性

1. cardBackgroundColor 设置背景色

2. cardCornerRadius 设置圆角半径

3. contentPadding 设置内部padding

4. cardElevation 设置阴影大小

5. cardUseCompatPadding 默认为false, 用于5.0及以上,true则添加额外的padding绘制阴影

6. cardPreventCornerOverlap 默认为true, 用于5.0以下,添加额外的padding,防止内容和圆角重叠

• 示例：

代码演示：

首先在build.gradle添加依赖包

    implementation 'com.android.support:cardview-v7:26.1.0'

最简单的应用给textView设置一个阴影效果：

<?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="match_parent"
    tools:context=".MainActivity">
<android.support.v7.widget.CardView
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:text="Hello World!"
        android:gravity="center"
        />
</android.support.v7.widget.CardView>

</FrameLayout>

 2.案例-布局搭建

在写布局文件的时候，比如text的初始值我们可以设置一个随意的文本，但是我们只想自己测试预览看到

不想被意外的显示在App上，可以在主View上加tools

    xmlns:tools="http://schemas.android.com/tools"

然后再相应你想测试的值预览的地方加上

    //这个预览和在app都可以看到
    android:text="Hello World!"
    //这个只能预览效果，app上不显示内容
    tools:text="Hello World!"

item_msg.xml CardView的布局 

<?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="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="8dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="6dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/id_image_cardview"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:scaleType="centerCrop"
                tools:background="@drawable/img01" />

            <TextView
                android:id="@+id/id_title_cardview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="Hello World!"
                tools:text="aaaaaa" />

            <TextView
                android:id="@+id/id_content_cardview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:text="Hello World!"
                tools:text="aaaaaa" />

        </LinearLayout>
    </android.support.v7.widget.CardView>

</FrameLayout>

ListView显示CardView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    tools:context=".MainActivity">

<ListView
    android:id="@+id/listview"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</ListView>

</LinearLayout>

3案例-实体类创建

Msg.java

/**
 * 信息封装类
 */
public class Msg {
    private int Id;
    private int ImgId;
    private String Tilte;
    private String Content;

    public Msg(int id, int imgId, String tilte, String content) {
        Id = id;
        ImgId = imgId;
        Tilte = tilte;
        Content = content;
    }

    public int getId() {
        return Id;
    }

    public void setId(int id) {
        Id = id;
    }

    public int getImgId() {
        return ImgId;
    }

    public void setImgId(int imgId) {
        ImgId = imgId;
    }

    public String getTilte() {
        return Tilte;
    }

    public void setTilte(String tilte) {
        Tilte = tilte;
    }

    public String getContent() {
        return Content;
    }

    public void setContent(String content) {
        Content = content;
    }
}

MsgLab.java 

/**
 * 信息的类添加
 */
public class MsgLab {
    private List<Msg> list;

    public static List<Msg> generateList(){
        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;
    }
}

4.案例-功能实现

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    private List<Msg> msgs=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView=findViewById(R.id.listview);
        msgs.addAll(MsgLab.generateList());//给msgs添加数据
        msgs.addAll(MsgLab.generateList());//给msgs添加数据
        listView.setAdapter(new MsgAdapter(MainActivity.this,msgs));

    }
}

实现效果：

CardView屏幕适配

一、手机适配之 dimen 基础知识

dimen 是用来定义尺寸的资源文件,默认路径:工程的 res\values\dimens.xml

二、dimen 定义的尺寸资源文件作用?

可以在 res 下创建不同分辨率的 values 目录,例如 values-480x320、values-800x480、 values-1920x1080、vaule-21是android5.0 等,并且在上述目录中可以分别创建尺寸文件,这样在不同分辨率 下,该目录下的 dimens.xml 会代替 res/values/dimens.xml 达到最佳的适配效果。

三、dimen 定义的资源文件如何使用?

1、 在工程的 res\values\目录下创建一个 dimens.xml 尺寸资源文件 <?xml version="1.0" encoding="utf-8"?>

<resources>

<dimen name="btn_width">200px</dimen>

<dimen name="btn_height">200px</dimen> </resources>

2、 添加一个布局文件,在此布局文件中添加一个按钮,使用尺寸资源文件来定义按钮 的宽和高

<?xml version="1.0" encoding="utf-8"?> <LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:layout_width="@dimen/btn_width"
android:layout_height="@dimen/btn_height"
android:text="@string/app_name" />

</LinearLayout>

3、在 java 代码中也可以获取到 dimens 尺寸资源文件的数值

Resources res = getResources();
float btn_h = res.getDimension(R.dimen.btn_height); float btn_w = res.getDimension(R.dimen.btn_width);

四、尺寸文件使用建议

1、在 values 目录下创建一个默认的 dimens 文件

2、尽可能多的创建不同分辨率的 dimens 文件(这样应用才会适配的完美)