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