03 Anykey左分页布局RecyclerView

最新推荐文章于 2021-10-08 09:01:24 发布

Likianta Me

最新推荐文章于 2021-10-08 09:01:24 发布

阅读量409

点赞数 1

文章标签： recyclerview使用 cardview

本文链接：https://blog.csdn.net/Likianta/article/details/78618247

版权

[教程] 从零开发 Keep Me Safe 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

首先看一下最终的效果图
配置RecyclerView和CardView
制作RecyclerView布局
新建cardxml制作卡片模板
卡片的属性及适配
- 1 首先新建Cardjava制作卡牌模型
- 2 然后制作卡片适配器CardAdapter
列表的加载
- 1 首先在MainActivityjava中的onCreate里面新增一行代码
- 2 然后新建PageRenderjava处理列表加载业务
相关参考
日志

1. 首先看一下最终的效果图

本章我们只制作左分页，这是一个以卡片为单位组成的可滚动的列表，我们需要用到CardView（卡片布局）和RecyclerView（列表布局）。

2. 配置RecyclerView和CardView

RecyclerView和CardView需要预先在app/build.gradle中配置，代码如下：

dependencies {
    ...
    compile 'com.android.support:appcompat-v7:25.3.1'

    compile 'com.android.support:recyclerview-v7:25.3.1' //配置recyclerview，版本与上面的appcompat保持一致，这里我的就是v7:25.3.1
    compile 'com.android.support:cardview-v7:25.3.1' //配置cardview
}

写好了以后，注意在该页的右上角点击“Sync Now”同步一下：
Sync Now!

3. 制作RecyclerView布局

在page_item_all.xml布局中写RecyclerView布局。这个和上章中的代码差不多是一样的，基本没什么变化，只是将背景色改了一下：

<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/mycolorBackground">
    <!--背景色改成了浅灰色-->

</android.support.v7.widget.RecyclerView>

这就是整体的代码，看起来很简洁。
background的值是在res/values/colors.xml中定义的：

<resources>
    ...

    <!--自制色卡-->
    ...
    <color name="mycolorBackground">#dedede</color>

</resources>

接下来我们要往这个布局中动态地生成小卡片，所以我们要制作卡片的模板。

4. 新建`card.xml`制作卡片模板

在卡片中包含以下属性：

头像（头像默认是由标题的拼音的首字母生成的）
标题
摘要（摘要信息=帐号+密码+备注）
功能按钮：
1. 弹出菜单
2. 复制帐号到剪切板
3. 复制密码到剪切板

代码如下：

<android.support.v7.widget.CardView 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="120dp"
    android:layout_margin="5dp"
    android:elevation="4dp"
    app:cardCornerRadius="8dp"
    >
    <!--elevation表示卡片的高度，cardCornerRadius表示卡片四个角的弧度，xmlns:tools用于识别TextView中的\n换行符-->

    <!--CardView本身是一个FrameLayout，显然不适合摆放控件。因此为了充分利用空间，要内建一个RelativeLayout来盛放所有子控件-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--首先思路就是把RelativeLayout分为左中右三个部分，左边贴一个头像；中间占的面积最大，用来写标题和摘要；右边则放置功能按钮-->

        <!--现在写的是中间的布局LinearLayout。在LinearLayout中上半部分显示标题，下半部分显示摘要-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="80dp"
            android:layout_marginRight="40dp"
            android:orientation="vertical">
            <!--注意设定LinearLayout的方向为vertical-->

            <!--标题，深色，字号较大，高度比重为40%-->
            <TextView
                android:id="@+id/cardTitle"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="4"
                android:gravity="bottom"
                android:padding="4dp"
                android:text="TitleTest"
                android:textSize="32sp"
                android:textColor="@color/mycolorText1"/>

            <!--摘要，浅色或同色，字号比正常文字还要小，高度比重为60%，限制显示三行文字-->
            <TextView
                android:id="@+id/cardSummary"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="6"
                android:paddingTop="3dp"
                android:maxLines="3"
                android:lines="3"
                android:ellipsize="end"
                android:text="name: ______\npassword: ______\nnote: this view limited 3 lines" />
            <!--maxLines表示最大行数，lines表示即使只有一行字也要占用三行字的高度空间，ellipsize表示多出的字数表示为省略号
            参考：http://blog.csdn.net/qq_31403303/article/details/51506524-->

        </LinearLayout>

        <!--接下来写的是右边的布局，也是LinearLayout布局。从上到下依次显示三个按钮：菜单、复制name、复制password-->
        <LinearLayout
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_margin="5dp"
            android:orientation="vertical">

            <!--菜单按钮-->
            <ImageButton
                android:id="@+id/cardMenu"
                android:layout_width="match_parent"
                android:layout_height="40dp" />

            <!--两个复制按钮平分剩下的高度空间-->
            <ImageButton
                android:id="@+id/copyName"
                android:layout_gravity="center"
                android:layout_width="20dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/copyPassword"
                android:layout_gravity="center"
                android:layout_width="20dp"
                android:layout_height="0dp"
                android:layout_weight="1" />

        </LinearLayout>

        <!--不要忘了左边部分。之所以留待最后才写，是为了让头像以及分割线最后加载，这样就处于其它二者的上方了-->
        <!--先做分割线，非常细，非均等分割（上窄下宽）-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.4dp"
            android:layout_marginTop="46dp"
            android:background="#000000" />

        <!--头像-->
        <ImageView
            android:id="@+id/cardHead"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:src="@color/mycolorText2" />

    </RelativeLayout>

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

卡片预览图如下：

CardView

至此两个布局文件都写好了。下面才是本章的重点，为了方便理解，我们分为“卡片的属性及适配”和“列表的加载”两大部分来讲，其中适配器和模板属性的建立是所有业务处理的基础，也是本章的难点。

5. 卡片的属性及适配

5.1. 首先新建Card.java，制作卡牌模型

制作卡片的主要思路：

卡片有哪些属性要传入数据：头像id（本章暂时先不做），标题（cardTitle）以及摘要（cardSummary）
生成传入和传出接口（getter＆setter）

代码如下：
（注：头像id、三个按钮都先不做）

public class Card {

    //定义一个卡片的属性
    private String cardTitle; //卡片标题
    private String cardSummary; //卡片的摘要内容（摘要=用户名+密码+备注）
    // 摘要是后面学习的一个重点，在完成一个卡片的填写后，这个卡片的摘要会自动生成。卡片摘要也是软件搜索功能的重要依据
    //private ImageView cardHead; //头像
    //private ImageButton cardMenu; //卡片菜单按钮
    //private ImageButton copyName; //复制按钮，复制用户名
    //private ImageButton copyPassword; //复制按钮，复制密码

    //一张卡片完整的属性为：
    public Card(String cardTitle, String cardSummary) {
        //将外界传入的3个参数赋值给Card内部类
        //this.cardHead = cardHead;
        this.cardTitle = cardTitle;
        this.cardSummary = cardSummary;
    }

    //创建卡片的Getter&Setter方法

    public String getCardSummary() {
        return cardSummary;
    }

    public void setCardSummary(String cardSummary) {
        this.cardSummary = cardSummary;
    }

    public String getCardTitle() {
        return cardTitle;
    }

    public void setCardTitle(String cardTitle) {
        this.cardTitle = cardTitle;
    }

}

getter和setter的快捷键：

写好private String cardTitle和private String cardSummary后点击鼠标右键
右键列表 - Generate - Getter and Setter - 弹出对话框 - 按住Ctrl选择cardTitle和cardSummary - OK
自动生成这两个变量的getter和setter方法

5.2. 然后制作卡片适配器CardAdapter

适配器是连接数据（比如说json数组）和模板（比如这里的Card）之间的桥梁，用一个不太准确的说法来说，它的作用就是把数组切片并把每一片贴到一张张白卡上面，然后RecyclerView利用setAdapter()方法就能很轻松的载入这些写好的卡片了。

新建CardAdapter.java，代码如下：

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {

    /* 什么是适配器（Adapter）？
    适配器为原料做适配工作。
    用一种形象的说法，比如把适配器看作一座工厂，适配器给卡片们组配上了手臂（ViewHolder），更方便卡片去抓握数据了，这就是适配的好处。
     */

    private Context context; //定义一个context，由于没有赋值，所以现在是null的状态
    private List<Card> cardList;

    public CardAdapter(List<Card> cardList) {
        this.cardList = cardList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //首先传入context
        if (context == null) {
            context = parent.getContext(); //这里的parent就是指列表页(RecyclerView)所属的类了
        }

        View card = LayoutInflater.from(context).inflate(R.layout.card, parent, false);
        //inflate的第三个参数表示是否连接该布局和父控件。由于系统已经插入了这个布局到父控件，所以设为false（若写true则会产生一个多余的parent）

        return new ViewHolder(card); //获得了一张白卡
    }

    static class ViewHolder extends RecyclerView.ViewHolder {

        CardView cardView;
        //ImageView cardHead;
        TextView cardTitle;
        TextView cardSummary;

        public ViewHolder(View view) {
            //引入外界的item，在卡片中开始实例化
            super(view);

            cardView = (CardView) view;
            //cardHead = (ImageView)view.findViewById(R.id.cardHead);
            cardTitle = (TextView) view.findViewById(R.id.cardTitle);
            cardSummary = (TextView) view.findViewById(R.id.cardSummary);
        }
    }

    //开始给白卡绑数据
    @Override
    public void onBindViewHolder(ViewHolder whiteCard, int positon) {
        Card card = cardList.get(positon); //通过位置参数判断用户点的是哪个卡片

        //whiteCard.cardHead.set...???  //头像图片还没做，这里先记个书签，以后再说
        whiteCard.cardTitle.setText(card.getCardTitle());
        whiteCard.cardSummary.setText(card.getCardSummary());
    }

    //获取列表中卡片总数量
    @Override
    public int getItemCount() {
        return cardList.size();
    }

}

6. 列表的加载

列表的加载中MainActivity中进行，为了让思路更清晰，这里只在MainActivity中引用加载的方法，而具体的代码则新建一个PageRender.java文件放置。

6.1. 首先在MainActivity.java中的onCreate()里面新增一行代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        //为左分页加载卡片列表
        new PageRender(view1); //新建一个PageRender.java写相关代码
    }
    ...
}

注意我们传入了一个view1参数，它是由View view1 = inflater.inflate(R.layout.page_item_all, null);得来的，也就是左分页的布局（我们在开头也提到过，该布局只有一个RecyclerView，背景是浅灰色的）。

6.2. 然后新建PageRender.java处理列表加载业务

这是本章的最后一个重点。代码如下：

public class PageRender extends MainActivity {
    //注意继承自MainActivity

    private List<Card> cardList = new ArrayList<Card>();
    private CardAdapter cardAdapter;

    public PageRender(View page) {

        //首先绑定RecyclerView
        RecyclerView recyclerView = (RecyclerView) page.findViewById(R.id.recyclerView);
        /* 关于findViewById是一个重点
         特别注意，必须写成page.findViewById，不能把前缀page省略掉。
         如果省略掉，虽然编译时不会报错，但运行时程序会崩溃。
         通过观察recyclerView的值会发现，崩溃时其值为0，也就是根本不存在这个对象。这是为什么呢？
         原因在于findViewById其实是“view.findViewById”的缩写，这个默认的view是什么呢？就是你当前所在的布局，也就是layout_main.xml，显然我们在layout_main.xml里是找不到RecyclerView控件的，因为RecyclerView在page_item_all.xml布局里
         参考：http://blog.sina.cn/dpool/blog/s/blog_95bc05000101bhxe.html
         */

        //初始化数据，将原数据按card为单位切分，并装载到数组里
        initCards();

        cardAdapter = new CardAdapter(cardList); //根据数据组建出一个个写好的卡片
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager); //在recyclerView里面放置一个线性布局，以使卡片呈线性排列
        recyclerView.setAdapter(cardAdapter); //将卡片们装载到RecyclerView的布局中
    }

    //先自建一组数据来测试一下……
    private void initCards() {
        cardList.clear();

        //遍历装载
        cardList.add(new Card("Title1", "name:aaa\npassword:aaa\nnote:aaa"));
        cardList.add(new Card("Title2", "name:bbb\npassword:bbb\nnote:bbb"));
        cardList.add(new Card("Title3", "name:ccc\npassword:ccc\nnote:ccc"));
        cardList.add(new Card("Title4", "name:ddd\npassword:ddd\nnote:ddd\nextra:ddd")); //验证是否只显示3行
        cardList.add(new Card("Title5", "name:eee\npassword:eee\nnote:eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee")); //验证多余字符是否显示为省略号
        cardList.add(new Card("Title6", "name:fff")); //验证单行字符是否可以占据3行的空间
    }

}

至此左分页布局代码全部完成，不过很多功能（包括基本功能）都还没有实现，随着后续的学习我们还会不断完善这个布局，直到应用到实战中去。

下章会写右分页布局，然后很快就能联系左分页的知识模拟完整的数据加载逻辑了。

日志

2017年11月21日
1. 【新增】左分页制作列表界面

Likianta Me

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03 Anykey左分页布局RecyclerView

目录首先看一下最终的效果图配置RecyclerView和CardView制作RecyclerView布局新建cardxml制作卡片模板卡片的属性及适配1 首先新建Cardjava制作卡牌模型2 然后制作卡片适配器CardAdapter列表的加载1 首先在MainActivityjava中的onCreate里面新增一行代码2 然后新建PageRenderjava处理列表加载业务相关
复制链接

扫一扫