前几天打开了微信游戏，找到了里面有一部分内容非常适合用来做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的划分，就是上上图中的两条打竖的横线，用来对齐子项内的部分元素。
<android.support.constraint.Guideline android:id="@+id/twelveDpGuideLine" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintGuide_begin="12dp"/> <android.support.constraint.Guideline android:id="@+id/thirdtyEightDPGuideLine" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintGuide_begin="38dp" />
先用序号部分作为一个示例开始写吧。序号部分的数字是父布局左侧和38dp辅助线水平居中的，这是我的TextView：<TextView android:id="@+id/textNum" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="23sp" android:textColor="#999" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/thirdtyEightDPGuideLine" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="20dp"/>
其他的TextView和ImageView和Button基本同理，设置约束和margin等。
※对已经确定大小（宽高不是0dp）的控件进行左右相对约束则可以让它水平居中（竖直居中同理）
※如果margin不起作用，请先确定是否有对margin的那个方向进行约束。可以回看ConstraintLayout使用方法和注意点那篇博文。
单独分开绿色框那一部分，是因为里面的内容都是可能被一起隐藏掉的。这里我用RelativeLayout包含里面的内容，包括两个TextView和一个分割线（View）：
<RelativeLayout android:id="@+id/textDetails" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/imgGamePic" app:layout_constraintLeft_toRightOf="@id/thirdtyEightDPGuideLine" app:layout_constraintRight_toRightOf="parent" android:layout_marginTop="9dp"> <TextView android:id="@+id/textDetail1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#999" android:textSize="12sp" android:layout_marginLeft="9dp"/> <TextView android:id="@+id/textDetail2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/textDetail1" android:textColor="#999" android:textSize="12sp" android:layout_marginTop="2dp" android:layout_alignLeft="@id/textDetail1"/> <View android:layout_width="2dp" android:layout_height="30dp" android:background="#f1f1f1"/> </RelativeLayout>
最后在底部加一条分界线，用来分来每个子项：
<View android:layout_width="0dp" android:layout_height="1dp" android:background="#dfdfdf" app:layout_constraintLeft_toLeftOf="@id/twelveDpGuideLine" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/textDetails" app:layout_goneMarginTop="14dp" android:layout_marginTop="14dp"/>
为什么我觉得在这个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
完成了所有工作之后，来看看整体布局效果（这里的图片因为我懒得找了，就直接用背景色代替了）：
初步完成！
