Android的學(xué)習(xí)與實(shí)踐6(炫酷登陸界面的實(shí)現(xiàn))

1.收獲

今天是過(guò)了兩周后再上課,感覺(jué)是有點(diǎn)跟不上的,但是沒(méi)有辦法,只有慢慢的把感覺(jué)找回來(lái),今天雖然只是做了一個(gè)demo但是這個(gè)demo的知識(shí)點(diǎn)還是比較寬的,所以還是有很大的價(jià)值的,自己雖然在課上聽的不是很明白,但是自己下來(lái)后看視頻也還是能夠理解的??偟膩?lái)說(shuō)今天還是沒(méi)有能夠跟上可得節(jié)奏,因?yàn)橛械闹R(shí)在前面學(xué)過(guò),但是還是遺忘了。所以還是要進(jìn)行復(fù)習(xí)的,進(jìn)行熟悉,只有這樣才能夠把知識(shí)點(diǎn)活用,才會(huì)有更加靈活的思維方式。

2.技術(shù)

(1)有共同旋轉(zhuǎn)或者是平移的動(dòng)畫目的是相反的就可以設(shè)置兩種狀態(tài)
(2)在配置xml文件時(shí)的代碼優(yōu)化
(3)背景的虛化
(4)系統(tǒng)鍵盤的隱藏

3.技術(shù)的實(shí)際應(yīng)用和實(shí)踐

(1)有共同旋轉(zhuǎn)或者是平移的動(dòng)畫目的是相反的就可以設(shè)置兩種狀態(tài)
在我們給控件設(shè)置動(dòng)畫的過(guò)程中,我們有一種需求,就是一個(gè)動(dòng)畫需要一個(gè)外部命令他才能執(zhí)行,有時(shí)同時(shí)也伴隨著另一個(gè)動(dòng)畫的執(zhí)行。
例如:

TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);
        lefthand.startAnimation(up);
        righthand.startAnimation(up);
TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);
        lefthand.startAnimation(down);
        righthand.startAnimation(down);

在這兩個(gè)代碼塊中有兩種不同的動(dòng)畫,一個(gè)是執(zhí)行down,一個(gè)是up,那么我們需要去實(shí)現(xiàn)這兩個(gè)動(dòng)畫
首先找到項(xiàng)目:project


image.png

然后在項(xiàng)目中新建一個(gè)文件


image.png

在新建的文件下面在新建一個(gè)
image.png

然后在新建的文件中實(shí)現(xiàn)相關(guān)的動(dòng)畫
image.png

image.png

(2)在配置xml文件時(shí)的代碼優(yōu)化
在我們進(jìn)行代碼寫入的過(guò)程中我們會(huì)發(fā)現(xiàn)我們的代碼會(huì)顯得十分的臃腫,一個(gè)代碼塊里面的代碼就會(huì)有很多,而另一個(gè)代碼塊里面的代碼又會(huì)很少,這時(shí)候我們會(huì)發(fā)現(xiàn)代碼的外表并不是很美觀,并且代碼的結(jié)構(gòu)是一樣的,那么我們會(huì)考慮進(jìn)行代碼的整合。
在這個(gè)demo中就有這樣的現(xiàn)象。

<EditText
            android:id="@+id/et_password"
            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="20sp"
            android:textColor="@color/colorPrimary"
            android:maxLines="1"
            
            android:hint="請(qǐng)輸入密碼"
            android:inputType="textPassword"
            />

<EditText
            android:id="@+id/et_password"
            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="20sp"
            android:textColor="@color/colorPrimary"
            android:maxLines="1"
            
            android:hint="請(qǐng)輸入用戶名"
            android:inputType="textPassword"
            />

在這個(gè)代碼塊中有很多的代碼都是一樣的,那么我們就可以來(lái)優(yōu)化代碼
首先,我們需要找到value


image.png

然后在value中新建一個(gè)xml文件


image.png

然后將這些相同的代碼放入這個(gè)xml文件中

<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:drawableLeft">@drawable/iconfont_user</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>
        <item name="android:textCursorDrawable">@color/colorPrimary</item>
    </style>
</resources>

而在xml配置的文件中就看起來(lái)就非常好看,簡(jiǎn)潔了

<EditText
            android:id="@+id/et_password"

            style="@style/EditTextStyle"
            android:hint="請(qǐng)輸入密碼"
            android:inputType="textPassword"
            />

(3)背景的虛化
在這個(gè)項(xiàng)目我們有兩處用到了虛化,一個(gè)是在在整個(gè)背景下用的虛化,另一個(gè)地方就是在編輯框背景的時(shí)候用到了虛化。虛化的作用是要實(shí)際來(lái)體現(xiàn)的,不同的地方虛化的作用不同。在虛化的時(shí)候我們需要引入一個(gè)屬性:io.alterac.blurkit.BlurLayout。

背景的虛化:

<!--添加虛化層-->
    <io.alterac.blurkit.BlurLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:blk_fps="0"
        app:blk_blurRadius="10"
        />

在這里面:blk_fps:表示的是虛化的程度
app:blk_blurRadius:表示的是虛化的半徑
在這里虛化的作用是將背景模糊化,具有一種美感

編輯框背景的虛化:

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

在這里虛化的作用是可以擋住一些不需要看見(jiàn)的控件
(4)系統(tǒng)鍵盤的隱藏
在這個(gè)項(xiàng)目中我們有時(shí)候會(huì)需要鍵盤隱藏,而我們用的系統(tǒng)的鍵盤,那么我們需要通過(guò)系統(tǒng)來(lái)隱藏鍵盤
當(dāng)有控件獲得焦點(diǎn)focus 自動(dòng)彈出鍵盤
1.點(diǎn)擊軟鍵盤的enter鍵 自動(dòng)收回鍵盤
2.代碼控制 InputMethodManager
showSoftInput:顯示鍵盤 必須先讓這個(gè)VIEW成為焦點(diǎn)requestFocuse
我么通過(guò)屬性: hideSoftInputFromWindow來(lái)隱藏鍵盤

 //1.獲取系統(tǒng)輸入的管理器
            InputMethodManager inputMethodManager= (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
            //2.隱藏鍵盤
            inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);
            //3.取消焦點(diǎn)
            View v=getCurrentFocus();
            if(v!=null){
                v.clearFocus();//取消焦點(diǎn)
            }

(5)demo的實(shí)現(xiàn)
效果:

錄制_2019_09_27_11_26_27_260.gif

首先我們需要在xml中把控件配置好

 <!--添加背景圖片-->
    <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="10"
        />
    <!--貓頭鷹-->
    <RelativeLayout
        android:layout_width="280dp"
        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="80dp"
            android:layout_height="80dp"
            android:src="@drawable/icon_hand"
            android:layout_alignParentLeft="true"
            android:layout_alignBottom="@+id/iv_head"
            android:layout_marginBottom="-35dp"
            />
        <ImageView
            android:id="@+id/iv_right_hand"
            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="-35dp"
            />
        <!--翅膀-->
        <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_rigth_arm"
            android:layout_width="61dp"
            android:layout_height="40dp"
            android:src="@drawable/arm_right"
            android:layout_below="@+id/iv_head"
            android:layout_alignParentRight="true"/>
    </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="400dp"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp">

        <!--標(biāo)題-->
        <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="炫酷登陸"
        android:textColor="#00ff00"
        android:textSize="20dp"
        android:textAlignment="center"
        android:layout_marginTop="60dp"
        />

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

            />
        <EditText
            android:id="@+id/et_password"

            style="@style/EditTextStyle"
            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_state"
            />
    </LinearLayout>

</RelativeLayout>

然后我們?cè)贛ainActivity中對(duì)一些控件進(jìn)行操作
找到控件

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_rigth_arm);
        lefthand=findViewById(R.id.iv_left_hand);
        righthand=findViewById(R.id.iv_right_hand);

給控件添加監(jiān)聽事件

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

判斷是否需要執(zhí)行捂眼睛的動(dòng)畫

//監(jiān)聽EidtText焦點(diǎn)的變化 ->控制是否需要捂眼睛
        password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {

                if(b==true){
                    //捂眼睛
                    close();
                }else{
                    //打開
                    open();
                }
            }
        });

捂眼睛動(dòng)畫的實(shí)現(xiàn)
這里捂眼睛的動(dòng)畫有兩個(gè),一個(gè)是打開眼睛,一個(gè)是關(guān)閉眼睛

public void close(){
        //旋轉(zhuǎn)翅膀
        //左翅膀
        RotateAnimation lAnim=new RotateAnimation(0,175,leftarm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);

        leftarm.startAnimation(lAnim);
        //右翅膀
        RotateAnimation rAnim=new RotateAnimation(0,-175,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);

        rightarm.startAnimation(rAnim);

        TranslateAnimation down= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_translate);
        lefthand.startAnimation(down);
        righthand.startAnimation(down);
    }
    public void open(){
        //旋轉(zhuǎn)翅膀
        //左翅膀
        RotateAnimation lAnim=new RotateAnimation(175,0,leftarm.getWidth(),0f);
        lAnim.setDuration(500);
        lAnim.setFillAfter(true);

        leftarm.startAnimation(lAnim);
        //右翅膀
        RotateAnimation rAnim=new RotateAnimation(-175,0,0f,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);

        rightarm.startAnimation(rAnim);

        TranslateAnimation up= (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up_translate);
        lefthand.startAnimation(up);
        righthand.startAnimation(up);
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,818評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,185評(píng)論 3 414
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,656評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,647評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,446評(píng)論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,951評(píng)論 1 321
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,041評(píng)論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,189評(píng)論 0 287
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,718評(píng)論 1 333
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,602評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,800評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,316評(píng)論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,045評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,419評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,671評(píng)論 1 281
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,420評(píng)論 3 390
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,755評(píng)論 2 371

推薦閱讀更多精彩內(nèi)容

  • 所以真的有這樣的時(shí)刻,你不主動(dòng)聯(lián)系別人,就真的沒(méi)有一個(gè)人會(huì)找你,好像全世界就剩下你是一個(gè)人了,就只有你一個(gè)人還在孤...
    逗逼不好笑閱讀 198評(píng)論 0 0
  • 生活中的交談是“小型演講”,講出來(lái)重點(diǎn),溝通才有效果。 同事溝通時(shí),大段語(yǔ)言,往往是沒(méi)有耐心聽的,會(huì)直接先問(wèn),需要...
    豆子121閱讀 180評(píng)論 2 1