Android 사용자 정의 인증 코드 입력 상자 효과 구현(인 스 턴 스 코드)
효과 도 는 다음 과 같다.
바로 이 자줏빛 입 니 다.
테마 로 바로 들 어 갑 니 다.코드 는 다음 과 같 습 니 다.
xml 레이아웃:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="end"
>
<TextView
android:id="@+id/tv_view_top_tip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:textColor="@color/img_code_text_error_color"
android:textSize="12sp"
android:text="error"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/ll_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginRight="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:textSize="24sp"
android:textStyle="bold"
android:background="@null"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v1_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor"
/>
</RelativeLayout>
<View
android:id="@+id/v1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/mainColor" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:textSize="24sp"
android:textStyle="bold"
android:background="@null"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v2_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor" />
</RelativeLayout>
<View
android:id="@+id/v2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/global_text_color_grey" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:textSize="24sp"
android:textStyle="bold"
android:background="@null"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v3_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor"/>
</RelativeLayout>
<View
android:id="@+id/v3"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/global_text_color_grey" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:background="@null"
android:textStyle="bold"
android:textSize="24sp"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v4_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor" />
</RelativeLayout>
<View
android:id="@+id/v4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/global_text_color_grey" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll5_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:background="@null"
android:textStyle="bold"
android:textSize="24sp"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v5_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor" />
</RelativeLayout>
<View
android:id="@+id/v5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/global_text_color_grey" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll6_parent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
>
<TextView
android:id="@+id/tv_code6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/global_text_color_10"
android:background="@null"
android:textStyle="bold"
android:textSize="24sp"
android:layout_centerInParent="true"
android:gravity="center"/>
<View
android:id="@+id/v6_center_line"
android:layout_width="1.5dp"
android:layout_height="16dp"
android:visibility="invisible"
android:layout_centerInParent="true"
android:background="@color/mainColor" />
</RelativeLayout>
<View
android:id="@+id/v6"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/global_text_color_grey" />
</LinearLayout>
</LinearLayout>
<EditText
android:id="@+id/et_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/ll_code"
android:layout_alignBottom="@+id/ll_code"
android:background="@android:color/transparent"
android:textColor="@android:color/transparent"
android:cursorVisible="false"
android:inputType="number"/>
</RelativeLayout>
<TextView
android:id="@+id/tv_get_sms_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="9.5dp"
android:paddingBottom="10dp"
android:textColor="@color/text_color_pressed_selector"
android:textSize="12sp"
android:text="@string/resend_verify_code"
/>
</LinearLayout>
class CustomSmsCodeInputLayout : RelativeLayout, View.OnClickListener {
/**
* ，FOUR ,SIX6
*/
enum class InputLineNum(var num: Int){
FOUR(4), SIX(6)
}
override fun onClick(v: View?) {
when(v?.id){
R.id.tv_get_sms_code->{
clearAllInputValues()
if (onClickSmsCodeTvListener != null) {
onClickSmsCodeTvListener?.onClick(tv_get_sms_code)
}
}
}
}
/* */
fun startCountDownTimer() {
cancelCountDownTimer()
/* 60 ， 1 */
mCountDownTimerUtil = CountDownTimerUtil(mContext, tv_get_sms_code, 60000, 1000)
mCountDownTimerUtil?.start()
}
/* */
private var mContext: Context
/* */
var codes: ArrayList<String>? = ArrayList()
/* */
private var imm: InputMethodManager? = null
private var color_default = Color.parseColor("#999999")
private var color_focus = Color.parseColor("#FF9200")
private var color_centerLine = Color.parseColor("#FF9200")
/* */
private var isVisibleCenterLine = true
private var defaultInputNum = InputLineNum.SIX
private var mCountDownTimerUtil: CountDownTimerUtil? = null
constructor(context: Context) : super(context){
mContext = context
initView()
}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs){
mContext = context
initView()
}
private fun initView() {
imm = mContext.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager?
LayoutInflater.from(mContext).inflate(R.layout.view_sms_code_input_layout, this)
initEvent()
}
private fun initEvent() {
//
et_code.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}
override fun onTextChanged(charSequence: CharSequence, i: Int, i1: Int, i2: Int) {}
override fun afterTextChanged(editable: Editable?) {
if (editable != null && editable.trim().isNotEmpty()) {
//
et_code.setText("")
when(defaultInputNum){
InputLineNum.FOUR -> {
regexMaxInputSize(editable, InputLineNum.FOUR.num)
}
InputLineNum.SIX -> {
regexMaxInputSize(editable, InputLineNum.SIX.num)
}
}
}
}
})
//
et_code.setOnKeyListener(object : View.OnKeyListener {
override fun onKey(view: View, keyCode: Int, keyEvent: KeyEvent): Boolean {
if (keyCode == KeyEvent.KEYCODE_DEL && keyEvent.action == KeyEvent.ACTION_DOWN && codes?.size!! > 0) {
codes!!.removeAt(codes?.size!! - 1)
//
if (tv_view_top_tip.visibility == View.VISIBLE){
tv_view_top_tip.visibility = View.INVISIBLE
}
showCode()
return true
}
return false
}
})
tv_get_sms_code.setOnClickListener(this)
}
/* */
private fun regexMaxInputSize(editable: Editable, maxSize: Int) {
if (codes?.size!! < maxSize) {
// ， （\\s*）
codes?.add(editable.toString().replace(Regex("\\s*"), ""))
showCode()
}
}
/**
*
*/
private fun showCode() {
var code1: String? = ""
var code2: String? = ""
var code3: String? = ""
var code4: String? = ""
var code5: String? = ""
var code6: String? = ""
if (codes?.size!! >= 1) {
code1 = codes?.get(0)
}
if (codes?.size!! >= 2) {
code2 = codes?.get(1)
}
if (codes?.size!! >= 3) {
code3 = codes?.get(2)
}
if (codes?.size!! >= 4) {
code4 = codes?.get(3)
}
if (codes?.size!! >= 5) {
code5 = codes?.get(4)
}
if (codes?.size!! >= 6) {
code6 = codes?.get(5)
}
tv_code1.text = code1
tv_code2.text = code2
tv_code3.text = code3
tv_code4.text = code4
tv_code5.text = code5
tv_code6.text = code6
setColor()//
callBack()//
}
/**
*
*/
private fun setColor() {
v1.setBackgroundColor(color_default)
v2.setBackgroundColor(color_default)
v3.setBackgroundColor(color_default)
v4.setBackgroundColor(color_default)
v5.setBackgroundColor(color_default)
v6.setBackgroundColor(color_default)
if (codes?.size == 0) {
v1.setBackgroundColor(color_focus)
updateCenterLineColor(v1_center_line)
}
if (codes?.size == 1) {
v2.setBackgroundColor(color_focus)
updateCenterLineColor(v2_center_line)
}
if (codes?.size == 2) {
v3.setBackgroundColor(color_focus)
updateCenterLineColor(v3_center_line)
}
if (codes?.size!! == 3) {
v4.setBackgroundColor(color_focus)
updateCenterLineColor(v4_center_line)
}
if (codes?.size == 4) {
v5.setBackgroundColor(color_focus)
updateCenterLineColor(v5_center_line)
}
if (codes?.size!! == 5) {
v6.setBackgroundColor(color_focus)
updateCenterLineColor(v6_center_line)
}
if ((defaultInputNum == InputLineNum.FOUR && codes?.size!! >= 4)
|| (defaultInputNum == InputLineNum.SIX && codes?.size!! >= 6)) {
invisibleAllCenterLine()
}
}
/**
*
*/
private fun callBack() {
if (onInputListener == null) {
return
}
if ((defaultInputNum == InputLineNum.FOUR && codes?.size == 4)
||(defaultInputNum == InputLineNum.SIX && codes?.size == 6)) {
/*zi */
dismissSoftInput()
onInputListener!!.onSuccess(getPhoneCode())
} else {
onInputListener!!.onInput()
}
}
//
interface OnInputListener {
fun onSuccess(code: String)
fun onInput()
}
/**
*
*/
fun showSoftInput() {
//
if (imm != null && et_code != null) {
et_code.requestFocus() //
et_code.postDelayed({ imm?.showSoftInput(et_code, InputMethodManager.SHOW_FORCED) }, 200)
}
}
/**
*
*/
fun dismissSoftInput() {
et_code.requestFocus()
// ，
et_code.postDelayed({ imm?.hideSoftInputFromWindow(et_code.windowToken, 0) }, 200) //
}
/**
*
* @return
*/
fun getPhoneCode(): String {
val sb = StringBuilder()
return if (!codes!!.isEmpty()) {
for (code in codes!!) {
sb.append(code)
}
sb.toString()
}else{
""
}
}
/* */
private fun updateCenterLineColor(view: View){
if (isVisibleCenterLine) {
invisibleAllCenterLine()
view.visibility = View.VISIBLE
}
}
/* */
private fun invisibleAllCenterLine() {
v1_center_line.visibility = View.INVISIBLE
v2_center_line.visibility = View.INVISIBLE
v3_center_line.visibility = View.INVISIBLE
v4_center_line.visibility = View.INVISIBLE
v5_center_line.visibility = View.INVISIBLE
v6_center_line.visibility = View.INVISIBLE
}
/* */
fun setTopTipVisible(isVisible: Boolean){
tv_view_top_tip.visibility = if(isVisible) View.VISIBLE else View.INVISIBLE
}
/* */
fun setCurrentCenterLineVisible(isVisible: Boolean){
isVisibleCenterLine = isVisible
//
v1_center_line.visibility = if(isVisibleCenterLine) View.VISIBLE else View.INVISIBLE
}
/* */
fun setBottomSmsTvVisible(isVisible: Boolean){
tv_get_sms_code.visibility = if(isVisible) View.VISIBLE else View.GONE
}
/* */
fun setTopTipText(text: String){
tv_view_top_tip.text = text
}
/* */
fun setTopTipTextColor(textColor: Int){
tv_view_top_tip.setTextColor(textColor)
}
/* */
fun setCurrentIndexLineColor(underlineColor: Int){
color_focus = underlineColor
v1.setBackgroundColor(color_focus)
}
/* */
fun setCenterLineColor(centerLineColor: Int){
color_centerLine = centerLineColor
v1_center_line.setBackgroundColor(color_centerLine)
}
/* */
fun setAnotherIndexLineColor(underlineColor: Int){
color_default = underlineColor
}
/* */
fun setTopTextAndColor(text: String, textColor: Int){
tv_view_top_tip.text = text
tv_view_top_tip.setTextColor(textColor)
}
/* */
fun setInputType(type: Int) {
et_code?.inputType = type
}
/* */
fun updateGetSmsTvEnable(isEnable: Boolean){
tv_get_sms_code.isEnabled = isEnable
tv_get_sms_code.setTextColor(mContext.resources.getColor(R.color.global_text_color_6c))
}
/* */
fun setShowInputNum(num: InputLineNum){
defaultInputNum = num
when(defaultInputNum){
InputLineNum.FOUR -> {
ll5_parent.visibility = View.GONE
ll6_parent.visibility = View.GONE
}
InputLineNum.SIX -> {
ll5_parent.visibility = View.VISIBLE
ll6_parent.visibility = View.VISIBLE
}
}
}
/* */
fun cancelCountDownTimer(){
if (mCountDownTimerUtil != null){
mCountDownTimerUtil?.cancel()
mCountDownTimerUtil = null
}
}
/** */
fun clearAllInputValues(){
setTopTipVisible(false)
codes?.clear()
showCode()
}
/**
*
*/
fun showSmsCodeDialogTip(msg: String, title: String){
val msgSplit = msg.toList()
DialogCreator.createTitleDialog(
mContext as Activity,
title,
msg,
DialogViewInfo(" "){ _,_ ->
codes?.clear()
msgSplit.forEach { item -> codes?.add(item.toString()) }
showCode()
}
).subscribe()
}
/**
*
*/
fun startShakeTip(){
val animX = ObjectAnimator.ofFloat(this, "translationX", 0F, 5F, -10F, 0F)
val animY = ObjectAnimator.ofFloat(this, "translationY", 0F, 5F, -10F, 0F)
val animatorSet = AnimatorSet()
animatorSet.playTogether(animX, animY) // x、y
animatorSet.interpolator = CycleInterpolator(2F)// 2
animatorSet.duration = 500 // 1
animatorSet.doOnEnd {
clearAllInputValues()
animatorSet.cancel()
}
animatorSet.start()
}
/* 《 》*/
private var onInputListener: OnInputListener? = null
fun setOnInputListener(onInputListener: OnInputListener) {
this.onInputListener = onInputListener
}
/* 《 》*/
private var onClickSmsCodeTvListener: OnClickListener? = null
fun setOnClickSmsCodeTvListener(onClickSmsCodeTvListener: OnClickListener){
this.onClickSmsCodeTvListener = onClickSmsCodeTvListener
}
}기본 호출 코드 는 다음 과 같 습 니 다.
//ll_sms_input CustomSmsCodeInputLayout
ll_sms_input.run {
//
setTopTipVisible(false)
setCurrentCenterLineVisible(true)
setBottomSmsTvVisible(true)
setShowInputNum(CustomSmsCodeInputLayout.InputLineNum.SIX)//
setCurrentIndexLineColor(resources.getColor(R.color.global_text_color_grey))
//
setInputType(InputType.TYPE_CLASS_NUMBER or InputType.TYPE_NUMBER_FLAG_SIGNED)
showSoftInput()
}
ll_sms_input.setOnInputListener()//
ll_sms_input.setOnClickSmsCodeTvListener()// 위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 가 사용자 정의 인증 코드 입력 상자 효 과 를 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
