Android 侧边栏实现方式

Android 常见几种侧边栏的实现

效果预览

实现方式： XML 布局：

1、值得注意的是：使用了 DrawerLayout 作为跟布局，当然根据需求，也可以不适应它作为跟布局，如果不是跟布局的话，根据内地显示的高度根据场景不一定是全屏。主布局和侧边栏都写在DrawerLayout 里面，记得把主布局写在最上面，侧边栏布局写在最下面，层级关系都晓得，如果反着写，你会发现很有意思的现象，点击按钮出现侧边栏后，侧边栏内容无法响应点击事件（自己可以尝试）,而且当点击触发显示了侧边栏后，不管触摸任何位置，都会导致侧边栏自动关闭（如果不设置锁定侧边栏开启或关闭的状态的的话）。

2、上面我的布局样式是主布局的跟布局用了CardView 实现当侧边栏显示时，主布局高度也缩小，但是整个屏幕的背景是侧边栏的背景宽度全屏的样式，效果在最下面，先实现默认的侧边栏

第一个图中默认的：

布局如上面的写法即可，页面中的写法：

kotlin 复制代码

val toggle = object : ActionBarDrawerToggle(this,binding.drawerLayout,android.R.string.yes,android.R.string.cancel){
    override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
        super.onDrawerSlide(drawerView, slideOffset)

    }

    override fun onDrawerClosed(drawerView: View) {
        super.onDrawerClosed(drawerView)
        
    }

    override fun onDrawerOpened(drawerView: View) {
        super.onDrawerOpened(drawerView)
    }

}
binding.drawerLayout.setScrimColor(Color.TRANSPARENT)
binding.drawerLayout.addDrawerListener(toggle)

上面写法一个drawerLayout的View，其它的没有我单独写的内容，可以直接复制使用，然后在主布局里面想触发侧边栏显示的话，直接在点击事件中写：

scss 复制代码

binding.drawerLayout.openDrawer(Gravity.LEFT)

为什么会这么写呢，答案在XML布局中，往下看：

看上图，主布局中其实正常写即可，侧边栏的跟布局中有一个位置属性，

ini 复制代码

android:layout_gravity="left"

这个内容我写的是left ,表示我的侧边栏是在屏幕左边显示，如果你的在右边，那你就写right 、end 都可以它有四个：left、start、right、end 都能明白，不多介绍

所以，上面开启侧边栏我就是打开左侧的。

因为我的需求是：

所以，需要多写点东西，那么只需要在代码中上面的写法中加点东西即可：

kotlin 复制代码

val toggle = object : ActionBarDrawerToggle(this,binding.drawerLayout,android.R.string.yes,android.R.string.cancel){
    override fun onDrawerSlide(drawerView: View, slideOffset: Float) {
        super.onDrawerSlide(drawerView, slideOffset)

        val scale = 1 - slideOffset
        val leftScale = 1-0.2f * scale
        val rightScale = 0.8f + 0.2f * scale
        binding.clDrawLayout.scaleY = leftScale
        binding.cardViewLayout.scaleY = rightScale
        binding.cardViewLayout.radius = 40f
        binding.cardViewLayout.translationX = binding.clDrawLayout.measuredWidth * slideOffset
    }

    override fun onDrawerClosed(drawerView: View) {
        super.onDrawerClosed(drawerView)
        binding.cardViewLayout.radius = 0f
    }

    override fun onDrawerOpened(drawerView: View) {
        super.onDrawerOpened(drawerView)
    }

}
binding.drawerLayout.setScrimColor(Color.TRANSPARENT)
binding.drawerLayout.addDrawerListener(toggle)
binding.imgClose.setOnClickListener {
    binding.drawerLayout.closeDrawer(Gravity.LEFT)
}

binding.clDrawLayout 是侧边栏跟布局的id binding.cardViewLayout 是主布局的跟布局id 当显示侧边栏在显示的过程中，这两块的内容做一个变化即可。同时对主布局跟容器加一个圆角。

实现方式就到这里了，记录一下