Android仿iOS底部弹出菜单ActionSheet

最新推荐文章于 2024-09-22 23:08:03 发布
最新推荐文章于 2024-09-22 23:08:03 发布
阅读量8.4k 收藏 6
点赞数 5
分类专栏： UI 文章标签： 仿Ios 底部菜单 菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccw0054/article/details/82223187
版权

由于产品是个果婊，有时候为了统一app风格，需要被迫使用ios风格的系统控件，比较常见的就是ios 的底部弹出菜单，在网上找了很久都没有找到还原度很高的，就自己动手写了，为了以防万一以后再有这类需求，这里把大致实现思路和代码献上，有需要的自己copy就行了。

成品图：

这里写图片描述

UI层级

这里写图片描述
具体都写在图上了，考虑到性能因素，viewGroup继承自FrameLayout,contentGroup、menuList继承自LinearLayout、CancelButton继承自TextView。

核心思想

  • 采用伪Build模式编写，之所以说伪Build是因为没有严格按照模式框架来编写，但是对外调用和Build相似。
  • 运用了Toast模式，直接将布局添加到Window下DecorView中，可以在任意Activity中调用，不需要改动原本View或者进行View绑定。

源代码

class IosBottomListWindow(private val activity: Activity) {
    private val shadowMax = 0xa0
    private var majorTitle: TextView? = null
    private var title: TextView? = null
    private val viewGroup: FrameLayout
    private val contentGroup: LinearLayout
    private val menuList: LinearLayout
    private val commonMargin = dpToPx(10f, activity).toInt()
    private val itemMargin = dpToPx(16f, activity).toInt()
    private var contentLayoutHeight = 0

    var isShow = false

    init {
        viewGroup = initViewGroup()
        contentGroup = initContentGroup()
        menuList = initMenuList()
        viewGroup.addView(contentGroup)
        contentGroup.addView(menuList)
    }

    fun show() {
        if (!isShow) {
            (activity.window.decorView as ViewGroup).addView(viewGroup)
            contentGroup.apply {
                post {
                    contentLayoutHeight = measuredHeight
                    translationY = contentLayoutHeight.toFloat()
                    visibility = View.VISIBLE
                    startAnimator(true)
                }
            }
            isShow = true
        }
    }

    fun dismiss() {
        if (isShow) {
            startAnimator(false, object : SimpleAnimListener() {
                override fun onAnimationEnd(animation: Animator?) {
                    (activity.window.decorView as ViewGroup).removeView(viewGroup)
                }
            })
            isShow = false
        }
    }

    /**
     * 设置主标题
     */
    fun setMajorTitle(text: String): IosBottomListWindow {
        majorTitle = TextView(activity).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT).apply {
                val margin = dpToPx(20f, activity).toInt()
                if (title == null) {
                    setMargins(0, margin, 0, margin)
                } else {
                    setMargins(0, margin, 0, 0)
                }
            }
            setTextSize(TypedValue.COMPLEX_UNIT_SP, 14f)
            setTextColor(Color.parseColor("#8f8f8f"))
            typeface = Typeface.DEFAULT_BOLD
            setText(text)
        }
        menuList.addView(majorTitle, 0)
        return this
    }

    /**
     * 设置副标题
     */
    fun setTitle(text: String): IosBottomListWindow {
        title = TextView(activity).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT).apply {
                val margin = dpToPx(20f, activity).toInt()
                if (majorTitle == null) {
                    setMargins(0, margin, 0, margin)
                } else {
                    setMargins(0, 0, 0, margin)
                }
            }
            setTextSize(TypedValue.COMPLEX_UNIT_SP, 14f)
            setTextColor(Color.parseColor("#8f8f8f"))
            setText(text)
        }
        if (majorTitle == null) {
            menuList.addView(title, 0)
        } else {
            menuList.addView(title, 1)
        }
        return this
    }

    /**
     * 设置子项
     */
    fun setItem(text: String, textColor: Int = 0, itemClickListener: () -> Unit): IosBottomListWindow {
        val textView = TextView(activity)
        textView.apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT).apply {
                setPadding(0, itemMargin, 0, itemMargin)
            }
            gravity = Gravity.CENTER
            setBackgroundResource(R.drawable.command_bg_click_xml)
            setTextSize(TypedValue.COMPLEX_UNIT_SP, 20f)
            if (textColor == 0) {
                setTextColor(Color.parseColor("#FF3B30"))
            } else {
                try {
                    setTextColor(textColor)
                } catch (e: Throwable) {
                    e.printStackTrace()
                }
            }
            setText(text)
            setOnClickListener {
                itemClickListener.invoke()
                dismiss()
            }
        }
        val lineView = View(activity).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 1)
            setBackgroundColor(Color.parseColor("#dcdbdf"))
        }
        menuList.addView(lineView)
        menuList.addView(textView)
        return this
    }

    /**
     * 设置按钮
     */
    fun setCancelButton(text: String, textColor: Int = 0): IosBottomListWindow {
        val cancelView = TextView(activity).apply {
            layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT).apply {
                setMargins(commonMargin, 0, commonMargin, commonMargin)
            }
            setPadding(0, itemMargin, 0, itemMargin)
            background = resources.getDrawable(R.drawable.bottom_btn_click_xml, null)
            if (textColor == 0) {
                setTextColor(Color.parseColor("#FF3B30"))
            } else {
                try {
                    setTextColor(textColor)
                } catch (e: Throwable) {
                    e.printStackTrace()
                }
            }
            gravity = Gravity.CENTER
            setTextSize(TypedValue.COMPLEX_UNIT_SP, 20f)
            setText(text)
            typeface = Typeface.DEFAULT_BOLD
            setOnClickListener {
                dismiss()
            }
        }
        contentGroup.addView(cancelView)
        return this
    }

    /**
     * 初始化容器
     * 背景阴影容器
     */
    private fun initViewGroup() = FrameLayout(activity).apply {
        layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT)
        setOnClickListener {
            dismiss()
        }
    }

    /**
     * 初始化内容容器
     * 滑动动画载体
     */
    private fun initContentGroup() = LinearLayout(activity).apply {
        layoutParams = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.WRAP_CONTENT).apply {
            gravity = Gravity.BOTTOM
            bottomMargin = getBottomStatusHeight(activity)
            visibility = View.INVISIBLE
        }
        orientation = LinearLayout.VERTICAL
    }

    /**
     * 初始化菜单列表
     */
    private fun initMenuList() = LinearLayout(activity).apply {
        layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT).apply {
            setMargins(commonMargin, 0, commonMargin, commonMargin)
        }
        gravity = Gravity.CENTER_HORIZONTAL
        orientation = LinearLayout.VERTICAL
        background = activity.resources.getDrawable(R.drawable.shape_bottom_list_menu, null)
    }

    private fun startAnimator(enterType: Boolean, listener: Animator.AnimatorListener? = null) {
        viewGroup.post {
            ValueAnimator().apply {
                if (enterType) {
                    setFloatValues(contentLayoutHeight.toFloat(), 0f)
                } else {
                    setFloatValues(0f, contentLayoutHeight.toFloat())
                }
                duration = 300
                interpolator = DecelerateInterpolator()
                addUpdateListener {
                    val value = it.animatedValue as Float
                    contentGroup.translationY = value
                    setShadow()
                }
                listener?.let {
                    addListener(it)
                }
                start()
            }
        }
    }

    private fun setShadow() {
        val ratio = contentGroup.translationY / contentLayoutHeight
        val shadow = (shadowMax * (1 - ratio)).toInt()
        if (shadow >= 16) {
            viewGroup.setBackgroundColor(Color.parseColor("#${shadow.toString(16)}000000"))
        }
    }

}

用到资源文件

shape_bottom_list_menu.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <solid android:color="#f1f1f1"/>
</shape>

bottom_btn_click.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/ColorRipe">
    <item android:drawable="@drawable/shape_bottom_list_button"/>
</ripple>

shape_bottom_list_button.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <solid android:color="#ffffff"/>
</shape>

调用

            IosBottomListWindow(this)
                    .setTitle("上传头像")
                    .setMajorTitle("上传头像")
                    .setItem("从相册", resources.getColor(R.color.color_c10)) {
                        getPhotoFromAlbum()
                    }
                    .setItem("从相机") {
                        dispatchTakePictureIntent()
                    }
                    .setCancelButton("取消")
                    .show()

最后

如果该文章对你有帮助，希望能顺手点个赞或者收藏。Σ(*ﾟдﾟﾉ)ﾉ

落叶Ex
关注
专栏目录
一个封装好的Android仿Ios ActionSheet控件
01-13
一个Android仿Ios ActionSheet的控件，简单好用，欢迎下载 原博客地址 https://blog.csdn.net/Sure_Min/article/details/79054352
Android仿IOS底部弹出选择菜单ActionSheet
weixin_34220963的博客
09-18 767
使用Dialog的实现方式，解决原ActionSheet使用Fragment实现而出现的部分手机取消按钮被遮盖的问题 java部分代码： import android.app.Dialog; import android.content.Context; import android.view.Display; import android.view.Gravity; import andro...
【Android】BottomSheet基本用法总结（BottomSheetDialog,BottomSheetDialogFragment）
最新发布
Patrick_yuxuan的博客
09-22 1570
是一种位于屏幕底部的面板，用于显示附加内容或选项。提供了从屏幕底部向上滑动显示内容的交互方式。这种设计模式在 Material Design 中被广泛推荐，因为它可以提供一种优雅且不干扰主屏幕内容的方式来展示额外信息或操作。具体实现主要包含：BottomSheetBeahvior 、BottomSheetDialog、BottomSheetDialogFragment。
仿IOS 菜单 ActionSheet Menu For Android
JFrosty的专栏
04-23 1594
ActionSheet Menu For AndroidAuthor:JFrosty Date:2015-4-23 SourceCode:https://github.com/FrostySmile/JFActionSheetMenu本文详细介绍类似IOS平台下ActionSheet菜单控件的Android实现全过程，并增加自定义属性。通过本文，你可以学习到以下内容： android自定义vie
仿IOS控件之ActionSheet样式
06-23
两种方式实现ActionSheet底部弹出菜单效果. blog地址： http://blog.csdn.net/qiaoidea/article/details/46417747
Android模仿IOS中的UIActionSheet
zz_mm的专栏
01-07 1968
Android中模仿IOS中的UIActionSheet，自带IOS6和IOS7两种风格，可以自定义风格，背景图片、按钮图片、文字颜色、间距等。 Github地址：https://github.com/baoyongzhang/ActionSheetForAndroid / 创建并显示 ActionSheet.createBuilder(t
android仿iOS的ActionSheet
08-01
android里没有ios里的acitonsheet，项目需要，就自己做了一个，感觉还行就分享出来了 使用很简单： PSActionSheet.showSheet(this, "确定要删除会话记录吗?", "删除会话记录", new OnActionSheetClickListener() { @Override public void onActionSheetClick() { //操作 } }, null, null);
仿ios底部弹出式菜单
08-10
5. **React-H5-ActionSheet**：这个项目很可能是用React构建的一个H5 Action Sheet组件，它模仿了iOS的底部弹出菜单行为。项目名称中的“master”可能表示这是项目的主分支或主线版本。 6. **JavaScript开发**：在...
ActionSheet:Android中的ActionSheet(仿IOS ui界面)
05-29
顶部下拉layout菜单 和 底部弹出式ActionSheet菜单 后来,在此基础上，整合了的AcitonSheet，添加了带title通用性更强但是耦合性稍差的新样式菜单 有两种样式，分别为IOS6和IOS7风格 如何使用 项目本身...
Android 实现IOS选择拍照相册底部弹出的实例
08-29
ActionSheet 库提供了一个底部弹出菜单的实现，可以供用户选择拍照或选取本地相册图片。首先，需要在 build.gradle 文件中添加 ActionSheet 库的依赖关系： dependencies { compile '...
安卓Android源码——高仿iOS ActionSheet控件.zip
10-10
安卓Android源码——高仿iOS ActionSheet控件.zip
Android代码-仿iOS ActionSheet组件
08-06
ActionSheet This is like iOS UIActionSheet component, has iOS6 and iOS7 style, support custom style, background, button image, text color and spacing etc.    Usage Add dependency dependencies { compile 'com.baoyz.actionsheet:library:1.1.7' } Create ActionSheet and show ActionSheet.createBuilder(this, getSupportFragmentManager()) .setCancelButtonTitle("Cancel") .setOtherButtonTitles("Item1", "Item2", "Item3", "Item4") .setCancel
android 仿iPhone自定义底部弹出菜单
01-05
仿iphone界面的从底部弹出来的自定义菜单，可以按照自己需要增加菜单项，美化菜单界面
仿ios底部菜单栏
06-22
仿ios底部菜单栏，配置的styles，drawale比较多，整个一套，复制黏贴
android仿ios底部弹出栏
12-26
仿ios的底部弹出栏，可供下载并参考，用于开发一些底部弹出框
android仿苹果底部弹窗,【android技术demo】仿iphone的一个从底部弹出的操作菜单
weixin_39562998的博客
05-26 491
很多交互设计师都是拿iphone手机的，会给android提出很多iphone的交互风格，比如：一个从底部弹出的操作菜单，还要和黑色半透明蒙层的渐变一起出来。看过很多应用，比如招行的掌上生活，甚至是连手机qq做的都不是很好。这里贡献一个demo，可以很好的实现该功能。效果如下：实现原理：在弹出自定义的PopupWindow时，增加一个半透明蒙层view到窗口，并置于PopupWindow下方。代码...
Android ActionSheet 使用教程
gitblog_01184的博客
08-09 424
Android ActionSheet 使用教程 android-ActionSheetiOS UIActionSheet for Android项目地址:https://gitcode.com/gh_mirrors/an/android-ActionSheet 项目介绍 Android ActionSheet 是一个模仿 iOS UIActionSheet 的 Android 库，提供了一个底...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值