02 步骤二：高级控件

03 CardView实现卡片布局效果

1. 项目1
   下面展示一些 内联代码片。

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_lv_msglist"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:divider="@null"
    android:paddingTop="8dp"
    tools:context=".MainActivity">


</ListView>

    <!--<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">

        <androidx.cardview.widget.CardView
            app:cardBackgroundColor="#44ff0000"
            app:cardCornerRadius="10dp"
            app:contentPadding="10dp"
            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!" />
        </androidx.cardview.widget.CardView>

    </FrameLayout>
    -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package com.example.myapplication4;

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<Msg> mDatas = new ArrayList<>();
    private MsgAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mLvMsgList = findViewById(R.id.id_lv_msglist);

        mDatas.addAll(MsgLab.generateMockList());
        mDatas.addAll(MsgLab.generateMockList());

        mAdapter = new MsgAdapter(this, mDatas);
        mLvMsgList.setAdapter(mAdapter);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2. 项目2
   下面展示一些 内联代码片。

package com.example.myapplication4;

public class Msg {
    private int id;
    private int imgResId;
    private String title;
    private String content;

    public Msg() {
        super();
    }

    public Msg(int id, int imgResId, String title, String content) {
        this.id = id;
        this.imgResId = imgResId;
        this.title = title;
        this.content = content;
    }

    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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

package com.example.myapplication4;

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;

public class MsgAdapter extends BaseAdapter {

    private Context mContext;
    private LayoutInflater mInflater;
    private List<Msg> mDatas;

    public MsgAdapter(Context mContext, List<Msg> mDatas) {
        this.mContext = mContext;
        this.mInflater = LayoutInflater.from(mContext);
        this.mDatas = mDatas;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public Object getItem(int i) {
        return mDatas.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        ViewHolder viewHolder = null;

        if (view == null) {
            view = mInflater.inflate(R.layout.item_msg, viewGroup, false);
            viewHolder = new ViewHolder();
            viewHolder.mIvImg = view.findViewById(R.id.id_iv_img);
            viewHolder.mTvTitle = view.findViewById(R.id.id_tv_title);
            viewHolder.mTvContent = view.findViewById(R.id.id_tv_content);
            view.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) view.getTag();
        }

        Msg msg = mDatas.get(i);
        viewHolder.mIvImg.setImageResource(msg.getImgResId());
        viewHolder.mTvTitle.setText(msg.getTitle());
        viewHolder.mTvContent.setText(msg.getContent());

        return view;
    }

    public static class ViewHolder {
        ImageView mIvImg;
        TextView mTvTitle;
        TextView mTvContent;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

3. 项目3

下面展示一些 内联代码片。

package com.example.myapplication4;

import java.util.ArrayList;
import java.util.List;

public class MsgLab {

    public static List<Msg> generateMockList() {

        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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?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">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin_item_msg_l_r"
        android:layout_marginTop="@dimen/margin_item_msg_t_b"
        android:layout_marginRight="@dimen/margin_item_msg_l_r"
        android:layout_marginBottom="@dimen/margin_item_msg_t_b"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="8dp"
        app:cardElevation="4dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="false">

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

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

            <TextView
                android:id="@+id/id_tv_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:id="@+id/id_tv_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="8dp"
                android:text="使用慕课网学习Android技术使用慕课网学习Android技术使用慕课网学习Android技术使用慕课网学习Android技术" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55