Android 手机便签（四）

标签的全部设计

实现目标：点击详情页面的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获取：完整代码