You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android中如何用Material Design动态添加带API图标的Entry Chips并使用Glide设置?

没问题,我来一步步帮你实现这个需求——动态创建Material Entry Chips,并且用Glide从API加载图标,完全不需要本地预存图片。

动态创建带网络图标的Material Entry Chips(Glide实现)

1. 先添加必要的依赖

确保你的项目引入了Material Components库和Glide图片加载库,在app模块的build.gradle(或build.gradle.kts)中添加:

// Material Components库(用于Chip组件)
implementation 'com.google.android.material:material:1.11.0'
// Glide图片加载库
implementation 'com.github.bumptech.glide:glide:4.16.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'

2. 准备布局容器

在你的Activity/Fragment布局里,添加一个ChipGroup作为动态Chip的承载容器:

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacing="8dp"
    app:singleLine="false" />

3. 动态创建Chip并加载网络图标

下面以Kotlin为例,编写创建Chip并通过Glide加载网络图标的核心逻辑:

首先获取ChipGroup实例:

val chipGroup = findViewById<ChipGroup>(R.id.chip_group)

然后编写创建单个Chip的函数,传入Chip文本和API返回的图标URL:

private fun createEntryChip(chipText: String, iconUrl: String) {
    // 1. 初始化Chip实例,配置Entry Chip基础样式
    val chip = Chip(this).apply {
        text = chipText
        isClickable = true
        isCheckable = false // Entry Chip默认不需要选中状态
        closeIcon = null // 不需要关闭按钮可设为null,需要的话可保留默认样式
        setChipBackgroundColorResource(R.color.chip_background) // 自定义背景色
        setTextColor(ContextCompat.getColor(context, R.color.chip_text))
        // 限制图标大小,避免显示异常
        iconSize = resources.getDimensionPixelSize(R.dimen.chip_icon_size)
    }

    // 2. 用Glide加载网络图标到Chip的icon位置
    Glide.with(this)
        .asDrawable()
        .load(iconUrl)
        // 可选:如果完全没有本地资源,可跳过placeholder/error,或用代码生成临时占位符
        .placeholder(createTempPlaceholder(chip.iconSize))
        .error(createTempPlaceholder(chip.iconSize))
        .into(object : CustomTarget<Drawable>() {
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                chip.icon = resource
            }

            override fun onLoadCleared(placeholder: Drawable?) {
                chip.icon = placeholder
            }
        })

    // 3. 将配置好的Chip添加到容器中
    chipGroup.addView(chip)
}

// 辅助函数:生成临时占位符(无本地资源时用)
private fun createTempPlaceholder(size: Int): Drawable {
    return ColorDrawable(Color.LTGRAY).apply {
        setBounds(0, 0, size, size)
        cornerRadius = size / 2f
    }
}

Java版本参考

如果你的项目用Java开发,逻辑完全一致,语法调整如下:

private void createEntryChip(String chipText, String iconUrl) {
    Chip chip = new Chip(this);
    chip.setText(chipText);
    chip.setClickable(true);
    chip.setCheckable(false);
    chip.setCloseIcon(null);
    chip.setChipBackgroundColorResource(R.color.chip_background);
    chip.setTextColor(ContextCompat.getColor(this, R.color.chip_text));
    int iconSize = getResources().getDimensionPixelSize(R.dimen.chip_icon_size);
    chip.setIconSize(iconSize);

    Glide.with(this)
            .asDrawable()
            .load(iconUrl)
            .placeholder(createTempPlaceholder(iconSize))
            .error(createTempPlaceholder(iconSize))
            .into(new CustomTarget<Drawable>() {
                @Override
                public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                    chip.setIcon(resource);
                }

                @Override
                public void onLoadCleared(@Nullable Drawable placeholder) {
                    chip.setIcon(placeholder);
                }
            });

    chipGroup.addView(chip);
}

private Drawable createTempPlaceholder(int size) {
    ColorDrawable placeholder = new ColorDrawable(Color.LTGRAY);
    placeholder.setBounds(0, 0, size, size);
    placeholder.setCornerRadius(size / 2f);
    return placeholder;
}

4. 调用方法批量创建Chips

当你从API获取到数据列表后,遍历列表调用createEntryChip即可:

// 假设从API获取到的Chip数据列表
val chipDataList = listOf(
    Pair("音乐", "https://your-api-url/icons/music.png"),
    Pair("电影", "https://your-api-url/icons/movie.png"),
    Pair("游戏", "https://your-api-url/icons/game.png")
)

chipDataList.forEach { (text, iconUrl) ->
    createEntryChip(text, iconUrl)
}

5. 最后别忘了加网络权限

AndroidManifest.xml中添加网络权限,否则Glide无法加载网络图片:

<uses-permission android:name="android.permission.INTERNET" />

内容的提问来源于stack exchange,提问作者Eswar

火山引擎 最新活动