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

转载地址：http://m.blog.csdn.net/tahlia_/article/details/77868928

[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的划分，就是上上图中的两条打竖的横线，用来对齐子项内的部分元素。

<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

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



初步完成！