美文网首页
利用ViewPager2实现的全屏时钟

利用ViewPager2实现的全屏时钟

作者: 超级绿茶 | 来源:发表于2020-03-30 14:53 被阅读0次
全屏时钟效果

由于ViewPager2新加入了垂直滑动的效果,一拍脑袋想到可以用这个功能做一个全屏的时钟的,效果如图,主要就是平排着6个ViewPager2的控件。然后再用一个Handler根据当时时间循环刷新这6个控件。原理很简单,咱们说做就做;


class MainActivity : AppCompatActivity() {
    private val listNumber = listOf(9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON) // 屏幕常亮
        setContentView(R.layout.activity_main)
        ibtnBack.setOnClickListener { finish() }
        initViewPager()
    }

    override fun onStart() {
        super.onStart()
        // 通过消息机制循环刷新控件
        val handler = @SuppressLint("HandlerLeak")
        object : Handler() {
            override fun handleMessage(msg: Message) {
                super.handleMessage(msg)
                showTimeToViewPager()
                sendEmptyMessageDelayed(0x00, 500)
            }
        }
        handler.sendEmptyMessage(0x00)
        // 退出时删除消息
        this.lifecycle.addObserver(object : LifecycleObserver {
            @OnLifecycleEvent(Lifecycle.Event.ON_DESTROY)
            fun onDestroy() {
                handler.removeCallbacksAndMessages(null)
            }
        })
    }

    private fun initViewPager() {
        buildViewPager(vpHour1)
        buildViewPager(vpHour2)
        buildViewPager(vpMinute1)
        buildViewPager(vpMinute2)
        buildViewPager(vpSecond1)
        buildViewPager(vpSecond2)
    }

    private fun buildViewPager(vp: ViewPager2) {
        vp.isUserInputEnabled = false // 禁止手滑控件
        vp.orientation = ORIENTATION_VERTICAL // 垂直滚动
        vp.adapter = object : RecyclerView.Adapter<RecyclerView.ViewHolder>() { // 设置适配器
            override fun onCreateViewHolder(
                parent: ViewGroup,
                viewType: Int
            ): RecyclerView.ViewHolder {
                val view =
                    LayoutInflater.from(parent.context).inflate(R.layout.item_clock, parent, false)
                return object : RecyclerView.ViewHolder(view) {}
            }

            override fun getItemCount(): Int {
                return listNumber.size
            }

            override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
                holder.itemView.tvClockNum.text = listNumber[position].toString()
            }
        }
        vp.registerOnPageChangeCallback(object : OnPageChangeCallback() {

            override fun onPageScrollStateChanged(state: Int) {
                // 当滚动结束并且滚动到最后一页时再跳转到第一页,跳转时无动画
                if (state = ViewPager2.SCROLL_STATE_IDLE && vp.currentItem == 10) {
                    vp.postDelayed({
                        vp.setCurrentItem(0, false)
                    }, 500)
                }
            }
        })
    }

    private fun showTimeToViewPager() {
        val strDate = SimpleDateFormat("HH:mm:ss").format(System.currentTimeMillis())
        val hour = strDate.split(":")[0].toInt()
        vpHour1.currentItem = hour.div(10) + 1
        vpHour2.currentItem = hour.rem(10) + 1
        val minute = strDate.split(":")[1].toInt()
        vpMinute1.currentItem = minute.div(10) + 1
        vpMinute2.currentItem = minute.rem(10) + 1
        val second = strDate.split(":")[2].toInt()
        vpSecond1.currentItem = second.div(10) + 1
        vpSecond2.currentItem = second.rem(10) + 1
    }

}

点击链接加入QQ群聊:https://jq.qq.com/?_wv=1027&k=5z4fzdT
或关注微信公众号:口袋里的安卓

相关文章

网友评论

      本文标题:利用ViewPager2实现的全屏时钟

      本文链接:https://www.haomeiwen.com/subject/qzlvuhtx.html