选项卡处于活动状态时个人资料图片的 BottomNavigation 反射

BottomNavigation reflection of the profile picture when the tab is active

提问人:Katou 提问时间:10/23/2023 最后编辑:greybeardKatou 更新时间:10/24/2023 访问量:47

问:

我遇到了在轮廓中显示头像图像这样的问题。我需要请求 API 中的动态图像最初为 28 dp,然后在选项卡处于活动状态时向其显示轮廓图像。
我做到了,但我的照片质量损失了很多。

你能告诉我这是怎么回事吗?

我使用 Glide 库从链接转换为图像

我的代码:

XMl的

<com.google.android.material.bottomnavigation.BottomNavigationView 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:app="http://schemas.android.com/apk/res-auto" 
 android:id="@+id/main___bottom_navigation" 
 android:layout_width="match_parent"     android:layout_height="wrap_content" 
 android:layout_marginStart="0dp"     android:layout_marginEnd="0dp" 
 android:background="@drawable/main__bottom_content__divider" 
 app:itemIconTint="@color/application___bottom_navigation__icon__selector" 
 app:itemTextColor="@color/application___bottom_navigation__text__selector" 
 app:labelVisibilityMode="labeled"     app:itemIconSize="28dp" 
 app:menu="@menu/main___bottom_navigation__user"/>

活动性

main___bottom_navigation.menu.forEach {
            when (it.itemId) {
                R.id.profile -> {
                    it.apply {
                        if (isProfilePictureEnabled) {
                            main___bottom_navigation.itemIconTintList = null
                            images
                                .asBitmap()
                                .load(accountInfo.userAvatar)
                                   .centerCrop()
                                .circleCrop()
                                .into(object : SimpleTarget<Bitmap>() {
                                    override fun onResourceReady(
                                            resource: Bitmap,
                                            transition: Transition<in Bitmap>?
                                    ) {
                                        it.icon = BitmapDrawable(resources, resource)
                                    }
                                })
                        }

                        setOnMenuItemClickListener {
                            if (!isChecked) {
                                val currentAccountInfo: AccountInfo? = _accountManager.getInfo()
                                if (currentAccountInfo !== null) {
                                    if (isProfilePictureEnabled) {
                                        images
                                            .asBitmap()
                                            .load(currentAccountInfo.userAvatar)
                                            .centerCrop()
                                            .circleCrop()
                                            .into(object : SimpleTarget<Bitmap>() {
                                                override fun onResourceReady(
                                                        resource: Bitmap,
                                                        transition: Transition<in Bitmap>?
                                                ) {
                                                    val circularDrawable =
                                                            BitmapDrawable(resources, resource)

                                                    _applyBlueCircleForProfilePicture(
                                                            menuItem = it,
                                                            circularDrawable = circularDrawable
                                                    )
                                                }
                                            })
                                    }
                                }
                                isChecked = true
                            }
                            true
                        }
                    }
                }
            }
        }

图像处理:

    private fun _applyBlueCircleForProfilePicture(
            menuItem: MenuItem,
            circularDrawable: BitmapDrawable,
    ) {
        val (paddingAvatarLayer, avatarLayer) = getAvatarDrawable(circularDrawable)
        val (paddingTransparentLayer, transparentLayer) = getTransparentDrawable()
        val outlineLayer = getOutlineDrawable()

        val layerDrawable = LayerDrawable(
                arrayOf(outlineLayer, transparentLayer, avatarLayer)
        )

        layerDrawable.setLayerInset(0, 0, 0, 0, 0)
        layerDrawable.setLayerInset(1, paddingTransparentLayer, paddingTransparentLayer, paddingTransparentLayer, paddingTransparentLayer)
        layerDrawable.setLayerInset(2, paddingAvatarLayer, paddingAvatarLayer, paddingAvatarLayer, paddingAvatarLayer)

        menuItem.icon = layerDrawable
    }

    private fun getAvatarDrawable(circularDrawable: BitmapDrawable): Pair<Int, BitmapDrawable> {
        val density = resources.displayMetrics.density
        val scaleFactor = density * 20

        val matrix = Matrix().apply {
            postScale(1f / scaleFactor, 1f / scaleFactor)
        }

        val scaledBitmap = Bitmap.createBitmap(
                circularDrawable.bitmap,
                0,
                0,
                circularDrawable.intrinsicWidth,
                circularDrawable.intrinsicHeight,
                matrix,
                true
        )
        val paddingAvatarLayer = 4
        val avatarLayer = BitmapDrawable(resources, scaledBitmap)
        return Pair(paddingAvatarLayer, avatarLayer)
    }

    private fun getTransparentDrawable(): Pair<Int, ShapeDrawable> {
        val paddingTransparentLayer = 1
        val transparentLayer = ShapeDrawable(OvalShape()).apply {
            paint.color = ContextCompat.getColor(
                    this@MainActivity,
                    R.color.white
            )
            setBounds(0, 0, 26, 26)
        }
        return Pair(paddingTransparentLayer, transparentLayer)
    }

    private fun getOutlineDrawable(): ShapeDrawable {
        val outlineLayer = ShapeDrawable(OvalShape()).apply {
            paint.color = ContextCompat.getColor(
                    this@MainActivity,
                    R.color.application___design3__text__curious_blue
            )
            setBounds(0, 0, 28, 28)
        }
        return outlineLayer
    }

发生了什么事:

未激活图标 - 图片。可点击

活动图标 - 图片。可点击

我所期望的:等待应该发生的事情 - 图片。可点击

图标处于活动状态时的尺寸:宽度:
28px 高度:28px 填充:2px 边框半径:24px 边框:1.5px



我已经在尝试让它在第二天工作,但没有任何效果。

android xml kotlin android-glide bottomnavigationview

评论


答: 暂无答案