点兔换图——新年兔了个兔专题

666 阅读2分钟

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

前言

本篇是通过图片的点击事件去切换图片,实现图片点击轮播,而新年兔了个兔专题,当然是使用了一系列兔子的图片作为轮播图展示的,下面我们来看看怎么实现点兔换图的。

正篇

实现方法

其实安卓中实现方法很简单,我们可以轻松办到,就是ImageView中增加点击事件

class RabbitFirst : AppCompatActivity() {

    private lateinit var binding: ActivityRabbitFirstBinding
    private var id by Delegates.notNull<Int>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityRabbitFirstBinding.inflate(layoutInflater)

        setContentView(binding.root)


        id = 0

        binding.img1.setOnClickListener {
            if (id == 0) {
                binding.img1.setImageBitmap(BitmapFactory.decodeResource(resources, R.drawable.rabit_c) )
                id++
                return@setOnClickListener
            }
            if (id == 1) {
                binding.img1.setImageResource(R.drawable.rabit_b)
                id++
                return@setOnClickListener
            }
            if (id == 2) {
                binding.img1.setImageResource(R.drawable.rabit_a)
                id++
                return@setOnClickListener
            }
            if (id == 3) {
                binding.img1.setImageResource(R.drawable.rabit_d)
                id = 0
                return@setOnClickListener
            }

            Log.i("id ===$id", "is id")
        }
    }
}

如果图片多了可以使用数组去存,然后单独写方法去处理,这里只有四张图,所以我这里使用if判断,主要还是没找到有关setImageResource的对应方法,网上似乎说没有对应的get方法,可以使用加setTag和getTag方法去实现,和我的判断方法也类似,我的判断方法就是如果有四张图,我们就给它显示顺序,从0-3,开始,id为0-2时点击图片切换下一张,到id=3时再清空id值,置为0,这样又能回到第一张兔子图。

展示效果

最终效果如下,我们点击图片就可以进行图片轮换:

7ff3bf7180138f1af403f321b3f84b32.gif

ps:实现的时候出现了不能点击的问题,然后发现原来是在点击事件使用id全局变量增加时正好依次增加最后还是回到原图了,所以需要if里加上返回return,不经过下个if检查

总结

虽然形式很简单,但也是安卓的实现方法去做的,其实很多五花八门的效果都是从最简单的开始,然后添加各种新的技术最终才变得更加有趣好看。