Android自定义HorizontalScrollView实现侧滑菜单效果

已于 2022-10-27 17:02:22 修改
阅读量807 收藏 6
点赞数
分类专栏： 自定义view学习 文章标签： android java android studio kotlin
于 2022-10-27 15:30:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a734474820/article/details/127553501
版权

最终效果

自定义HorizontalScrollView实现侧滑菜单效果

具体实现

布局文件
  • 自定义属性
    <!--自定义内容宽度-->
   <declare-styleable name="SlideMenuLayout">
       <attr name="menuRightWidth" format="dimension" />
   </declare-styleable>
  • 布局文件
### 主布局
<?xml version="1.0" encoding="utf-8"?>
<com.crystal.view.SlideMenuLayout 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:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@drawable/home_menu_bg"
   app:menuRightWidth="60dp"
   tools:context=".MainActivity">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal">

       <!--左侧菜单页-->
       <include layout="@layout/layout_home_menu" />
   
       <!--右侧内容页-->
       <include layout="@layout/layout_home_content" />
   </LinearLayout>

</com.crystal.view.SlideMenuLayout>

### 左侧菜单页
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="72dp"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/enter_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="23dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/user_head_iv"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:src="@drawable/morentouxiang" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="22dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/user_name_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:drawablePadding="10dp"
                    android:drawableRight="@drawable/user_write_paint"
                    android:text="请登录"
                    android:textColor="#c6b178"
                    android:textSize="18dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="42dp"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/user_attention_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:drawablePadding="10dp"
                        android:text="关注 0"
                        android:textColor="#c6b178"
                        android:textSize="12dp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="40dp"
                        android:drawablePadding="10dp"
                        android:text="粉丝 0"
                        android:textColor="#c6b178"
                        android:textSize="12dp" />

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <ListView
            android:id="@+id/menu_item_lv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@null"
            android:dividerHeight="0dp"
            android:layout_marginTop="60dp"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:text="退出"
        android:textColor="#FFFFFF"
        android:layout_height="wrap_content" />
</RelativeLayout>

### 右侧内容页
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="60dp"
        android:layout_height="40dp"
        android:text="按钮"
        android:textSize="12sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="主页内容" />

</RelativeLayout>
自定义SlideMenuLayout
package com.crystal.view

import android.content.Context
import android.graphics.Color
import android.util.AttributeSet
import android.util.Log
import android.util.TypedValue
import android.view.GestureDetector
import android.view.GestureDetector.SimpleOnGestureListener
import android.view.MotionEvent
import android.view.View
import android.widget.*
import kotlin.math.abs

/**
 * 自定义侧滑菜单实现
 * on 2022/10/27
 */
class SlideMenuLayout : HorizontalScrollView {
    /**
     * 当菜单页显示时，右侧内容页显示宽度
     */
    private var menuRightWidth = 0

    /**
     * 左侧菜单页View
     */
    private lateinit var menuView: View

    /**
     * 右侧内容页View
     */
    private lateinit var contentView: View

    /**
     * 右侧内容页阴影View
     */
    private lateinit var shaderView: View

    /**
     * 用于处理飞速滑动
     */
    private var gestureDetector: GestureDetector

    /**
     * 菜单当前是否为打开状态
     */
    private var isMenuOpen: Boolean = false

    /**
     * 内容页按钮
     */
    private var btn: Button? = null

    /**
     * 是否进行事件拦截
     */
    private var isIntercept = false

    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context, attrs, defStyleAttr
    ) {
        val array = context.obtainStyledAttributes(attrs, R.styleable.SlideMenuLayout)
        menuRightWidth = array.getDimension(
            R.styleable.SlideMenuLayout_menuRightWidth,
            TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 62f, resources.displayMetrics)
        ).toInt()
        array.recycle()
        gestureDetector = GestureDetector(getContext(), GestureDetectorListener())
    }

    //用于处理飞速滑动
    private inner class GestureDetectorListener : SimpleOnGestureListener() {
        override fun onFling(
            e1: MotionEvent, e2: MotionEvent, velocityX: Float, velocityY: Float
        ): Boolean {
            // velocityX 向右快速滑动是正值，向左快速滑动是负值
            //判断飞速滑动方向不是水平时，不处理
            if (abs(velocityY) > abs(velocityX)) {
                return false
            }
            if (isMenuOpen) {
                if (velocityX < 0) {
                    closeMenu()
                    return true
                }
            } else {
                if (velocityX > 0) {
                    openMenu()
                    return true
                }
            }
            return super.onFling(e1, e2, velocityX, velocityY)

        }
    }

    /**
     * 此方法在布局加载完毕时调用
     */
    override fun onFinishInflate() {
        super.onFinishInflate()
        val linearLayout: LinearLayout = getChildAt(0) as LinearLayout
        val childCount = linearLayout.childCount
        //这里childCount应该只包含 左侧菜单页以及右侧内容页，childCount 必须为2
        if (childCount != 2) {
            throw IllegalArgumentException("LinearLayout child size must be 2!")
        }
        //设置左侧菜单页宽度为屏幕宽度 - 主页收缩时宽度
        menuView = linearLayout.getChildAt(0)
        val menuLayoutParams = menuView.layoutParams
        menuLayoutParams.width = getScreenWidth() - menuRightWidth
        menuView.layoutParams = menuLayoutParams

        //设置右侧内容页宽度为屏幕宽度
        contentView = linearLayout.getChildAt(1)
        /**
         * 实现在滑动过程中，为右侧内容页添加阴影效果
         * 1.先把contentView从布局中挖出来
         * 2.新建RelativeLayout 包裹 此contentView以及一层阴影View
         * 3.onScrollChanged中根据scale的值动态修改shader view的alpha值
         */
        linearLayout.removeView(contentView)
        val contentRelativeLayout = RelativeLayout(context)
        contentRelativeLayout.addView(contentView)
        shaderView = View(context)
        shaderView.setBackgroundColor(Color.parseColor("#55000000"))
        contentRelativeLayout.addView(shaderView)
        val contentLayoutParams = contentView.layoutParams
        contentLayoutParams.width = getScreenWidth()
        contentRelativeLayout.layoutParams = contentLayoutParams
        linearLayout.addView(contentRelativeLayout)
        shaderView.alpha = 0.0f
        btn = contentView.findViewById(R.id.btn)
        btn?.setOnClickListener {
            Toast.makeText(context, "This is Button", Toast.LENGTH_SHORT).show()
        }
    }


    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        super.onLayout(changed, l, t, r, b)
        //默认情况下，应该全部展示内容页，关闭左侧菜单页
        scrollTo(menuView.measuredWidth, 0)
    }


    /**
     * 获取当前屏幕的宽度
     */
    private fun getScreenWidth(): Int {
        return resources.displayMetrics.widthPixels
    }


    /**
     * 重写该方法，用于处理缩放和透明度效果
     */
    override fun onScrollChanged(l: Int, t: Int, oldl: Int, oldt: Int) {
        super.onScrollChanged(l, t, oldl, oldt)
        //滚动的时候，不停的回调  l 从屏幕宽度变化到 0
        val scale = 1 - l * 1f / menuView.measuredWidth //scale 从 0 到1
        //处理菜单页缩放和透明度
        menuView.pivotX = menuView.measuredWidth * 1f
        menuView.pivotY = menuView.measuredHeight / 2f
        menuView.scaleX = 0.5f + scale * 0.5f
        menuView.scaleY = 0.5f + scale * 0.5f

        menuView.alpha = 0.25f + 0.75f * scale

        //处理内容页缩放 缩放到0.7f
        contentView.pivotX = 0f
        contentView.pivotY = contentView.measuredHeight / 2f
        contentView.scaleX = 0.7f + (1 - scale) * 0.3f
        contentView.scaleY = 0.7f + (1 - scale) * 0.3f

        //滑动时，根据scale动态调整shader view的alpha值
        shaderView.alpha = scale
    }

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        if (isMenuOpen) {
            //如果点击事件落在内容页，则进行拦截并关闭菜单页
            if (ev.x > menuView.measuredWidth) {
                //进行事件拦截，不触发button点击事件
                isIntercept = true
                return true
            } else {
                isIntercept = false
            }

        }
        return super.onInterceptTouchEvent(ev)
    }

    override fun onTouchEvent(ev: MotionEvent): Boolean {
        //当执行快速滑动时，后续不再执行
        if (gestureDetector.onTouchEvent(ev)) {
            return gestureDetector.onTouchEvent(ev)
        }
        when (ev.action) {
            MotionEvent.ACTION_UP -> {
                if (isIntercept) {
                    closeMenu()
                    return true
                }
                //当手指抬起时，判断左侧菜单栏应该展示开始关闭
                //判断逻辑：当滚动x > 屏幕一半是，菜单栏隐藏，否则展开
                if (mScrollX > getScreenWidth() / 2) {
                    closeMenu()
                } else {
                    openMenu()
                }
                return false
            }
        }
        return super.onTouchEvent(ev)
    }

    /**
     * 打开菜单
     */
    private fun openMenu() {
        smoothScrollTo(0, 0)
        isMenuOpen = true
    }

    /**
     * 关闭菜单
     */
    private fun closeMenu() {
        smoothScrollTo(menuView.measuredWidth, 0)
        isMenuOpen = false
    }


}

总结

这个案例涉及到事件分发、飞速滑动、view的缩放以及透明度处理，对自定义View的学习还是很有帮助的。

惜许
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 自定义HorizontalScrollView实现二级菜单
niniwo_niwo的博客
12-25 505
HorizontalScrollView
Android自定义HorizontalScrollView实现qq侧滑菜单
08-30
oid:layout_marginLeft="20dp" android:src="@drawable/img_3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_...
Android学习笔记 ：自定义HorizontalScrollView实现侧滑菜单
true100的专栏
12-29 1828
最近项目比较忙，没有多少时间看视屏学习，昨天晚上抽点时间看了点视屏，学习了如何自定义实现仿QQ侧滑菜单效果。在网上随便截了两张图，把学习的东西做个笔记。自定义HorizontalScrollView: public class SideSlipMenu extends HorizontalScrollView { // SideSlipMenu中的外层LinearLayout private
Android侧滑菜单的实现
2401_85767533的博客
06-17 724
如果你的activity有actionbar的话，还是建议用ActionBarDrawerToggle来监听，ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来，当展开与隐藏的时候图标有一定的平移效果，点击图标的时候还能展开或者隐藏菜单。//设置右侧菜单阴影的图片资源。//设置菜单滑动模式，菜单是出现在左侧还是右侧，还是左右两侧都有。
android:自定义HorizontalScrollView实现qq侧滑菜单
苏苏爱自由
02-18 7791
今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识，同时也佩服鸿洋_大神思路的清晰。 看了教程课下也自己实现了一下。代码几乎完全相同  别喷我啊。。没办法 o(︶︿︶)o 唉 像素不好 没办法 找不到好的制作gif的软件。 我们暂且称侧滑左边界面的为menu,右边为content 首先是menu的布局 <RelativeLayout xmlns:andro
Android自定义HorizontalScrollView实现仿微信侧滑删除（多触点拉出侧滑菜单）
weixin_52484998的博客
08-27 382
在现有的开源库中，多数侧滑删除组件仅支持单一触点拉出菜单选项。然而，iOS版的微信消息界面提供了一种多触点侧滑菜单的实现。为了模仿这一交互模式，采用了HorizontalScrollView来满足多触点拉出侧滑菜单的需求。下文将详细介绍该组件的实现过程和效果。
自定义HorizontalScrollView实现侧滑菜单
ly2072925694的专栏
07-17 873
下图是工程目录结构： MainActivity代码如下： package com.example.tommy_qq_50; import com.example.tommy_qq_50.view.SlidingMenu; import android.app.Activity; import android.os.Bundle; import android.view.View
android:自定义HorizontalScrollView实现qq侧滑菜单 标签： HorizontalScrollView自定义viewqq侧滑菜单 2016
飞翔的熊blabla
02-19 634
http://blog.csdn.net/su20145104009/article/details/50688659 今天看了鸿洋_大神在慕课网讲的qq5.0侧滑菜单。学了不少的知识，同时也佩服鸿洋_大神思路的清晰。 看了教程课下也自己实现了一下。代码几乎完全相同  别喷我啊。。没办法 o(︶︿︶)o 唉  像素不好 没办法 找不到好的制作gif的软件。
利用HorizontalScrollView实现侧滑菜单
笑脸猫的博客
03-15 886
本文基本参考自http://blog.csdn.net/lmj623565791/article/details/39257409 添加里一些自己的思考和注释 先看最后的实现效果 左右滑动可以展开关闭菜单，菜单展开超过一半后抬起手指也会自动完成剩余的滑动，反之亦然。 我们用一个继承自HorizontalScrollView的自定义ViewGroup去实现，好处就是Ho
Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭
热门推荐
Hongyang
09-15 14万+
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39257409，本文出自【张鸿洋的博客】上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单 ，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展
Android 高仿 QQ5.0 侧滑菜单效果 HorizontalScrollView
06-10 261
上一篇博客带大家实现了：Android 自定义控件打造史上最简单的侧滑菜单，有兄弟看了以后说，你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯，的确，上一篇也承诺过，稍微修改上一篇的代码，实现QQ5.0侧滑菜单~~好了，下面就开始为大家展示写一个类QQ的侧滑有多easy ~! 1、原理...
Android自定义控件简单实现侧滑菜单效果
09-02
本篇文章将详细介绍如何使用Android自定义控件实现一个简单的侧滑菜单。 首先，我们要理解侧滑菜单的基本原理。在Android中，我们可以利用HorizontalScrollView这个内置组件来实现这一功能。HorizontalScrollView是...
Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单
09-02
传统的侧滑菜单实现通常涉及自定义ViewGroup，如DrawerLayout，通过监听触摸事件并动态调整布局的margin来实现滑动效果。然而，这种方法往往较为复杂，需要处理滑动冲突和其他交互问题。 本文介绍了一种使用Android...
Android 在布局中tools使用
追梦的鱼儿
08-06 173
在布局中因为各种原因，有时想让控件不显示，或者显示占位图的话，可以使用。
Android渠道包配置不同AndroidManifest.xml
wolf0706的专栏
08-02 276
开发中不同的渠道包需要使用不同的AndroidManifest.xml，比如Flavor1 需要添加android:sharedUserId="android.uid.system"配置，可以新建一个AndroidManifest_system.xml。Flavor1 渠道打包会融合AndroidManifest.xml和AndroidManifest_system.xml两个配置文件。
Android进阶之路 - 字体加粗，定制化字体粗度
Android、前端、小程序、后端
08-06 591
在客户端中不论是PC端，还是移动端主要价值之一就体现在用户交互方面，也就是用户体验了，接下来讲的是很常见的字体加粗问题
Android 拨号键拨号，中心方向键拨号
最新发布
qq_46687516的博客
08-06 46
/vendor/mediatek/proprietary/packages/apps/Dialer/java/com/android/dialer/dialpadview/DialpadFragment.java @Override public boolean onKey(View view, int keyCode, KeyEvent event) { if (view.getId() == R.id.digits) { //*/ add ok key to call
自定义ViewGroup实现Android SlidingMenu详解
"这篇教程主要讨论如何在Android中使用自定义ViewGroup来创建各种风格的SlidingMenu，作者提到之前通过HorizontalScrollView实现侧滑菜单，但为了更深入理解和控制滑动效果，决定直接自定义ViewGroup。教程的目标是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值