如今的APP中,对用户的兴趣,爱好等还是比较看重的,因为可以通过这些来向用户推送个性化的内容,大部分的APP中,都会涉及类似下面的内容,来让用户选择,来了解用户的兴趣和习惯.

image.png

今天,我们就来以上面这张图为原型,来实现这样的功能界面

实现步骤

1.界面分析

看到这个界面,我们大概可以分为三部分,标题我们可以使用TextView就可以轻松实现,中间可以使用RecycleView的多条目展示来进行展示,而下面的提交按钮,则可以用Button来实现,话不多说,下面开始干吧!

image.png

2.界面布局搭建

首先将界面的大致布局编写出来

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <TextView
 android:layout_gravity="center_horizontal"
 android:textStyle="bold"
 android:layout_margin="20dp"
 android:textSize="18sp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="选择您感兴趣的标签"/>
 <androidx.recyclerview.widget.RecyclerView
 android:id="@+id/label_list"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"/>
 <Button
 android:id="@+id/commit"
 android:layout_margin="20dp"
 android:textSize="16sp"
 android:textColor="#fff"
 android:background="@drawable/shape_commit_bg"
 android:text="提 交"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"/>
</LinearLayout>

image.png

3.多条目布局分析

通过对多条目的分析,我们可以得出,这个列表其实只有两种组成,一个TextView和RecycleView

image.png

4.条目布局的编写

image.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:orientation="vertical"
 android:padding="10dp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <TextView
 android:text="男生推荐"
 android:textSize="16sp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"/>
 <androidx.recyclerview.widget.RecyclerView
 android:padding="10dp"
 android:id="@+id/label"
 tools:listitem="@layout/item_label"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 tools:spanCount="4"
 tools:layoutManager="GridLayoutManager"
 tools:itemCount="7"/>
</LinearLayout>

image.png

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_gravity="center"
 android:layout_margin="5dp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">
 <TextView
 android:paddingBottom="3dp"
 android:paddingTop="3dp"
 android:paddingRight="10dp"
 android:paddingLeft="10dp"
 android:background="@drawable/shape_label_bg"
 android:text="玄幻"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
</LinearLayout>

5.主布局及适配器编写

class XingQuActivity : Activity() {
 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_xingqu)
 label_list.layoutManager = LinearLayoutManager(this)
 label_list.adapter = LabelAdapter()
 }
 class LabelAdapter : RecyclerView.Adapter<LabelAdapter.LabelViewHolder>() {
 lateinit var context: Context
 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LabelViewHolder {
 context = parent.context
 val view = LayoutInflater.from(context).inflate(R.layout.item_labels_layout, parent, false)
 return LabelViewHolder(view)
 }
 override fun getItemCount(): Int {
 return 3
 }
 override fun onBindViewHolder(holder: LabelViewHolder, position: Int) {
 holder.labelList.layoutManager = GridLayoutManager(context,4)
 holder.labelList.adapter = LabelsAdapter()
 }
 class LabelViewHolder(view: View) :RecyclerView.ViewHolder(view){
 val labelList = view.findViewById<RecyclerView>(R.id.label)
 }
 class LabelsAdapter : RecyclerView.Adapter<LabelsAdapter.LabelsViewHolder>() {
 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): LabelsViewHolder {
 val view = LayoutInflater.from(parent.context).inflate(R.layout.item_label, parent, false)
 return LabelsViewHolder(view)
 }
 override fun getItemCount(): Int {
 return 5
 }
 override fun onBindViewHolder(holder: LabelsViewHolder, position: Int) {
 }
 class LabelsViewHolder(view: View) :RecyclerView.ViewHolder(view){
 }
 }
 }
}

6.最终效果

这里只是实现功能,界面大家可以根据UI的设计图进行修改优化