Kotlin自定义菜单控件

本文实例为大家分享了Kotlin自定义菜单控件的具体代码供大家参考具体内容如下首先贴一下效果图**思路**菜单控件分两部分一是点击的子按钮RecordButton二是包裹着子按钮的容器RecordMenu。子按钮负责显示文字及背景颜色和点击事件父容器主要控制子控件的位置和动画显示。实现子按钮先贴代码classRecordButton:RelativeLayout{/** 控件显示的文本*/lateinitvartextValue:String/** 控件显示的文本字体大小*/privatevartextSize:Float18f/** 控件显示的文本字体颜色*/privatevartextColor:IntColor.BLACK/** 控件按下时显示的文本字体颜色*/privatevartextColorPress:IntColor.WHITE/** 控件显示的背景颜色*/privatevarbackColorNormal:IntR.drawable.bg_menu_item/** 控件按下时显示的背景颜色*/privatevarbackColorPress:IntR.drawable.bg_menu_item_press/** 控件是否是主按钮*/varisSwitchMain:Booleanfalse/** 按钮按下时的时间*/varpressBtnTime:Long0L/** 按钮抬起时的时间*/varupBtnTime:Long0L/** 事件是否是点击事件*/varisClick:Booleanfalse/** 点击事件是否打开*/varisOpen:Booleanfalse/** 文本控件*/privatelateinitvartextView:TextView/** 监听事件*/varonRecordItemClickListener:OnRecordItemClickListener?nullconstructor(context:Context,textValue:String,textSize:Float,textColor:Int,backColorNormal:Int,textColorPress:Int,backColorPress:Int):this(context){this.textValuetextValuethis.textSizetextSizethis.textColortextColorthis.backColorNormalbackColorNormalthis.isSwitchMainisSwitchMainthis.textColorPresstextColorPressthis.backColorPressbackColorPresssetBackgroundResource(backColorNormal)textViewTextView(context)textView.texttextValue textView.gravityCENTERtextView.setTextColor(textColor)textView.textSizetextSizevarllLayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)ll.addRule(CENTER_IN_PARENT)addView(textView,ll)}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){}override funonTouchEvent(event:MotionEvent?):Boolean{when(event?.action){MotionEvent.ACTION_DOWN-{pressBtnTimeSystem.currentTimeMillis()setBackgroundResource(backColorPress)textView.setTextColor(textColorPress)returntrue}MotionEvent.ACTION_MOVE-{}MotionEvent.ACTION_UP-{upBtnTimeSystem.currentTimeMillis()setBackgroundResource(backColorNormal)textView.setTextColor(textColor)isClick(upBtnTime-pressBtnTime)/10000.5}}if(isClick){onRecordItemClickListener?.onClick(isSwitchMain,textValue,isOpen)isOpen!isOpen}returntrue}}这里主要用一个RelativeLayout包裹着一个TextView这么写是为了防止以后扩展需要添加图片什么的关于这个样式和显示没什么好说的主要的就是点击事件在触摸事件中判断按下和抬起的时间差如果时间差小于0.5秒则断定为点击。包裹容器classRecordMenu:RelativeLayout{/** 子按钮半径*/privatevaritemRadius:Int0/*** 按钮间距*/privatevaritemMargin:Int0/** 动画时间*/privatevarduration:Long0/** 字体大小*/privatevaritemFontSize18f/** 字体正常颜色*/privatevaritemFontColorNColor.BLACK/** 点击时字体颜色*/privatevaritemFontColorPColor.WHITE/** 按钮正常背景*/privatevaritemBackDrawableNR.drawable.bg_menu_item/** 按钮点击背景*/privatevaritemBackDrawablePR.drawable.bg_menu_item_press/** 是否是展开状态*/privatevarisOpen:Booleanfalse/** 动画是否正在运行*/privatevarisRun:Booleanfalse/** 子控件监听*/privatevarrecordListenerRecordListener()/** 上一级的监听事件*/varonRecordItemClickListener:OnRecordItemClickListener?nullconstructor(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){init(context,attrs)}override funonLayout(change:Boolean,l:Int,t:Int,r:Int,b:Int){/** 画出每个子控件的位置*/for(iin0until childCount){varrecordButtongetChildAt(i)asRecordButtonvarleft:Int0varright:IntitemRadius*2vartop:Int(childCount-1)*(itemRadius*2itemMargin)itemRadiusvarbottom:InttopitemRadius*2recordButton.layout(left,top,right,bottom)}}override funonMeasure(widthMeasureSpec:Int,heightMeasureSpec:Int){varwidthitemRadius*2varheight(childCount-1)*(itemRadius*2itemMargin)itemRadius*2itemRadius widthpaddingLeftpaddingRight heightpaddingToppaddingBottom val countchildCountfor(iin0until count){getChildAt(i).measure(width,width)if(icount-1){varrecordButtongetChildAt(i)asRecordButton recordButton.isSwitchMaintrue}}setMeasuredDimension(width,height)}privatefuninit(context:Context,attrs:AttributeSet?){val typedArraycontext.obtainStyledAttributes(attrs,R.styleable.RecordMenu)itemRadiustypedArray.getDimension(R.styleable.RecordMenu_itemRadius,30f).toInt()itemMargintypedArray.getDimension(R.styleable.RecordMenu_itemMargin,10f).toInt()durationtypedArray.getInteger(R.styleable.RecordMenu_animDuration,2000).toLong()itemFontSizetypedArray.getDimension(R.styleable.RecordMenu_itemFontSize,18f)itemFontColorNtypedArray.getColor(R.styleable.RecordMenu_itemFontColorN,Color.BLACK)itemFontColorPtypedArray.getColor(R.styleable.RecordMenu_itemFontColorP,Color.WHITE)itemBackDrawableNtypedArray.getResourceId(R.styleable.RecordMenu_itemBackDrawableN,R.drawable.bg_menu_item)itemBackDrawablePtypedArray.getResourceId(R.styleable.RecordMenu_itemBackDrawableP,R.drawable.bg_menu_item_press)}funaddItemView(textValue:String){varrecordButtonRecordButton(context,textValue,itemFontSize,itemFontColorN,itemBackDrawableN,itemFontColorP,itemBackDrawableP)varl1LayoutParams(itemRadius*2,itemRadius*2)addView(recordButton,l1)recordButton.onRecordItemClickListenerrecordListener}funaddItemView(textValue:String,itemBackDrawableN:Int,itemBackDrawableP:Int){varrecordButtonRecordButton(context,textValue,itemFontSize,itemFontColorN,itemBackDrawableN,itemFontColorP,itemBackDrawableP)varl1LayoutParams(itemRadius*2,itemRadius*2)addView(recordButton,l1)recordButton.onRecordItemClickListenerrecordListener}innerclassRecordListener:OnRecordItemClickListener{override funonClick(isSwitch:Boolean,textValue:String,isOpen1:Boolean){if(!isRun){if(!isOpen){openMenu()}else{closeMenu()}}onRecordItemClickListener?.onClick(isSwitch,textValue,isOpen1)}}/** * 展开控件 */funopenMenu(){isOpentrueisRuntruefor(iin0until childCount){buttonItemOpenAnimation(i,getChildAt(i)asRecordButton)}}/** * 关闭控件 */funcloseMenu(){isRuntrueisOpenfalsefor(iin0until childCount){buttonItemCloseAnimation(i,getChildAt(i)asRecordButton)}}/** * 展开动画 */privatefunbuttonItemOpenAnimation(index:Int,view:RecordButton){if(!view.isSwitchMain){val propertyAnimatorview.animate().alpha(1f).setInterpolator(OvershootInterpolator()).setDuration(duration/3)propertyAnimator.y((itemRadius*2*indexitemMargin*indexitemRadius).toFloat())if(isOpen){view.visibilityView.VISIBLE}propertyAnimator.setListener(object:Animator.AnimatorListener{override funonAnimationRepeat(p0:Animator?){}override funonAnimationCancel(p0:Animator?){}override funonAnimationEnd(p0:Animator?){if(indexchildCount-2){isRunfalse}}override funonAnimationStart(p0:Animator?){}})propertyAnimator.start()}}/** * 关闭动画 */privatefunbuttonItemCloseAnimation(index:Int,view:RecordButton){if(!view.isSwitchMain){val propertyAnimatorview.animate().alpha(0f).setDuration(duration/3)propertyAnimator.y(((itemRadius*2itemMargin)*(childCount-1)itemRadius).toFloat())propertyAnimator.setListener(object:Animator.AnimatorListener{override funonAnimationStart(animation:Animator){}override funonAnimationEnd(animation:Animator){if(indexchildCount-2){isRunfalse}if(!isOpen){view.visibilityView.GONE}}override funonAnimationCancel(animation:Animator){}override funonAnimationRepeat(animation:Animator){}})propertyAnimator.start()}}}这里面主要就是控制子视图的大小位置动画。在onLayout方法中遍历每个子视图通过layout设置视图位置这里设置每个子视图都在容器的底部。然后在OnMeasure中设置整个视图的大小这个根据子视图的大小和个数来计算同时加上内边距。最后就是通过子视图的点击事件来执行动画这里用到的是属性动画用的是系统自带的一个插值器OvershootInterpolator这个插值器实现的效果就是在线性上先快速的到达终点然后超出然后仔慢慢回到终点当然不想要这种效果自己可以自定义一个插值器。更多Android进阶指南 可以扫码 解锁《Android十大板块文档》1.Android车载应用开发系统学习指南附项目实战2.Android Framework学习指南助力成为系统级开发高手3.2024最新Android中高级面试题汇总解析告别零offer4.企业级Android音视频开发学习路线项目实战附源码5.Android Jetpack从入门到精通构建高质量UI界面6.Flutter技术解析与实战跨平台首要之选7.Kotlin从入门到实战全方面提升架构基础8.高级Android插件化与组件化含实战教程和源码9.Android 性能优化实战360°全方面性能调优10.Android零基础入门到精通高手进阶之路敲代码不易关注一下吧。ღ( ´ᴗ )