【Android程序開(kāi)發(fā)】動(dòng)畫登錄頁(yè)面

心得體會(huì)

很久沒(méi)有寫我的簡(jiǎn)書了。有些東西似乎需要細(xì)嚼慢咽,當(dāng)你一下子接觸一個(gè)你不是很能聽(tīng)懂的代碼的時(shí)候,私下里多花點(diǎn)時(shí)間將這一段代碼中所包含的相關(guān)知識(shí)點(diǎn)一片一片掰碎了咽進(jìn)去,似乎也不是那么難以下咽。

目錄

  • 1.需求效果
  • 2.去除標(biāo)題欄
  • 3.虛化背景圖片
  • 4.輸入框布局
  • 5.實(shí)現(xiàn)動(dòng)畫效果
  • 6.工程源碼

具體操作

一、需求效果

本次項(xiàng)目需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫登錄界面。所謂動(dòng)畫登錄界面,即是在實(shí)現(xiàn)一般登錄界面效果的前提下,給登錄界面添加動(dòng)畫效果。實(shí)現(xiàn)效果如下:


20200118_002951.gif
二、去除標(biāo)題欄

在初步開(kāi)發(fā)Android應(yīng)用中,我們會(huì)遇到一個(gè)問(wèn)題,頂部標(biāo)題欄的名字是項(xiàng)目名字(app名字)并且不可編輯。項(xiàng)目開(kāi)發(fā)中有去除標(biāo)題欄的需求。

  • 打開(kāi)res->values->styles.xml,將DarkActionBar修改為NoActionBar
    image.png
三、虛化背景圖片

1.虛化圖片可以用JAVA代碼實(shí)現(xiàn),但這個(gè)方法比較復(fù)雜。一般我們采用使用第三方庫(kù)來(lái)實(shí)現(xiàn)。可以在GitHub搜索blurkit,如圖所示:

image.png

2.然后將implementation 'io.alterac.blurkit:blurkit:1.1.0'插入到build.gradle(Module:app)如下圖所示:
(ps:直接插入可能會(huì)插入失敗,有可能是minSdkVersion版本問(wèn)題,這時(shí)只需要將版本改為21就好)
image.png

3.檢查第三方庫(kù)是否導(dǎo)入成功
打開(kāi)Project->External Libraries界面,查找是否有
Gradle:io.alterac.blurkit:blurkit:1.1.0@aar,如果有,則證明該第三方包導(dǎo)入成功
image.png

4.使用第三方庫(kù)添加背景圖片---在xml里面添加一個(gè)虛化層

    <!--添加虛化層-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  • 此時(shí)的虛化效果如下(效果不是很好,虛化的太過(guò)了):


    image.png
  • 根據(jù)第三方庫(kù)繼續(xù)設(shè)置,改變其虛化值
<io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"
        app:blk_blurRadius="20"/>
  • 虛化效果如下:(這里有一點(diǎn)小缺陷,就是背景圖片最右邊一小部分感覺(jué)沒(méi)有被虛化,有可能是第三方庫(kù)的代碼問(wèn)題)


    image.png
四、輸入框布局

1.輸入框背景框

  • res->drawable->New->Drawable resource file新建一個(gè)input_bg_shape.xml(文件名可以自行設(shè)置),用來(lái)設(shè)置輸入框背景框的顏色,形狀等屬性
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#44666666"/>
</shape>
  • 在xml里面設(shè)置輸入框背景框的其他屬性(包括居中,左間距,右間距等)
   <!--輸入框背景框-->
    <View
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/input_bg_shape"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"/>

2.添加標(biāo)題和輸入框視圖

  • res->drawable->New->Drawable resource file新建一個(gè)editview_shape.xml(文件名可以自行設(shè)置),用來(lái)設(shè)置輸入框視圖的顏色,形狀等屬性
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
        android:color="#44000000"/>
</shape>
  • xml配置
    <!--添加標(biāo)題和輸入框視圖-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="酷炫登錄"
            android:textColor="#999999"
            android:textSize="20dp"
            android:textAlignment="center"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/editview_shape"
            android:layout_marginTop="20dp"
            android:drawableLeft="@drawable/iconfont_user"
            android:paddingLeft="7dp"
            android:drawablePadding="7dp"
            android:textSize="20dp"
            android:hint="請(qǐng)輸入用戶名"
            android:maxLines="1"
            android:inputType="text"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/editview_shape"
            android:layout_marginTop="20dp"
            android:drawableLeft="@drawable/iconfont_user"
            android:paddingLeft="7dp"
            android:drawablePadding="7dp"
            android:textSize="20dp"
            android:hint="請(qǐng)輸入密碼"
            android:maxLines="1"
            android:inputType="text"/>
    </LinearLayout>
  • 思考:這里使用了兩個(gè)EditText編輯框來(lái)實(shí)現(xiàn)登錄框的用戶名和密碼輸入的功能。但我們仔細(xì)觀察,可以發(fā)現(xiàn)兩個(gè)EditText編輯框的內(nèi)容有很多地方是一樣的。那么我們是否可以用一種方法來(lái)簡(jiǎn)化我們的代碼呢?
    下面是簡(jiǎn)化該代碼的實(shí)現(xiàn)方法

values->styles->New->Value resource file里面新建一個(gè)editview_style.xml(文件名可以自定義)來(lái)管理編輯框共同的樣式

   <!--將編輯框中共有的東西抽出來(lái)-->
    <style name="EditTextStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:background">@drawable/editview_shape</item>
        <item name="android:layout_marginTop">20dp</item>
        <item name="android:paddingLeft">7dp</item>
        <item name="android:drawablePadding">7dp</item>
        <item name="android:textSize">20sp</item>
        <item name="android:maxLines">1</item>
    </style>

在xml里面(此時(shí)運(yùn)行效果與之前是一樣的,可以發(fā)現(xiàn)代碼被簡(jiǎn)化了)

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">
       <EditText
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_user"
            android:hint="請(qǐng)輸入用戶名"
            android:inputType="text"/>
        <EditText
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_password"
            android:hint="請(qǐng)輸入密碼"
            android:inputType="textPassword"/>
</LinearLayout>

3.添加登錄按鈕

  • 直接在上面線性布局里面添加一個(gè)按鈕
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="酷炫登錄"
            android:textColor="#999999"
            android:textSize="20dp"
            android:textAlignment="center"/>
        <EditText
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_user"
            android:hint="請(qǐng)輸入用戶名"
            android:inputType="text"/>
        <EditText
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_password"
            android:hint="請(qǐng)輸入密碼"
            android:inputType="textPassword"/>
        <!--添加按鈕-->
        <Button
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登錄"
            android:textColor="#ffffff"
            android:layout_marginTop="20dp"/>
    </LinearLayout>
  • 思考:按鈕有兩種不同的狀態(tài)(點(diǎn)擊和不點(diǎn)擊),如何實(shí)現(xiàn)這一效果呢?
  • res->drawable->New->Drawable resource file新建一個(gè)login_btn_selector.xml(文件名可以自行設(shè)置)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--無(wú)法點(diǎn)擊的狀態(tài):灰色背景 圓角矩形-->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="#666666"/>
        </shape>
    </item>
    <!--正常狀態(tài):藍(lán)色背景 圓角矩形-->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="#39A4F9"/>
        </shape>
    </item>
</selector>
  • 在xml里面使用一下,即在<Button>里面添加
    android:background="@drawable/login_btn_selector"

4.鍵盤隱藏(實(shí)現(xiàn)點(diǎn)擊除鍵盤和編輯框的任意位置,鍵盤隱藏)

@Override
    public boolean onTouchEvent(MotionEvent event) {
        //如果被點(diǎn)擊了
        if(event.getAction()==MotionEvent.ACTION_DOWN){
            //隱藏鍵盤
            //1.獲取系統(tǒng)輸入的管理器
            InputMethodManager inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
            //2.隱藏鍵盤
            inputManager.hideSoftInputFromWindow(user.getWindowToken(),0);
        }
        return true;
    }

其中user為任意給的界面里的一個(gè)控件。即要隱藏鍵盤,只需要得到界面里面的任何一個(gè)控件。
EditText user = findViewById(R.id.et_user);

5.實(shí)現(xiàn)在兩個(gè)編輯框內(nèi)(即用戶名和密碼的輸入框內(nèi))都有內(nèi)容,此時(shí)按鈕可以點(diǎn)擊,否則按鈕無(wú)法點(diǎn)擊

        //監(jiān)聽(tīng)內(nèi)容改變->控制按鈕的點(diǎn)擊狀態(tài)
        user.addTextChangedListener(this);
        password.addTextChangedListener(this);
@Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {
        //判斷兩個(gè)輸入框是否有內(nèi)容,如果兩個(gè)輸入框都有內(nèi)容
        if(user.getText().toString().length()>0&&password.getText().toString().length()>0){
            //按鈕可以點(diǎn)擊
            loginBtn.setEnabled(true);
        }else{
            //按鈕不能點(diǎn)擊
            loginBtn.setEnabled(false);
        }j 
    }

6.實(shí)現(xiàn)監(jiān)聽(tīng)EditText的焦點(diǎn)變化,判斷貓頭鷹是否需要捂住眼睛

       //監(jiān)聽(tīng)EditText的焦點(diǎn)變化 -> 控制是否需要捂住眼睛
        password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if(b ==true){
                    //捂住眼睛
                    Toast t = Toast.makeText(getApplicationContext(),"捂住眼睛", Toast.LENGTH_SHORT);
                    t.show();
                }else{
                    //打開(kāi)
                    Toast.makeText(getApplicationContext(),"放手", Toast.LENGTH_SHORT).show();
                }
            }
        });
  • 注意:此時(shí)由于隱藏鍵盤時(shí)焦點(diǎn)沒(méi)有改變,所以當(dāng)鍵盤隱藏時(shí)貓頭鷹的狀態(tài)并沒(méi)有改變,因此這里我們需要在隱藏鍵盤之后取消焦點(diǎn)(當(dāng)焦點(diǎn)為空時(shí)取消焦點(diǎn)會(huì)報(bào)錯(cuò),因此需要先判斷焦點(diǎn)是否為空
@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            //隱藏鍵盤
            //1.獲取系統(tǒng)輸入的管理器
            InputMethodManager inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
            //2.隱藏鍵盤
           inputManager.hideSoftInputFromWindow(user.getWindowToken(), 0);
            //3.取消焦點(diǎn)
            View focusView = getCurrentFocus();
            if (focusView != null) {
                focusView.clearFocus();//取消焦點(diǎn)
//              focusView.requestFocus();//請(qǐng)求焦點(diǎn)
            }
        }
五、實(shí)現(xiàn)動(dòng)畫效果

1.添加貓頭鷹控件

<!--貓頭鷹-->
    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true">
        <!--貓頭鷹頭像-->
        <ImageView
            android:id="@+id/iv_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/owl_head" 
            android:layout_centerHorizontal="true"/>
        <!--手掌-->
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_hand" 
            android:layout_alignParentLeft="true"
            android:layout_alignBottom="@id/iv_head"
            android:layout_marginBottom="-30dp"/>
        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentRight="true"
            android:layout_alignBottom="@id/iv_head"
            android:layout_marginBottom="-30dp"/>
        <!--翅膀-->
        <ImageView
            android:id="@+id/iv_left_arm"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_left"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentLeft="true"/>
        <ImageView
            android:id="@+id/iv_right_arm"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_right"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>

2.實(shí)現(xiàn)動(dòng)畫

  • 給翅膀添加動(dòng)畫---MainActivity創(chuàng)建
public void close(){
       //旋轉(zhuǎn)左邊翅膀
        RotateAnimation lAnim = new RotateAnimation(0,170, leftArm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);
        leftArm.startAnimation(lAnim);
        //旋轉(zhuǎn)右邊翅膀
        RotateAnimation rAnim = new RotateAnimation(0,-170,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        rightArm.startAnimation(rAnim);

    }
public void open(){
        //旋轉(zhuǎn)左邊翅膀
        RotateAnimation lAnim = new RotateAnimation(170,0, leftArm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);
        leftArm.startAnimation(lAnim);
        //旋轉(zhuǎn)右邊翅膀
        RotateAnimation rAnim = new RotateAnimation(-170,0,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        rightArm.startAnimation(rAnim);

    }
  • 給手掌添加動(dòng)畫---XML配置
    新建Project->app->src->main->res->New->Directory,文件名為anim
    image.png

    新建anim->New->Animation Resource File
    image.png

    上移動(dòng)畫hand_up_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:toYDelta="0"
    android:fromYDelta="100"
    android:fillAfter="true"
    android:duration="500">
</translate>

下移動(dòng)畫hand_down_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:toYDelta="100"
    android:fromYDelta="0"
    android:fillAfter="true"
    android:duration="500">
</translate>

執(zhí)行動(dòng)畫

TranslateAnimation down = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_anim);
        leftHand.startAnimation(down);
        rightHand.startAnimation(down);
TranslateAnimation up = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_anim);
        leftHand.startAnimation(up);
        rightHand.startAnimation(up);

3.實(shí)現(xiàn)功能:將貓頭鷹頭部以下部分進(jìn)行虛化(即下圖所圈貓頭鷹部分)


image.png

利用第三方庫(kù)實(shí)現(xiàn),并且添加app:blk_fps="0"表示只虛化一次

<!--輸入框背景框-->
    <io.alterac.blurkit.BlurLayout
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/input_bg_shape"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:blk_fps="0"/>
六、工程源碼
  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <!--背景圖片-->
    <!--fitXY:沒(méi)有比例的拉伸,高度寬度全填滿-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg"
        android:scaleType="fitXY"/>
    <!--添加虛化層-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"
        app:blk_blurRadius="20"/>
    <!--貓頭鷹-->
    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_alignTop="@id/bg"
        android:layout_marginTop="-100dp"
        >
        <!--貓頭鷹頭像-->
        <ImageView
            android:id="@+id/iv_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/owl_head"
            android:layout_centerHorizontal="true"
            />
        <!--手掌-->
        <ImageView
            android:id="@+id/iv_left_hand"
            android:layout_width="50dp"
            android:layout_height="60dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentLeft="true"
            android:layout_alignBottom="@id/iv_head"
            android:layout_marginBottom="-20dp"
            android:layout_marginLeft="10dp"/>
        <ImageView
            android:id="@+id/iv_right_hand"
            android:layout_width="50dp"
            android:layout_height="60dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentRight="true"
            android:layout_alignBottom="@id/iv_head"
            android:layout_marginBottom="-20dp"
            android:layout_marginRight="10dp"/>
        <!--翅膀-->
        <ImageView
            android:id="@+id/iv_left_arm"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_left"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="20dp"/>
        <ImageView
            android:id="@+id/iv_right_arm"
            android:layout_width="65dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_right"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"/>
    </RelativeLayout>
    <!--輸入框背景框-->
    <io.alterac.blurkit.BlurLayout
        android:id="@+id/bg"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/input_bg_shape"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:blk_fps="0"
        app:blk_blurRadius="20"/>
    <!--添加標(biāo)題和輸入框視圖-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="酷炫登錄"
            android:textColor="#999999"
            android:textSize="20dp"
            android:textAlignment="center"/>
        <EditText
            android:id="@+id/et_user"
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_user"
            android:hint="請(qǐng)輸入用戶名"
            android:inputType="text"/>
        <EditText
            android:id="@+id/et_password"
            style="@style/EditTextStyle"
            android:drawableLeft="@drawable/iconfont_password"
            android:hint="請(qǐng)輸入密碼"
            android:inputType="textPassword"/>
        <!--添加按鈕-->
        <Button
            android:id="@+id/bt_login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登錄"
            android:textColor="#ffffff"
            android:layout_marginTop="20dp"
            android:enabled="false"
            android:background="@drawable/login_btn_selector"/>
    </LinearLayout>
</RelativeLayout>
  • MainActivity.java
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements TextWatcher {
    private EditText user;
    private EditText password;
    private Button loginBtn;
    private ImageView leftArm;
    private ImageView rightArm;
    private ImageView leftHand;
    private ImageView rightHand;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }
    public void initViews(){
        user = findViewById(R.id.et_user);
        password = findViewById(R.id.et_password);
        loginBtn = findViewById(R.id.bt_login);
        leftArm = findViewById(R.id.iv_left_arm);
        rightArm = findViewById(R.id.iv_right_arm);
        leftHand = findViewById(R.id.iv_left_hand);
        rightHand = findViewById(R.id.iv_right_hand);

        //監(jiān)聽(tīng)內(nèi)容改變->控制按鈕的點(diǎn)擊狀態(tài)
        user.addTextChangedListener(this);
        password.addTextChangedListener(this);

        //監(jiān)聽(tīng)EditText的焦點(diǎn)變化 -> 控制是否需要捂住眼睛
        password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if(b ==true){
                    //捂住眼睛
                   close();
                }else{
                    //打開(kāi)
                    open();
                }
            }
        });

    }

    /**
     *當(dāng)有控件獲得焦點(diǎn)focus 自動(dòng)彈出鍵盤
     * 1.點(diǎn)擊軟鍵盤的enter鍵 自動(dòng)收回鍵盤
     * 2.代碼控制 InputMethodManager
     *   showSoftInput:顯示鍵盤 必須先讓這個(gè)view成為焦點(diǎn)requestFocus
     *   hideSoftInputFromWindow:隱藏鍵盤
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            //隱藏鍵盤
            //1.獲取系統(tǒng)輸入的管理器
            InputMethodManager inputManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
            //2.隱藏鍵盤
            inputManager.hideSoftInputFromWindow(user.getWindowToken(), 0);
            //3.取消焦點(diǎn)
            View focusView = getCurrentFocus();
            if (focusView != null) {
                focusView.clearFocus();//取消焦點(diǎn)
//              focusView.requestFocus();//請(qǐng)求焦點(diǎn)
            }
        }

        return true;}

    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {
        //判斷兩個(gè)輸入框是否有內(nèi)容,如果兩個(gè)輸入框都有內(nèi)容
        if(user.getText().toString().length()>0&&password.getText().toString().length()>0){
            //按鈕可以點(diǎn)擊
            loginBtn.setEnabled(true);
        }else{
            //按鈕不能點(diǎn)擊
            loginBtn.setEnabled(false);
        }
    }
    public void close(){
       //旋轉(zhuǎn)左邊翅膀
        RotateAnimation lAnim = new RotateAnimation(0,170, leftArm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);
        leftArm.startAnimation(lAnim);
        //旋轉(zhuǎn)右邊翅膀
        RotateAnimation rAnim = new RotateAnimation(0,-170,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        rightArm.startAnimation(rAnim);

        TranslateAnimation down = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_anim);
        leftHand.startAnimation(down);
        rightHand.startAnimation(down);

    }
    public void open(){
        //旋轉(zhuǎn)左邊翅膀
        RotateAnimation lAnim = new RotateAnimation(170,0, leftArm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);
        leftArm.startAnimation(lAnim);
        //旋轉(zhuǎn)右邊翅膀
        RotateAnimation rAnim = new RotateAnimation(-170,0,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        rightArm.startAnimation(rAnim);

        TranslateAnimation up = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_anim);
        leftHand.startAnimation(up);
        rightHand.startAnimation(up);

    }
}
  • input_bg_shape.xml(res->drawable->New->Drawable resource file)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
</shape>
  • editview_shape.xml(res->drawable->New->Drawable resource file)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
        android:color="#44000000"/>
</shape>
  • editview_style.xml(values->styles->New->Value resource file)
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--app中的標(biāo)題:字體 字號(hào) 顏色-->
    <style name="EditTextStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:background">@drawable/editview_shape</item>
        <item name="android:layout_marginTop">20dp</item>
        <item name="android:paddingLeft">7dp</item>
        <item name="android:drawablePadding">7dp</item>
        <item name="android:textSize">20sp</item>
        <item name="android:maxLines">1</item>
    </style>
</resources>
  • login_btn_selestor.xml(res->drawable->New->Drawable resource file)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--無(wú)法點(diǎn)擊的狀態(tài):灰色背景 圓角矩形-->
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="#666666"/>
        </shape>
    </item>
    <!--正常狀態(tài):藍(lán)色背景 圓角矩形-->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="#39A4F9"/>
        </shape>
    </item>
</selector>

給手掌添加動(dòng)畫

  • 新建Project->app->src->main->res->New->Directory,文件名為anim(文件名固定)
  • hand_up_anim.xml(anim->New->Animation Resource File)
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:toYDelta="0"
    android:fromYDelta="100"
    android:fillAfter="true"
    android:duration="500">
</translate>
  • hand_down_anim.xml(anim->New->Animation Resource File)
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:toYDelta="100"
    android:fromYDelta="0"
    android:fillAfter="true"
    android:duration="500">
</translate>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容