个人资料界面

一、需求
1.“我”界面的绘制
二、界面图
三、实现步骤
1.首先画item的布局
item_person_information.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    >
    <ImageView
        android:id="@+id/img_person_icon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:src="@drawable/ic_more"
        tools:ignore="RtlCompat" />
    <TextView
        android:id="@+id/tv_person_name"
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
    android:layout_toEndOf="@id/img_person_icon"
        android:layout_marginStart="10dp"
        tools:ignore="RtlCompat" />

    <ImageView
        android:id="@+id/img_person_more"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_baseline_keyboard_arrow_right_24"
        android:layout_marginEnd="10dp"
        android:visibility="gone"
        tools:ignore="RtlCompat" />


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/img_person_head"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@id/img_person_more"
        android:layout_marginEnd="10dp"
        tools:ignore="RtlCompat"
        />
    <TextView
        android:id="@+id/tv_data"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:ellipsize="end"
        android:width="200px"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@id/img_person_more"
        android:layout_marginEnd="10dp"
        tools:ignore="RtlCompat" />

    <ImageView
        android:id="@+id/img_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorLine"
        android:layout_alignParentBottom="true"
        android:visibility="gone"/>
    <ImageView
        android:id="@+id/img_line_one"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@color/colorLine"
        android:layout_alignParentBottom="true"
        android:visibility="gone"/>

</RelativeLayout>

2.接着给控件自定义属性
在res/values文件中新建attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PersonalItemView">
        <attr name="icon" format="reference"/>//设置左侧图标
        <attr name="name" format="string"/>//左侧标题文字
        <attr name="data" format="string"/>//右侧描述文字
        <attr name="data_head" format="reference"/>
        <attr name="show_more" format="boolean"/>//是否显示右侧小箭头
        <attr name="show_line" format="boolean"/>//是否显示下划线
        <attr name="show_line_one" format="boolean"/>//是否显示大的下划线
    </declare-styleable>
</resources>

3.自定义View继承RelativeLayout
PersonalItemView.class

class PersonalItemView(
    context: Context,
    attrs: AttributeSet?
) :
    RelativeLayout(context, attrs) {
    private val data: TextView
    private val head: ImageView

    // 提供设置控件的描述数据
    fun setData(data: String?) {
        this.data.text = data
    }

    fun setHead(bitmap: Bitmap?) {
        head.setImageBitmap(bitmap)
    }

    fun getData(): String {
        return data.text.toString()
    }

    init {
        LayoutInflater.from(context).inflate(R.layout.item_person_information, this)
        val typedArray =
            context.obtainStyledAttributes(attrs, R.styleable.PersonalItemView)
        val icon = findViewById<ImageView>(R.id.img_person_icon)
        val more = findViewById<ImageView>(R.id.img_person_more)
        val line = findViewById<ImageView>(R.id.img_line)
        val name = findViewById<TextView>(R.id.tv_person_name)
        head = findViewById(R.id.img_person_head)
        data = findViewById(R.id.tv_data)
        icon.setImageDrawable(typedArray.getDrawable(R.styleable.PersonalItemView_icon))
        name.text = typedArray.getText(R.styleable.PersonalItemView_name)
        if (typedArray.getBoolean(R.styleable.PersonalItemView_show_more, false)) {
            more.visibility = View.VISIBLE
        }
        if (typedArray.getBoolean(R.styleable.PersonalItemView_show_line, false)) {
            line.visibility = View.VISIBLE
        }
        if(typedArray.getBoolean(R.styleable.PersonalItemView_show_line_one,false)){
            img_line_one.visibility = View.VISIBLE
        }
        typedArray.recycle()
    }
}

4.在需要用到的fragment的布局中使用PersnalItemView这个自定义控件
fragment_mine.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_head"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:icon="@drawable/ic_person_touxiang"
                app:name="头像"
                android:background="@color/white"
                app:data_head="@drawable/ic_shopping_on"
                app:show_more="true"
                app:show_line="true"/>
            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_nickname"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:icon="@drawable/ic_person_nicheng"
                app:name="昵称"
                app:data="昵称"
                app:show_more="true"
                app:show_line="true"/>
            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_gender"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:icon="@drawable/ic_person_sex"
                app:name="性别"
                app:data="女"
                app:show_more="true"
                app:show_line="true"/>
            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:icon="@drawable/ic_person_phone"
                app:name="手机"
                app:data="手机"
                app:show_line="true"
                app:show_more="true"/>
            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:icon="@drawable/ic_person_mima"
                app:name="修改密码"
                app:show_more="true"
                app:show_line_one="true"/>
            <com.example.meetyou.widget.PersonalItemView
                android:id="@+id/personal_item_about_us"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:icon="@drawable/ic_person_about"
                app:name="@string/about_we"
                app:show_more="true"
                app:show_line="true"/>
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>
</LinearLayout>

在fragment中，设置控件的点击事件，这里设置了头像item和关于我们的item
MineFragemnt.class

personal_item_head.setOnClickListener{
    window(mRootView)
    bottomWindow(mRootView)
}
personal_item_about_us.setOnClickListener{
    val intent = Intent(activity, AboutWeActivity::class.java)
    startActivity(intent)
}