标签的全部设计
实现目标：点击详情页面的Add按钮添加标签会弹出创建标签的小窗口
标签创建
添加后的标签会出现在详情页面中标签选项栏
标签的显示采用瀑布流布局，这里因为时间原因没有创建自定义布局实现瀑布流布局。而是采用导入第三方库的方式
implementation 'com.nex3z:flow-layout:1.3.3'
要实现点击出现弹窗效果，就需创建一个DialogFragment() 对象。
弹窗的布局设计add_tag_dialog.xml
弹窗布局
值得注意的是这里颜色选择控件的tag值与其background一样都是保存的该颜色的十六进制码，便于保存到数据库，并且在详情页面设置标签背景色时需要的也是String类型（原因主要是后者）。
颜色选择
创建DetailViewModule
用于数据仓库与AddTagDialogFragment之间传递保存数据到数据库
/**
*@Description
*@Author PC
*@QQ 1578684787
*/
class DetailViewModel(application: Application):AndroidViewModel(application) {
private val repository = TodoRepository(application)
var tagList:LiveData<List<TagData>> = repository.getAllTags()
fun insertTag(tagData: TagData){
viewModelScope.launch (Dispatchers.IO){
repository.insertTag(tagData)
}
}
}
创建AddTagDialogFragment
colorViewSelected：这里再颜色选择按钮下方设计一条下滑线，点击对应按钮下划线将移动到该按钮下方。用以标识该颜色被选中
/**
*@Description
*@Author PC
*@QQ 1578684787
*/
class AddTagDialogFragment:DialogFragment() {
private lateinit var binding:AddTagDialogBinding
private var bgColor = "#ff8B7C"
private val mViewModel:DetailViewModel by viewModels()
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = AddTagDialogBinding.inflate(inflater)
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.color1.setOnClickListener { colorViewSelected(it)}
binding.color2.setOnClickListener {colorViewSelected(it) }
binding.color3.setOnClickListener {colorViewSelected(it) }
binding.color4.setOnClickListener {colorViewSelected(it) }
//dialog和fragment的退出效果不同
binding.cancelBtn.setOnClickListener { dismiss() }
binding.okBtn.setOnClickListener {
saveTag()
}
}
@SuppressLint("ShowToast")
private fun saveTag(){
if (binding.tagEditTextName.text.isEmpty()){
Toast.makeText(requireContext(),"标签名不能为空",Toast.LENGTH_LONG)
}else{
mViewModel.insertTag(TagData(0,binding.tagEditTextName.text.toString(),bgColor))
dismiss()
}
}
private fun colorViewSelected(view: View){
//设置颜色按钮下方下滑线动画
binding.underline
.animate()
.translationX(view.x - binding.color1.x)
.setDuration(500)
.start()
bgColor = view.tag as String
}
}
当然，创建的AddTagDialogFragment需要与add_tag_dialog.xml关联
右键点击对应Fragment选择copy path获取路径，再进xml文件中关联
image.png
add_tag_dialog.xml中
详情页面中标签的添加实现
为什么要使用removeAllViews()：下方代码中每次遍历tag的数据库的时候都会提取出数据库里的所有数据并且创建TextView，这就会导致每次创建新的tag的时候都会为之前的tag数据创建新的TextView使之前创建的tag重复创建，所以需要在每次点击事件响应的时候删除之前的TextView之后再遍历创建，所有继承于ViewGroup的容器都有removeAllViews方法。
image.png
其他的详细代码可前往上几期的文章：
手机标签（一）
手机标签（二）
手机标签（三）
或前往github获取：完整代码
