原文: http://m.blog.csdn.net/tahlia_/article/details/77868928
让我们来看看我截出来需要被实现的部分：
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:id="@+id/twelveDpGuideLine"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="12dp"/>
android:id="@+id/thirdtyEightDPGuideLine"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_begin="38dp" />
先用序号部分作为一个示例开始写吧。序号部分的数字是父布局左侧和38dp辅助线水平居中的，这是我的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）：
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">
android:id="@+id/textDetail1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#999"
android:textSize="12sp"
android:layout_marginLeft="9dp"/>
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"/>
android:layout_width="2dp"
android:layout_height="30dp"
android:background="#f1f1f1"/>
最后在底部加一条分界线，用来分来每个子项：
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
完成了所有工作之后，来看看整体布局效果（这里的图片因为我懒得找了，就直接用背景色代替了）：
初步完成！
网友评论