如何使用Kotlin自定義菜單控件

這篇文章將為大家詳細講解有關如何使用Kotlin自定義菜單控件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

思路：菜單控件分兩部分，一是點擊的子按鈕（RecordButton），二是包裹著子按鈕的容器（RecordMenu）。

子按鈕負責顯示文字及背景顏色和點擊事件，父容器主要控制子控件的位置和動畫顯示。

實現：

子按鈕，先貼代碼

class RecordButton : RelativeLayout {
 /** 控件顯示的文本*/
 lateinit var textValue: String
 /** 控件顯示的文本字體大小*/
 private var textSize: Float = 18f
 /** 控件顯示的文本字體顏色*/
 private var textColor: Int = Color.BLACK
 /** 控件按下時顯示的文本字體顏色*/
 private var textColorPress: Int = Color.WHITE
 /** 控件顯示的背景顏色*/
 private var backColorNormal: Int = R.drawable.bg_menu_item
 /** 控件按下時顯示的背景顏色*/
 private var backColorPress: Int = R.drawable.bg_menu_item_press
 /** 控件是否是主按鈕*/
 var isSwitchMain: Boolean = false
 /** 按鈕按下時的時間*/
 var pressBtnTime: Long = 0L
 /** 按鈕抬起時的時間*/
 var upBtnTime: Long = 0L
 /** 事件是否是點擊事件*/
 var isClick: Boolean = false
 /** 點擊事件是否打開*/
 var isOpen: Boolean = false
 /** 文本控件*/
 private lateinit var textView: TextView
 /** 監聽事件*/
 var onRecordItemClickListener: OnRecordItemClickListener? = null
 
 constructor(context: Context,
    textValue: String,
    textSize: Float,
    textColor: Int,
    backColorNormal: Int,
    textColorPress: Int,
    backColorPress: Int) : this(context) {
  this.textValue = textValue
  this.textSize = textSize
  this.textColor = textColor
  this.backColorNormal = backColorNormal
  this.isSwitchMain = isSwitchMain
  this.textColorPress = textColorPress
  this.backColorPress = backColorPress
  setBackgroundResource(backColorNormal)
 
  textView = TextView(context)
  textView.text = textValue
  textView.gravity = CENTER
  textView.setTextColor(textColor)
  textView.textSize = textSize
  var ll = LayoutParams(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 fun onTouchEvent(event: MotionEvent?): Boolean {
  when (event?.action) {
   MotionEvent.ACTION_DOWN -> {
    pressBtnTime = System.currentTimeMillis()
    setBackgroundResource(backColorPress)
    textView.setTextColor(textColorPress)
    return true
   }
   MotionEvent.ACTION_MOVE -> {
   }
   MotionEvent.ACTION_UP -> {
    upBtnTime = System.currentTimeMillis()
    setBackgroundResource(backColorNormal)
    textView.setTextColor(textColor)
    isClick = (upBtnTime - pressBtnTime) / 1000 < 0.5
   }
  }
  if (isClick) {
   onRecordItemClickListener?.onClick(isSwitchMain, textValue,isOpen)
   isOpen = !isOpen
  }
  return true
 }
}

這里主要用一個RelativeLayout包裹著一個TextView，這么寫是為了防止以后擴展，需要添加圖片什么的，關于這個樣式和顯示沒什么好說的，主要的就是點擊事件，在觸摸事件中判斷按下和抬起的時間差，如果時間差小于0.5秒則斷定為點擊。

包裹容器

class RecordMenu : RelativeLayout{
 /** 子按鈕半徑*/
 private var itemRadius: Int = 0
 /*** 按鈕間距*/
 private var itemMargin: Int = 0
 /** 動畫時間*/
 private var duration: Long = 0
 /** 字體大小*/
 private var itemFontSize = 18f
 /** 字體正常顏色*/
 private var itemFontColorN = Color.BLACK
 /** 點擊時字體顏色*/
 private var itemFontColorP = Color.WHITE
 /** 按鈕正常背景*/
 private var itemBackDrawableN = R.drawable.bg_menu_item
 /** 按鈕點擊背景*/
 private var itemBackDrawableP = R.drawable.bg_menu_item_press
 /** 是否是展開狀態*/
 private var isOpen: Boolean = false
 /** 動畫是否正在運行*/
 private var isRun: Boolean = false
 /** 子控件監聽*/
 private var recordListener = RecordListener()
 /** 上一級的監聽事件*/
 var onRecordItemClickListener: OnRecordItemClickListener? = null
 
 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) {
  init(context, attrs)
 }
 
 override fun onLayout(change: Boolean, l: Int, t: Int, r: Int, b: Int) {
  /** 畫出每個子控件的位置*/
  for (i in 0 until childCount) {
   var recordButton = getChildAt(i) as RecordButton
   var left: Int = 0
   var right: Int = itemRadius * 2
   var top: Int = (childCount - 1) * (itemRadius * 2 + itemMargin) + itemRadius
   var bottom: Int = top + itemRadius * 2
   recordButton.layout(left, top, right, bottom)
 
  }
 }
 
 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  var width = itemRadius * 2
  var height = (childCount - 1) * (itemRadius * 2 + itemMargin) + itemRadius * 2 + itemRadius
  width += paddingLeft + paddingRight
  height += paddingTop + paddingBottom
  val count = childCount
  for (i in 0 until count) {
   getChildAt(i).measure(width, width)
   if(i == count-1){
    var recordButton = getChildAt(i) as RecordButton
    recordButton.isSwitchMain = true
   }
  }
  setMeasuredDimension(width, height)
 }
 
 private fun init(context: Context, attrs: AttributeSet?) {
  val typedArray = context.obtainStyledAttributes(attrs, R.styleable.RecordMenu)
  itemRadius = typedArray.getDimension(R.styleable.RecordMenu_itemRadius, 30f).toInt()
  itemMargin = typedArray.getDimension(R.styleable.RecordMenu_itemMargin, 10f).toInt()
  duration = typedArray.getInteger(R.styleable.RecordMenu_animDuration, 2000).toLong()
  itemFontSize = typedArray.getDimension(R.styleable.RecordMenu_itemFontSize,18f)
  itemFontColorN = typedArray.getColor(R.styleable.RecordMenu_itemFontColorN,Color.BLACK)
  itemFontColorP = typedArray.getColor(R.styleable.RecordMenu_itemFontColorP,Color.WHITE)
  itemBackDrawableN = typedArray.getResourceId(R.styleable.RecordMenu_itemBackDrawableN,R.drawable.bg_menu_item)
  itemBackDrawableP = typedArray.getResourceId(R.styleable.RecordMenu_itemBackDrawableP,R.drawable.bg_menu_item_press)
 }
 
 fun addItemView(textValue: String){
  var recordButton = RecordButton(context,textValue,itemFontSize,itemFontColorN,itemBackDrawableN,itemFontColorP,itemBackDrawableP)
  var l1 = LayoutParams(itemRadius * 2, itemRadius * 2)
  addView(recordButton, l1)
  recordButton.onRecordItemClickListener = recordListener
 }
 fun addItemView(textValue: String,itemBackDrawableN:Int,itemBackDrawableP:Int){
  var recordButton = RecordButton(context,textValue,itemFontSize,itemFontColorN,itemBackDrawableN,itemFontColorP,itemBackDrawableP)
  var l1 = LayoutParams(itemRadius * 2, itemRadius * 2)
  addView(recordButton, l1)
  recordButton.onRecordItemClickListener = recordListener
 }
 inner class RecordListener : OnRecordItemClickListener {
  override fun onClick(isSwitch: Boolean, textValue: String,isOpen1:Boolean) {
   if (!isRun) {
    if (!isOpen) {
     openMenu()
    } else {
     closeMenu()
    }
   }
   onRecordItemClickListener?.onClick(isSwitch,textValue,isOpen1)
  }
 }
 
 /**
  * 展開控件
  */
 fun openMenu() {
  isOpen = true
  isRun = true
  for (i in 0 until childCount) {
   buttonItemOpenAnimation(i, getChildAt(i) as RecordButton)
  }
 }
 
 /**
  * 關閉控件
  */
 fun closeMenu() {
  isRun = true
  isOpen = false
  for (i in 0 until childCount) {
   buttonItemCloseAnimation(i, getChildAt(i) as RecordButton)
  }
 }
 
 /**
  * 展開動畫
  */
 private fun buttonItemOpenAnimation(index: Int, view: RecordButton) {
  if (!view.isSwitchMain) {
   val propertyAnimator = view.animate().alpha(1f).setInterpolator(OvershootInterpolator()).setDuration(duration / 3)
   propertyAnimator.y((itemRadius * 2 * index + itemMargin * index + itemRadius).toFloat())
   if (isOpen) {
    view.visibility = View.VISIBLE
   }
 
   propertyAnimator.setListener(object : Animator.AnimatorListener {
    override fun onAnimationRepeat(p0: Animator?) {
 
    }
 
    override fun onAnimationCancel(p0: Animator?) {
 
    }
 
    override fun onAnimationEnd(p0: Animator?) {
     if (index == childCount - 2) {
      isRun = false
     }
    }
 
    override fun onAnimationStart(p0: Animator?) {
 
    }
   })
   propertyAnimator.start()
  }
 }
 
 /**
  * 關閉動畫
  */
 private fun buttonItemCloseAnimation(index: Int, view: RecordButton) {
  if (!view.isSwitchMain) {
   val propertyAnimator = view.animate().alpha(0f).setDuration(duration / 3)
   propertyAnimator.y(((itemRadius * 2 + itemMargin) * (childCount - 1) + itemRadius).toFloat())
 
 
   propertyAnimator.setListener(object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator) {}
 
    override fun onAnimationEnd(animation: Animator) {
     if (index == childCount - 2) {
      isRun = false
     }
     if (!isOpen) {
      view.visibility = View.GONE
     }
    }
 
    override fun onAnimationCancel(animation: Animator) {}
 
    override fun onAnimationRepeat(animation: Animator) {}
   })
 
   propertyAnimator.start()
  }
 }
}

關于如何使用Kotlin自定義菜單控件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。