心得感悟

這個(gè)Demo對(duì)我還是比較有難度的，花了好久去理解。因?yàn)閯?dòng)畫(huà)比較有趣苍匆，所以想自己改改樣式，也有助于自己的理解棚菊。這是進(jìn)入Android開(kāi)發(fā)學(xué)習(xí)第六天了浸踩，每天的學(xué)習(xí)都是懂了很多，卻還有很多不懂统求，還是那句加油吧民轴！

基礎(chǔ)知識(shí)：幀動(dòng)畫(huà) 補(bǔ)間動(dòng)畫(huà)

內(nèi)容簡(jiǎn)概

• 一、需求分析
• 二球订、去除標(biāo)題欄和虛化圖片
• 三后裸、虛化頁(yè)面背景和輸入框背景
• 四、新建xml文件配置輸入框
• 五冒滩、新建xml文件管理按鈕的不同狀態(tài)
• 六微驶、實(shí)現(xiàn)捂眼睛動(dòng)畫(huà)
• 七、圖片素材及源代碼
• 八、最終效果圖

具體內(nèi)容

一、需求分析

1. 實(shí)現(xiàn)效果預(yù)覽

之前我們也做過(guò)登錄頁(yè)面文捶，但這次做的和上次稍有不同，我們先來(lái)分析一下關(guān)鍵處扶檐，建議先滑到最后看一下動(dòng)態(tài)效果圖。
①頁(yè)面背景和輸入框背景都是透明色
②點(diǎn)擊輸入框胁艰，系統(tǒng)自動(dòng)彈出鍵盤(pán)款筑；點(diǎn)擊輸入框以外的地方智蝠，鍵盤(pán)收回
③只有輸入框中的用戶名和密碼均不為空時(shí)，登錄按鈕可以點(diǎn)擊奈梳，否則為無(wú)效狀態(tài)
④點(diǎn)擊密碼輸入框杈湾，有一個(gè)捂眼睛的動(dòng)畫(huà)；點(diǎn)擊輸入框以外的地方攘须，貓頭鷹不捂眼睛

二漆撞、去除標(biāo)題欄和虛化圖片

1. 去除標(biāo)題欄

每次做項(xiàng)目都要去除標(biāo)題欄，因?yàn)樗粌H占位置還不好看于宙，這里再溫習(xí)一下如何去除標(biāo)題欄浮驳。

找到styles.xml文件

講文件中的DarkActionBar改為NoActionBar

2. 虛化圖片

在Android studio中可以通過(guò)編寫(xiě)代碼實(shí)現(xiàn)，但是這個(gè)方法太繁瑣捞魁，所以我們可以通過(guò)引用第三方庫(kù)來(lái)實(shí)現(xiàn)至会。進(jìn)入GitHub網(wǎng)站，搜索blurkit即為這里用的庫(kù)署驻，你也可以搜索Virtual（虛化）使用其他庫(kù)。再按下圖順序?qū)⑵洳迦胛覀兊捻?xiàng)目中健霹。

③添加一行代碼
implementation 'io.alterac.blurkit:blurkit:1.1.0'

三旺上、虛化頁(yè)面背景和輸入框背景

1. 虛化頁(yè)面背景

這里我們只需要虛化第一幀即可。虛化程度最大為25

    <!--添加虛化層-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"  # 虛化哪一幀
        app:blk_blurRadius="25"/> #  虛化程度

2. 虛化輸入框

    <!--輸入框背景-->
    <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"/>

四糖埋、新建xml文件配置輸入框

用戶名輸入框和密碼輸入框的邊框宣吱、背景、字體等都相同瞳别，若直接寫(xiě)在activity_main.xml中征候，不便閱讀檢查，所以當(dāng)有大量重復(fù)性的代碼時(shí)祟敛，可以考慮用一個(gè)文件專門(mén)管理它疤坝。

按箭頭順序創(chuàng)建一個(gè)xml文件，命名如白色方框中的文件

將二者相同的代碼寫(xiě)進(jìn)去

<?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>

acitivity.main.xml中使用如下：

        <!--添加輸入框-->
        <EditText
            android:id="@+id/et_user"
            style="@style/EditTextStyle"
            android:inputType="text"
            android:hint="請(qǐng)輸入用戶名"/>

五馆铁、新建xml文件管理按鈕的不同狀態(tài)

按鈕有可點(diǎn)擊狀態(tài)和無(wú)法點(diǎn)擊狀態(tài)跑揉，在這個(gè)文件中設(shè)置不同狀態(tài)下按鈕的樣式。

與上面相似創(chuàng)建文件埠巨，命名如白色方框所示历谍。

有些屬性并不存在，需要自己手打出來(lái)辣垒，注意不要打錯(cuò)望侈。

<?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>

六、實(shí)現(xiàn)捂眼睛動(dòng)畫(huà)

觀察捂眼睛的翅膀勋桶，可以發(fā)現(xiàn)它實(shí)際上是在做旋轉(zhuǎn)動(dòng)作脱衙，上一篇文章中有講解基本的動(dòng)畫(huà)如旋轉(zhuǎn)侥猬，對(duì)動(dòng)畫(huà)不熟悉的朋友可以去看一看。

下面給出主要代碼岂丘，添加監(jiān)聽(tīng)陵究、放置翅膀圖片等代碼就不在此多說(shuō)。

     public void close(){
        //左邊
        RotateAnimation lAnim = new RotateAnimation(0,
                170,
                leftArm.getWidth(),
                0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);

        leftArm.startAnimation(lAnim);

        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);
    }

在Project中找到anim奥帘，在里面創(chuàng)建兩個(gè)xml文件

七铜邮、圖片素材及源代碼

八寨蹋、最終效果圖

輸入密碼時(shí)錄屏軟件不可用松蒜，會(huì)黑屏直到密碼輸完。其他要點(diǎn)都能在動(dòng)圖中展現(xiàn)秸苗。

你也可以嘗試自己改改配色高度等，改代碼也有助于自己理解這個(gè)Demo惊楼。