本节内容

1.Demo分析

2.添加第三方库支持圆角

3.添加一个item

4.添加所有item

5.猜你喜欢

6.底部模块布局

7.给布局添加内容

一、Demo分析

1.我们要做的界面如下图所示

image.png

2.整体是一个约束布局。但是其中又嵌套了多层LinearLayout。

3.每部分又有不一样的模块，可以用到guideLine进行分割。并为其添加百分比，来确定该引导线的位置。

二、添加第三方库支持圆角

1.布局页面中的图片都是圆角，为了让我们添加的图片显示为圆角，只需要在gradle中的dependencies中添加一个依赖库即可，如下图所示。

implementation 'com.makeramen:roundedimageview:2.3.0'

2.然后我们在xml中拖动一个ImageView进去，在代码中将它的 改为我们添加的Rounded那个，也就是圆角的View。

3.然后我们还要为其添加圆角的角度，直接在上面的那个

app:riv_corner_radius="10dp"

三、添加一个item

1.先拖动一张图片到主界面上来，再拖动一个TextView过来，为了方便设置TextView的文字内容，我们在values的string.xml中，添加一个name为title的文本

斗鱼直播

美食

猜你喜欢

2.把它们都整好了以后，再回到代码中，用LinearLayout把这个图片和文字包裹起来。设置orientation为vertical，并给它设置一个id为1。想要让它们居中，设置一下android:gravity="center_horizontal"即可。

android:id="@+id/l1"

android:layout_width="wrap_content"

android:layout_height="95dp"

android:gravity="center_horizontal"

android:orientation="vertical"

app:layout_constraintBottom_toTopOf="@+id/guideline4"

app:layout_constraintEnd_toStartOf="@+id/l3"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toEndOf="@+id/l2"

app:layout_constraintTop_toTopOf="@+id/guideline">

android:id="@+id/img1"

android:layout_width="50dp"

android:layout_height="50dp"

app:srcCompat="@drawable/bm"

tools:layout_editor_absoluteX="20dp"

tools:layout_editor_absoluteY="193dp" />

android:id="@+id/tv1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="@string/title"

tools:layout_editor_absoluteX="20dp"

tools:layout_editor_absoluteY="251dp"

tools:text="王者" />

四、添加所有item

1.然后我们拷贝一下上面的代码，然后在它的下方粘贴另外四个控件。因为拷贝的时候添加了所有的约束，所以我们需要修改一个id，再修改一下约束。

2.选中所有的五个控件，然后右击选择chains，让他们horizontal chains一下。最好选spread inside，然后再修改对应的图片资源。

3.同理，按照以上的方式布局下面五个控件。

五、猜你喜欢

1.拖动一张图片和TextView进来，通过约束布局直接布局一下。可以设置一下字体的风格和大小。再让它们中心对齐一下。

android:id="@+id/imageView2"

android:layout_width="25dp"

android:layout_height="25dp"

app:layout_constraintBottom_toTopOf="@+id/guideline2"

app:layout_constraintStart_toStartOf="@+id/l7"

app:layout_constraintTop_toTopOf="@+id/guideline3"

app:srcCompat="@drawable/fire" />

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/guess"

android:textColor="@android:color/black"

android:textSize="15dp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="@+id/imageView2"

app:layout_constraintStart_toEndOf="@+id/imageView2"

app:layout_constraintTop_toTopOf="@+id/imageView2" />

六、底部模块布局

1.底部模块包含文字和图片，而且有的文字还直接在图片上方，所以我们最好用ConstraintLayout。

2.我们先在code添加一个ConstraintLayout，再给他添加一个id。

七、给布局添加内容

1.先拖动一张图片进去，然后让它跟容器的左右两边对齐，并选择宽度为match_parent。如果想让图片为圆角，可以把它改为RoundedView，并设置圆角半径。

2.拖动一个TextView在图片底部左方，并在代码中设置它的颜色和字体的大小。

3.再拖动一个TextView在图片底部的右方，和上面的操作一样，最好设置同样的颜色和字体。

4.再拖动一个TextView在图片下方，再设置一下字体颜色。直接让它的左边和容器左边对齐。

5.剩下的布局和上面的操作类似，都可以直接进行拖动布局。

6.设置好一个容器之后，我们可以复制粘贴一下，然后拖动布局一下，再修改一下相应的图片资源和文字内容。

经过上述布局后，运行起来差不多就是如下效果：

image.png

本节内容只是为了让我们更好地理解一下各种布局的使用方法，还不能实现一点击就能进入直播间的功能。