[Android Exercise]仿微信游戏界面PART.1—ConstraintLayout和RecyclerView的应用

前几天打开了微信游戏，找到了里面有一部分内容非常适合用来做ConstraintLayout和RecyclerView的练习，然而前几天一直在家或者摸鱼，加上标注什么的一直拖到了今天，那么现在就来练练手。

*******************************************

让我们来看看我截出来需要被实现的部分：

1、分析模块

将每一个部分都做成一个子项，使用RecyclerView实现，其实和普通的RecyclerView一样，只是将子项布局改成了ConstraintLayout（我感觉这里使用ConstraintLayout比使用RelativeLayout更方便一些）。下面是我对这个布局内容的一些划分：

红色的线是辅助线，我用来完成布局的对齐（在这里其实感觉用不用都可以，但是GuideLine不得不说确实是个好东西）。绿色框内则是一个部分子布局需要被隐藏的部分，因此决定将整个绿色框内写在一个RelativeLayout之中。

2、实现

首先别忘了导入RecyclerView依赖库！导入的方法之前有记录过，可以在app的build.gradle中手打或者使用Project Structure添加。

步骤依旧是从需要被展现的信息开始。一个子项中被展现出来的内容如下：

但我们有的信息是可以自动生成的，如序号，绿框内的信息（模板语句是一样的）。因此新建Game类，新建字段gameName和gameDesc，添加构造函数和返回函数（其实字段中也需要有gamePic，但是我懒得找图片了，就没有加进去）

public class Game {
    private String gameName;
    private String gameDesc;

    public Game(String gameName, String gameDesc){
        this.gameName = gameName;
        this.gameDesc = gameDesc;
    }

    public String getGameName(){
        return gameName;
    }

    public String getGameDesc(){
        return gameDesc;
    }
}

之后就要写子项布局了。新建game_item.xml，这里我用的是ConstraintLayout：

设立两条辅助线GuideLine，分别是距离12dp和38dp的划分，就是上上图中的两条打竖的横线，用来对齐子项内的部分元素。

先用序号部分作为一个示例开始写吧。序号部分的数字是父布局左侧和38dp辅助线水平居中的，这是我的TextView：

其他的TextView和ImageView和Button基本同理，设置约束和margin等。

※对已经确定大小（宽高不是0dp）的控件进行左右相对约束则可以让它水平居中（竖直居中同理）

※如果margin不起作用，请先确定是否有对margin的那个方向进行约束。可以回看ConstraintLayout使用方法和注意点那篇博文。

单独分开绿色框那一部分，是因为里面的内容都是可能被一起隐藏掉的。这里我用RelativeLayout包含里面的内容，包括两个TextView和一个分割线（View）：

最后在底部加一条分界线，用来分来每个子项：

为什么我觉得在这个item之中ConstraintLayout比RelativeLayout好用呢。由于我们的分界线的marginTop是相对于绿色框的RelativeLayout的内容，然而当我们隐藏了RelativeLayout后，View将会直接对齐RelativeLayout原来对齐的内容，也就是我上面对齐的gamePic。为了解决这个问题，ConstraintLayout中有一个goneMargin属性，它在约束控件隐藏的情况下被启用，效果相当于margin。（但不知道为什么我这里取消了goneMargin后，效果仍不变，也就是marginTop依旧存在，求解答）

这是我取消了marginTop之后不使用goneMarginTop和使用goneMarginTop的结果：

可以看出，goneMargin属性确实只在被约束对象被隐藏后才启用的。

那么到这里，子项布局就完成了。接下来RecyclerView就和之前的步骤基本一样。但因为这里除了前三项的绿色框内容（RelativeLayout）不需要被隐藏，三项以后的内容都不予显示，因此在GameAdapter中的onBindViewHolder中加入判断语句：

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Game game = gameList.get(position);
        holder.gameNum.setText(String.valueOf(position+1));
        holder.gameName.setText(game.getGameName());
        holder.gameDesc.setText(game.getGameDesc());
        if (position>2){
            holder.gameDetails.setVisibility(View.GONE);
        }else{
            holder.gameDetail1.setText("最近超过"+ (new Random().nextInt(8)+1) + "百万人在玩");
            holder.gameDetail2.setText((new Random().nextInt(8)+1) +"万人刚加入这款游戏");
        }
    }

※ position是int类型的，而TextView接受的数据类型是CharSequence类型，因此一定要使用数据转换将int转换为String，否则编译将会报错：android.content.res.Resources$NotFoundException: String resource ID #0x0

完成了所有工作之后，来看看整体布局效果（这里的图片因为我懒得找了，就直接用背景色代替了）：

初步完成！