Android 手机便签（二）

创建mainVIewModule

实现MVVM设计模式的重要环节，可在任意的fragment中监听todoDataList的数据变化，实时更新数据。并且向外部提供数据操作的方法

class MainViewModel(application: Application):AndroidViewModel(application) {
    //数据仓库
    private val repository = TodoRepository(application)
    //todo数据
    val todoDataList:LiveData<List<Todo>> = repository.getTodoDatas()

    fun insertTodoData(todo: Todo){
        viewModelScope.launch (Dispatchers.IO){
            repository.insertTodoData(todo)
        }
    }
    //删除todo
    fun deleteTodoData(todo: Todo){
        viewModelScope.launch (Dispatchers.IO){
            repository.deleteTodoData(todo)
        }
    }
    //删除所有todo
    fun deleteAllTodoDatas(){
        viewModelScope.launch (Dispatchers.IO){
            repository.deleteAllTodoDatas()
        }
    }
    //更新todo
    fun updateTodoData(todo: Todo){
        viewModelScope.launch(Dispatchers.IO){
            repository.updateTodoData(todo)
        }
    }

}

创建Fragment对应开始展示的三个界面

Fragment文件

这里值展示mainFragment创建页的代码，其他的相同

class MainFragment : Fragment() {
    private lateinit var binding:FragmentMainBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View{
        binding = FragmentMainBinding.inflate(inflater)
        return binding.root
    }

在Activity_main.xml文件中创建fragment控件

image.png

在之前创建的navigation中加入创建的fragment（下为成品效果，做完完整项目后才有此图界面效果）

image.png

界面动画

界面动画包括进入、退出、弹入、弹出效果.
创建anim文件，再创建Resource文件

image.png

slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%"
    android:toXDelta="0"
    android:duration="300">

</translate>

slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="-100%"
    android:duration="300">

</translate>

pop_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-100%"
    android:toXDelta="0"
    android:duration="300">

</translate>

pop_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100%"
    android:duration="300">

</translate>

设计view的圆角效果

如图

圆角效果

在drawable中创建

round_outline_shape.xml
该设计具有透明效果，就如上图所示，按钮的底色与背景相同

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <stroke android:width="1dp"
        android:color="@color/dark_purple"/>
    <solid android:color="#00000000"/>
</shape>

round_solid_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <solid android:color="@color/white"/>


</shape>

广告页搭建

广告页面

其实就是一张背景图加上按钮两部分
fragment_splash.xml

 <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/splash"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/jumpBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:background="@drawable/round_outline_shape"
        android:text="跳转"
        android:textColor="@color/dark_purple"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

SplashFragment类
功能为广告停留3秒进入主页，或点击跳过直接进入主页（此时别忘了取消定时器）
主要设计Timer()类的使用
这个“定时器”需要设置在交互的时候，不要再创建View的时候就启动定时器。
注：子线程中不能做UI，跳转需要在主线程中实现。解释一下这里为什么使用lifecycleScope而不使用runOnUIThread：这里不是Activity而是Fragment。

class SplashFragment : Fragment() {
   private lateinit var binding:FragmentSplashBinding
   private lateinit var timer: Timer
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentSplashBinding.inflate(inflater)
        //点击跳转按钮
        binding.jumpBtn.setOnClickListener {
            //取消定时器
            timer.cancel()
            //执行跳转
            findNavController().navigate(R.id.action_splashFragment_to_mainFragment)
        }
        return binding.root
    }

    override fun onResume() {
        super.onResume()
        //设置定时器，3秒之后跳转
        timer = Timer()
        timer.schedule(object :TimerTask(){
            override fun run() {
                lifecycleScope.launch(Dispatchers.Main){
                    //跳转到主页面
                    findNavController().navigate(R.id.action_splashFragment_to_mainFragment)
                }
            }
        },3000)
    }

}

跳转箭头的相关配置

nav_graph中

其他两个页面

详情页添加的控件

有关Tag的后面再具体讲解展示

详情 主页添加的控件 主页

主页无数据状态

在MainFragment类中创建判断是否有数据的方法

 //检查是否显示无数据状态
    private fun checkEmptyStatus(dataList:List<Todo>){
        if (dataList.isEmpty()){
            binding.ivEmptyFace.visibility = View.VISIBLE
            binding.ivEmpty.visibility = View.VISIBLE
            //隐藏头部视图
            binding.TopTaskContainer.visibility = View.INVISIBLE
        }else{
            binding.ivEmptyFace.visibility = View.INVISIBLE
            binding.ivEmpty.visibility = View.INVISIBLE
            //显示头部视图
            binding.TopTaskContainer.visibility = View.VISIBLE
        }
    }

无数据状态

未完待续……

完整代码