Plein écran Android et affichage immersif

Dans le développement d'applications, afin de fournir de meilleurs effets visuels, l'affichage plein écran et l'affichage immersif sont tous deux courants. Dans mon expérience de développement passée, j'utilise généralement ImmersionBar , une bibliothèque tierce, pour y parvenir. Aujourd'hui, je vais vous présenter comment l'implémenter via l'API officielle.

Affichage immersif

L'affichage immersif signifie que vous pouvez toujours voir la barre d'état, mais l'arrière-plan de la barre d'état est transparent et il n'y a pas de séparation évidente de l'interface utilisateur de l'application.

Image non immersive :

Le code immersif est implémenté comme suit :

//修改全局主题中statusBarColor和navigationBarColor为透明
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ExampleDemo" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

class ImmersionActivity : AppCompatActivity() {

    private lateinit var windowInsetsController: WindowInsetsControllerCompat

    lateinit var binding: LayoutImmersionActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.layout_immersion_activity)

        WindowCompat.setDecorFitsSystemWindows(window, false)
        windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        windowInsetsController.isAppearanceLightNavigationBars = false

        binding.btnChangeToLightBar.setOnClickListener {
            //顶部布局为亮色
            lightBar()
        }

        binding.btnChangeToDarkBar.setOnClickListener {
            //顶部布局为深色
            darkBar()
        }
    }

    private fun lightBar() {
        binding.topView.setBackgroundColor(ContextCompat.getColor(this, R.color.white))
        binding.tvTitle.setTextColor(ContextCompat.getColor(this, R.color.black))
        setBarStatus(true)
    }

    private fun darkBar() {
        binding.topView.setBackgroundColor(ContextCompat.getColor(this, R.color.color_23242a))
        binding.tvTitle.setTextColor(ContextCompat.getColor(this, R.color.white))
        setBarStatus(false)
    }

    //改变状态栏文字和图标的颜色（根据顶部布局的背景色来决定）
    private fun setBarStatus(light: Boolean) {
        windowInsetsController.isAppearanceLightStatusBars = light
    }
}

L'effet est comme indiqué sur la figure :

définir l'espacement

On peut voir que le titre et la barre d'état en haut de l'application sont très petits, ce qui est différent de l'effet que je souhaite, et le contrôle par points en bas est également bloqué par la barre de navigation transparente. L'officiel fournit l'API correspondante pour faire face à ces situations.

code afficher comme ci-dessous:

//重复的部分省略了
class ImmersionActivity : AppCompatActivity() {
    ...
    private var hadChange = false

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

        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { _, windowInsets ->
            //此回调会触发多次，所以用布尔值来控制仅触发一次
            if (!hadChange) {
                hadChange = true
                val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
                //状态栏高度
                val statusBarHeight = insets.top
                //调整顶部控件的高度
                binding.topView.run {
                    updateLayoutParams<ConstraintLayout.LayoutParams> {
                        height += statusBarHeight
                    }
                    updatePadding(top = paddingTop + statusBarHeight)
                }
                binding.tvTitle.run {
                    updateLayoutParams<ConstraintLayout.LayoutParams> {
                        topMargin += statusBarHeight
                    }
                }

                //导航栏高度
                val navigationBarHeight = insets.bottom
                //调整圆点控件不被导航栏遮挡
                binding.bottomView.run {
                    updateLayoutParams<ConstraintLayout.LayoutParams> {
                        bottomMargin += navigationBarHeight
                    }
                }
            }
            WindowInsetsCompat.CONSUMED
        }
        ...
    }
    ...
}

L'effet est comme indiqué sur la figure :

affichage plein écran

L'affichage plein écran signifie masquer la barre d'état et la barre de navigation.La dernière API officielle est très simple.

code afficher comme ci-dessous:

class FullScreenActivity : AppCompatActivity() {

    lateinit var binding: LayoutFullScreenActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.layout_full_screen_activity)
        
        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        //控制系统栏的行为
        windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
    }
}

Remarque : systemBarsBehaviorIl existe trois types de modifications apportées à la barre système utilisée pour contrôler le comportement de l'utilisateur :

• WindowInsetsControllerCompat.BEHAVIOR_SHOW_BARS_BY_TOUCH
• WindowInsetsControllerCompat.BEHAVIOR_SHOW_BARS_BY_SWIPE
• WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

BEHAVIOR_SHOW_BARS_BY_TOUCH et BEHAVIOR_SHOW_BARS_BY_SWIPE s'affichent tous les deux sous forme de toucher ou de balayage, de sorte que la barre système ne sera pas automatiquement masquée après son apparition. L'effet est le suivant :

BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE s'affiche sous la forme d'un toucher ou d'un glissement qui fait apparaître la barre système, et elle sera automatiquement masquée dans un court laps de temps. L'effet est le suivant :