Android 头像折叠

一、前言：

展示效果图：

3个头像.png
4个头像.png

二、使用：

 var url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656645389&t=1e42700d1aa006ecfcaf70ea095c5de5"

       var list = mutableListOf<String>()
        list.add(url)
        list.add(url)
        list.add(url)
        list.add(url)
      //  iconsMulti.addViews(list)  //调用公共头像
        iconsMulti.addFourView(list)  //调用扩展的4个头像

1、xml使用：

 <com.example.myapplication.common.MutilsImage
        android:id="@+id/icons_multi"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="28dp"
        app:intermide="24dp"
        app:borderWidth="1dp"
        app:iconSize="28dp"
        android:layout_marginTop="300dp"
        android:layout_marginLeft="80dp"
        />

2、MutilsImage工具：

package com.example.myapplication.common

import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.widget.RelativeLayout
import androidx.core.content.ContextCompat
import com.bumptech.glide.Glide
import com.example.myapplication.R

import de.hdodenhof.circleimageview.CircleImageView

class MutilsImage(context: Context, attrs: AttributeSet) : RelativeLayout(context, attrs) {

    var marginLeft = 0
    var borderWidth = 1.dp
    var borderColor = ContextCompat.getColor(context, R.color.white)
    var iconSize = 20.dp
    var intermide = 15.dp

    init {
        val attrsSet = context.obtainStyledAttributes(attrs, R.styleable.MutilsImage)
        borderWidth = attrsSet.getDimension(R.styleable.MutilsImage_borderWidth, borderWidth.toFloat()).toInt()
        borderColor = attrsSet.getColor(R.styleable.MutilsImage_borderColor, borderColor)
        iconSize = attrsSet.getDimension(R.styleable.MutilsImage_iconSize, iconSize.toFloat()).toInt()
        intermide = attrsSet.getDimension(R.styleable.MutilsImage_intermide, intermide.toFloat()).toInt()
        attrsSet.recycle()
    }


    fun setSize(imgSize: Int, inter: Int, border: Int) {
        borderWidth = border
        intermide = inter
        iconSize = imgSize
    }

    fun addViews(urls: List<String?>?): Int {
        removeAllViews()
        marginLeft = 0
        if (urls.isNullOrEmpty()) {
            return 0
        }

        urls.take(3).forEach {

            val imageView = CircleImageView(context)
            imageView.borderColor = borderColor
            imageView.borderWidth = borderWidth
            val layoutParams = RelativeLayout.LayoutParams(iconSize, iconSize)
            layoutParams.leftMargin = marginLeft

            layoutParams.addRule(RelativeLayout.CENTER_VERTICAL)

            marginLeft += intermide

            addView(imageView, layoutParams)

            Glide.with(context).load(it)
                    .override(iconSize, iconSize)
                    .placeholder(R.mipmap.tab_default_head_circle)
                    .error(R.mipmap.tab_default_head_circle)
                    .into(imageView)
        }
        return if (urls.size > 3) 3 else urls.size
    }
}

3、focus_attrs

图片.png

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <declare-styleable name="MutilsImage" tools:ignore="ResourceName">
        <attr name="iconSize" />
        <attr name="intermide" format="dimension" />
        <attr name="borderWidth" format="dimension" />
        <attr name="borderColor" format="color" />
    </declare-styleable>
    
</resources>

4、dp转化为px

  var intermide = 15.dp

Extensions类

package com.example.myapplication.common

import android.content.res.Resources
import android.graphics.Color
import android.util.TypedValue
import android.widget.TextView
import androidx.core.content.ContextCompat
import androidx.lifecycle.MutableLiveData
import java.lang.reflect.InvocationHandler
import java.lang.reflect.Method
import java.lang.reflect.Proxy
import java.util.*
import kotlin.collections.HashMap

val Float.px
    get() = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this,
        Resources.getSystem().displayMetrics
    )

val Float.dp
    get() = this.px

val Int.dp
    get() = this.toFloat().dp.toInt()

5、 MutilsImage扩展到4个头像

/**
 * 扩展展示4个头像
 */
fun MutilsImage.addFourView(urls: List<String?>?): Int {
    removeAllViews()
    marginLeft = 0
    if (urls.isNullOrEmpty()) {
        return 0
    }

    urls.take(4).forEach {

        val imageView = CircleImageView(context)
        imageView.borderColor = borderColor
        imageView.borderWidth = borderWidth
        val layoutParams = RelativeLayout.LayoutParams(iconSize, iconSize)
        layoutParams.leftMargin = marginLeft

        layoutParams.addRule(RelativeLayout.CENTER_VERTICAL)

        marginLeft += intermide

        addView(imageView, layoutParams)

        Glide.with(context).load(it)
            .override(iconSize, iconSize)
            .placeholder(R.mipmap.tab_default_head_circle)
            .error(R.mipmap.tab_default_head_circle)
            .into(imageView)
    }

    return if (urls.size > 4) 4 else urls.size
}

6、Demo测试一定要添加如下

//权限配置
<uses-permission android:name="android.permission.INTERNET"/>

依赖添加：

 //头像
implementation "de.hdodenhof:circleimageview:3.1.0"
implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'