zoukankan      html  css  js  c++  java
  • 实例登录界面

    效果图:

    只有当焦点在输入框中时才会弹出键盘,当键盘是弹出的时候,点击任何地方键盘都会关闭,

       当输入密码的时候猫头鹰会将眼睛捂着,点击其他地方时便会将眼睛打开

                                   

    GitHub地址:https://github.com/luofangli/MyCool_login

    详细代码:

    activity_main.xml中:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 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/bg"
    tools:context=".MainActivity">

    <ImageView
    android:id="@+id/head_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/head" />

    <ImageView
    android:id="@+id/lefthand"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon_hand"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toStartOf="@+id/head_image"
    app:layout_constraintTop_toTopOf="@+id/guideline" />

    <ImageView
    android:id="@+id/righthand"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintStart_toEndOf="@+id/head_image"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:srcCompat="@drawable/icon_hand" />

    <ImageView
    android:id="@+id/rightArm"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/head_image"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:srcCompat="@drawable/arm_right" />

    <ImageView
    android:id="@+id/leftArm"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/head_image"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:srcCompat="@drawable/arm_left" />

    <androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.25" />

    <androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.59" />

    <ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:scaleType="centerCrop"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:srcCompat="@drawable/bg_blure" />

    <EditText
    android:id="@+id/edittext_name"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="@drawable/shape_text"
    android:drawableStart="@drawable/iconfont_user"
    android:ems="10"
    android:hint="请输入账号"
    android:inputType="textPersonName"
    android:paddingStart="10dp"
    app:layout_constraintBottom_toTopOf="@+id/edittext_password"
    app:layout_constraintEnd_toEndOf="@+id/edittext_password"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/edittext_password"
    app:layout_constraintTop_toBottomOf="@+id/head_image" />

    <EditText
    android:id="@+id/edittext_password"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:background="@drawable/shape_text"
    android:drawableStart="@drawable/iconfont_password"
    android:ems="10"
    android:hint="请输入密码"
    android:inputType="textPassword"
    android:maxLength="6"
    android:paddingStart="10dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/edittext_name" />

    <Button
    android:id="@+id/button_login"
    android:layout_width="0dp"
    android:layout_height="60dp"
    android:text="登录"
    app:layout_constraintEnd_toEndOf="@+id/imageView"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

    </androidx.constraintlayout.widget.ConstraintLayout>


    shape_text.xml中:
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <stroke android:color="@color/white"
    android:width="1dp"/>
    <solid android:color="@color/lightGray"/>


    </shape>


    MainActivity中:
    package com.example.my

    import android.animation.Animator
    import android.animation.AnimatorSet
    import android.animation.ObjectAnimator
    import android.content.Context
    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.text.Editable
    import android.text.TextWatcher
    import android.util.DisplayMetrics
    import android.util.Log
    import android.view.MotionEvent
    import android.view.View
    import android.view.inputmethod.InputMethodManager
    import kotlinx.android.synthetic.main.activity_main.*
    import java.util.function.LongFunction

    class MainActivity : AppCompatActivity(),TextWatcher,View.OnFocusChangeListener {
    //左边手臂
    //升起
    private val leftArmAnimatorSet:AnimatorSet by lazy {
    val rotate=ObjectAnimator.ofFloat(leftArm,"rotation",
    145f)
    val transX = ObjectAnimator.ofFloat(leftArm,"translationX",
    dp2px(50f))
    val transY = ObjectAnimator.ofFloat(leftArm,"translationY",
    dp2px(-45f))
    AnimatorSet().apply {
    duration = 500
    playTogether(rotate,transX,transY)
    }
    }
    //降落
    private val leftArmAnimatorSetDown:AnimatorSet by lazy {
    val rotate=ObjectAnimator.ofFloat(leftArm,"rotation",
    0f)
    val transX = ObjectAnimator.ofFloat(leftArm,"translationX",
    dp2px(0f))
    val transY = ObjectAnimator.ofFloat(leftArm,"translationY",
    dp2px(0f))
    AnimatorSet().apply {
    duration = 500
    playTogether(rotate,transX,transY)
    }
    }
    //右边手臂
    //升起
    private val rightArmAnimator:AnimatorSet by lazy {
    val rotate=ObjectAnimator.ofFloat(rightArm,"rotation",
    -145f)
    val transX = ObjectAnimator.ofFloat(rightArm,"translationX",
    dp2px(-50f))
    val transY = ObjectAnimator.ofFloat(rightArm,"translationY",
    dp2px(-45f))
    AnimatorSet().apply {
    duration = 500
    playTogether(rotate,transX,transY)
    }
    }
    //降落
    private val rightArmAnimatorDown:AnimatorSet by lazy {
    val rotate=ObjectAnimator.ofFloat(rightArm,"rotation",
    0f)
    val transX = ObjectAnimator.ofFloat(rightArm,"translationX",
    dp2px(0f))
    val transY = ObjectAnimator.ofFloat(rightArm,"translationY",
    dp2px(0f))
    AnimatorSet().apply {
    duration = 500
    playTogether(rotate,transX,transY)
    }
    }
    //左手掌手掌
    private val lefttAnimatorhandUp:ObjectAnimator by lazy {
    ObjectAnimator.ofFloat(lefthand,"translationY",dp2px(0f))
    }
    private val leftAnimatorhandDown:ObjectAnimator by lazy {
    ObjectAnimator.ofFloat(lefthand,"translationY",dp2px(40f))
    }
    //右手掌
    private val righttAnimatorhandUp:ObjectAnimator by lazy {
    ObjectAnimator.ofFloat(righthand,"translationY",dp2px(0f))
    }
    private val rightAnimatorhandDown:ObjectAnimator by lazy {
    ObjectAnimator.ofFloat(righthand,"translationY",dp2px(40f))
    }

    private var isopen = false
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    edittext_password.onFocusChangeListener = this
    edittext_password.setOnClickListener {
    hideOropenBoard_view(it)
    }
    edittext_name.setOnClickListener {
    hideOropenBoard_view(it)
    }

    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {

    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {

    }

    override fun afterTextChanged(s: Editable?) {

    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
    when(event?.action){
    MotionEvent.ACTION_DOWN->{
    hideKeyboard()
    }
    }
    return super.onTouchEvent(event)
    }
    //隐藏键盘
    private fun hideKeyboard(){
    val keyboard =getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
    //this.currentFocus?.windowToken 是获取当前activity的windowToken
    keyboard.hideSoftInputFromWindow(this.currentFocus?.windowToken,0)
    }
    //对特定视图键盘的调用
    private fun hideOropenBoard_view(v:View){

    val keyboard = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
    //keyboard.isActive是键盘的状态,若是打开的则返回true否则返回false
    //
    if (isopen){
    Log.v("lfl","关闭键盘")
    //强制关闭
    keyboard.hideSoftInputFromWindow(v.windowToken,0)
    isopen = !isopen
    }else{
    Log.v("lfl","打开键盘")
    //打开
    keyboard.showSoftInput(v,InputMethodManager.SHOW_FORCED)
    isopen = !isopen
    }
    }
    //若键盘是隐藏的则打开,若是打开的则隐藏
    private fun hideOropenKeyboard(){
    val keyboard = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
    keyboard.toggleSoftInput(0,InputMethodManager.HIDE_NOT_ALWAYS)
    }

    override fun onFocusChange(v: View?, hasFocus: Boolean) {
    if(v == edittext_password){
    if (hasFocus){
    //焦点在该视图上,蒙上眼睛
    AnimatorSet().apply {
    play(leftArmAnimatorSet)
    .with(rightArmAnimator)
    .after(leftAnimatorhandDown)
    .after(rightAnimatorhandDown)
    }.start()
    }else{
    //焦点没有在该视图上,打开眼睛
    AnimatorSet().apply {
    play(leftArmAnimatorSetDown)
    .with(rightArmAnimatorDown)
    .after(lefttAnimatorhandUp)
    .after(righttAnimatorhandUp)
    }.start()
    }
    }
    }
    //将dp值转换为相应的像素值
    private fun dp2px(dp:Float):Float{
    return resources.displayMetrics.density*dp
    }
    }

  • 相关阅读:
    个人作业——软件工程实践总结&个人技术博客
    Vue实现表格导出Excel
    个人作业——软件测评
    结对第二次—某次疫情统计可视化的实现
    结对第一次—疫情统计可视化(原型设计)
    代码规范
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    个人作业——软件工程实践总结&个人技术博客
    Android 自定义控件
  • 原文地址:https://www.cnblogs.com/luofangli/p/14751197.html
Copyright © 2011-2022 走看看