安卓 view淡入淡出(fade in fade out) kotlin

---

前言

好久没写文章了,简单码一个淡入淡出,我们先上效果图

那么接下来上代码

---

一、布局文件

我这边直接将activity_main.xml改为下列代码,可以看到其中包含一张图片,一条文本和一个按钮

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv"
        android:text="点击淡入淡出"/>

</androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

二、kotlin扩展方法

1.fadeOutAnimation 淡出动画

利用kotlin的扩展特性写了一个view的扩展方法
代码如下（示例）：

    fun View.fadeOutAnimation() {
        val mFadeOutAnimation: AlphaAnimation?
        // 监听动画结束的操作
        mFadeOutAnimation = AlphaAnimation(1.0f, 0.0f)
        //淡出时间
        mFadeOutAnimation.setDuration(1000)
        mFadeOutAnimation.fillAfter = true
        mFadeOutAnimation.setAnimationListener(object : AnimationListener {
            override fun onAnimationStart(arg0: Animation) {
            }

            override fun onAnimationRepeat(arg0: Animation) {
            }

            override fun onAnimationEnd(arg0: Animation) {
                this@fadeOutAnimation.visibility = View.GONE
            }
        })
        this@fadeOutAnimation.startAnimation(mFadeOutAnimation)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• setDuration 是淡出动画持续时间
• fillAfter 是设置在动画结束过后保持最后的样子
• setAnimationListener 是为了在动画结束时完全隐藏图片,让我们一会进行淡出时不会很突兀
• startAnimation 开始动画

2.fadeInAnimation 淡入动画

淡入动画也是一样的
代码如下（示例）：

    fun View.fadeInAnimation() {
        var mFadeInAnimation: AlphaAnimation?
        mFadeInAnimation = AlphaAnimation(0.0f, 1.0f)
        //淡入时间
        mFadeInAnimation.setDuration(1000)
        mFadeInAnimation.fillAfter = true
        this@fadeInAnimation.startAnimation(mFadeInAnimation)
    }
1
2
3
4
5
6
7
8

• setDuration 是淡入动画持续时间
• fillAfter 是设置在动画结束过后保持最后的样子
• startAnimation 开始动画

三、使用

直接初始化图片然后使用就好了

  // 假设imageView是你要更换图片的ImageView控件
        val imageView = findViewById<ImageView>(R.id.iv)
        val textView = findViewById<TextView>(R.id.tv)
        val button = findViewById<Button>(R.id.btn)

        button.setOnClickListener {
            imageView.fadeOutAnimation()
            textView.fadeOutAnimation()


            MainScope().launch {
                //假设这里是加载网络图片所耗时
                delay(300)
            }

            if (textView.text != "这是红色") {
                imageView.setImageResource(R.color.red)
                textView.text = "这是红色"
            } else {
                imageView.setImageResource(R.color.white)
                textView.text = "这是白色"
            }

            imageView.fadeInAnimation()
            textView.fadeInAnimation()
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

完整activtiy代码如下

import android.os.Bundle
import android.view.View
import android.view.animation.AlphaAnimation
import android.view.animation.Animation
import android.view.animation.Animation.AnimationListener
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import kotlinx.coroutines.MainScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        // 假设imageView是你要更换图片的ImageView控件
        val imageView = findViewById<ImageView>(R.id.iv)
        val textView = findViewById<TextView>(R.id.tv)
        val button = findViewById<Button>(R.id.btn)

        button.setOnClickListener {
            imageView.fadeOutAnimation()
            textView.fadeOutAnimation()


            MainScope().launch {
                //假设这里是加载网络图片所耗时
                delay(300)
            }

            if (textView.text != "这是红色") {
                imageView.setImageResource(R.color.red)
                textView.text = "这是红色"
            } else {
                imageView.setImageResource(R.color.white)
                textView.text = "这是白色"
            }

            imageView.fadeInAnimation()
            textView.fadeInAnimation()
        }


    }

    fun View.fadeOutAnimation() {
        val mFadeOutAnimation: AlphaAnimation?
        // 监听动画结束的操作
        mFadeOutAnimation = AlphaAnimation(1.0f, 0.0f)
        //淡出时间
        mFadeOutAnimation.setDuration(1000)
        mFadeOutAnimation.fillAfter = true
        mFadeOutAnimation.setAnimationListener(object : AnimationListener {
            override fun onAnimationStart(arg0: Animation) {
            }

            override fun onAnimationRepeat(arg0: Animation) {
            }

            override fun onAnimationEnd(arg0: Animation) {
                this@fadeOutAnimation.visibility = View.GONE
            }
        })
        this@fadeOutAnimation.startAnimation(mFadeOutAnimation)
    }

    fun View.fadeInAnimation() {
        var mFadeInAnimation: AlphaAnimation?
        mFadeInAnimation = AlphaAnimation(0.0f, 1.0f)
        //淡入时间
        mFadeInAnimation.setDuration(1000)
        mFadeInAnimation.fillAfter = true
        this@fadeInAnimation.startAnimation(mFadeInAnimation)
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

---

总结

本文通过一个简单的示例介绍了在Android开发中实现淡入淡出效果的方法。首先，我们定义了两个扩展方法，分别用于实现淡出动画和淡入动画。然后，在点击按钮时，我们通过调用这两个方法来实现图片和文本的淡出效果。在耗时操作完成后，我们根据文本内容的不同来切换图片和文本的内容，并进行淡入效果的展示。通过这种方式，我们可以实现图片和文本的平滑过渡，给用户带来更好的使用体验。代码简单易懂，具有一定的可复用性。希望对大家的Android开发有所帮助。