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




