本節內容
1.第三方庫實現虛化
2.添加輸入框和按鈕
3.按鈕狀態
4.鍵盤隱藏
5.監聽焦點改變的事件
6.手臂旋轉動畫
7.手掌和手臂動畫
Demo簡介
1.做一個炫酷登錄的界面。
image.png
當我們輸入密碼的時候，貓頭鷹會捂住眼睛。點擊其他地方后，它的手臂又會張開。
QQ圖片20210329154151.png
登錄按鈕只有當用戶名和密碼都輸入了之后，才會變成藍色，否則就是灰色。
QQ圖片20210329154304.png
一、第三方庫實現虛化
1.首先在gradle中添加一個依賴庫，然后同步一下。
implementation 'io.alterac.blurkit:blurkit:1.1.0'
2.在code中添加一個虛化框
<io.alterac.blurkit.BlurLayout
android:id="@+id/blurLayout"
android:layout_width="0dp"
android:layout_height="270dp"
android:layout_marginEnd="20dp"
app:blk_blurRadius="20"
app:blk_cornerRadius="10dp"
app:blk_fps="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/mHead">
</io.alterac.blurkit.BlurLayout>
app:blk_blurRadius="20"，表示虛化半徑為20.
app:blk_cornerRadius="10dp"，表示虛化框的圓角半徑。
app:blk_fps="1"，表示每秒幀數。
3.讓它在onStart()方法里面就開始虛化。
override fun onStart() {
super.onStart()
//開始虛化
blurLayout.startBlur()
}
4.啟動完畢之后再停止虛化
override fun onResume() {
super.onResume()
//暫停虛化
blurLayout.pauseBlur()
}
二、添加輸入框和按鈕
1.拖動兩個EditText到虛化框里面，設置id為mName和mPassword。
2.給這兩個控件添加一個邊框，新建資源文件自己設計一個邊框
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp"/>
<stroke android:color="#FFF " android:width="1dp"/>
</shape>
然后在code中把這個添加到EditText中去
android:background="@drawable/edit_shape"
3.在輸入框左側再添加一張圖片，并設置一下內間距，再設置一下內部的文字與該圖片的間距，還有文字間的間距。其他屬性自行調整。
android:drawableStart="@drawable/iconfont_user"
android:paddingStart="10dp"
android:drawablePadding="10dp"
android:letterSpacing="0.1"
4.添加一個按鈕，為了實現不同狀態下顯示不同顏色的效果，我們添加一個<selector>選擇器
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@color/colorGrey"/>
<item android:state_enabled="true" android:drawable="@color/colorBlue"/>
</selector>
5.為了有更多的顏色可以選擇，我們可以在colors.xml中多添加幾個顏色
<resources>
<color name="colorPrimary">#6200EE</color>
<color name="colorPrimaryDark">#3700B3</color>
<color name="colorAccent">#03DAC5</color>
<color name="colorBlue">#4496EF</color>
<color name="colorGrey">#D6D7D7</color>
<color name="colorBlackGrey">#666</color>
<color name="colorWhite">#FFF</color>
</resources>
6.找到button的code，將background設置為我們創建的資源文件
android:background="@drawable/loginbtn_state"
三、按鈕狀態
1.輸入框設置內容改變的監聽器
mName.addTextChangedListener(this)
mPassword.addTextChangedListener(this)
2.只需要實現輸入完了的事件，只有輸入框都不為空時才能點擊
override fun afterTextChanged(s: Editable?) {
//當兩個輸入框都有內容才能點擊
mLogin.isEnabled = mName.text.isNotEmpty() &&mPassword.text.isNotEmpty()
}
四、鍵盤隱藏（只有用戶輸入名字和密碼的時候才彈出鍵盤，其他時候點擊任何其他地方就需要把鍵盤隱藏起來）
1.當一個輸入框被點擊 這個輸入框就獲取到焦點focus。系統自動彈出一個鍵盤和擁有焦點的輸入框進行綁定。
2.鍵盤是由一個類來管理的（InputMethodManager），它是系統提供的服務service
3.實現onTouchEvent方法，如果點下去了，那么就隱藏鍵盤。
override fun onTouchEvent(event: MotionEvent?): Boolean {
if(event?.action==MotionEvent.ACTION_DOWN){
//隱藏鍵盤
hideKeyboard()
}
return super.onTouchEvent(event)
}
4.實現隱藏鍵盤的方法
private fun hideKeyboard(){
//取消焦點
if(mName.hasFocus()){
mName.clearFocus()
}
if(mPassword.hasFocus()){
mPassword.clearFocus()
}
//獲取管理輸入的Manager
val inputMethodManager=
getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(mPassword.windowToken,InputMethodManager.HIDE_NOT_ALWAYS)
}
五、監聽焦點改變的事件
1.主類必須繼承一個焦點的監聽器
class MainActivity : AppCompatActivity(),TextWatcher,View.OnFocusChangeListener {
}
2.實現焦點改變的事件的方法
override fun onFocusChange(v: View?, hasFocus: Boolean) {
if(v == mPassword){
if(hasFocus){
coverEye()
}else{
openEye()
}
}
}
3.輸入焦點改變的監聽事件
mName.onFocusChangeListener = this
mPassword.onFocusChangeListener = this
4.在隱藏鍵盤的時候，要取消焦點，所以前面hideKeyboard()里有取消焦點的方法。
六、手臂旋轉動畫
1.一開始手掌是一半在上，一半在虛化框背后的。
image.png
2.接著當我們輸入密碼時，手掌就要向下，然后手臂從下面旋轉上來。所以手臂一開始也隱藏在虛化框背后。
image.png
當放下手臂時，手掌又會重新露出來。
3.配置的時候差不多如下圖所示，手臂完全在虛化框后面，手掌一半在里面，一半在外面。
image.png
4. 遮住眼睛：兩只手掌同時向下移動 ->兩只手同時旋轉。打開眼睛：兩只手同時旋轉 ->兩個手掌同時向上移動。
實現創建一次有兩種方法：懶加載。定義一個變量 定義一個方法 在方法中判斷這個變量是否有值。這里我們使用懶加載。
5.使用懶加載 定義動畫的對象。手臂的動畫不僅包括旋轉，還包括移動，而且手臂的向上和向右移動是同時進行的。
左手臂向上旋轉
val leftArmUpAnim:AnimatorSet by lazy {
val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",140f).apply {
duration = 500
}
//手臂向右移動
val tx= PropertyValuesHolder.ofFloat("translationX",dpToPx(48f))
//手臂向上移動
val ty= PropertyValuesHolder.ofFloat("translationY",-dpToPx(40f))
val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty)
AnimatorSet().apply {
playTogether(rotate,translate)
duration = 500
}
}
右手臂向上旋轉
val leftArmDownAnim:AnimatorSet by lazy {
val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",0f).apply {
duration = 500
}
//手臂向左移動
val tx= PropertyValuesHolder.ofFloat("translationX",0f)
//手臂向下移動
val ty= PropertyValuesHolder.ofFloat("translationY",0f)
val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty)
AnimatorSet().apply {
playTogether(rotate,translate)
duration = 500
}
}
右手臂向下旋轉
val rightArmDownAnim:AnimatorSet by lazy {
val rotate= ObjectAnimator.ofFloat(mRightArm,"rotation",0f).apply {
duration = 500
}
//手臂向右移動
val tx= PropertyValuesHolder.ofFloat("translationX",0f)
//手臂向下移動
val ty= PropertyValuesHolder.ofFloat("translationY",0f)
val translate= ObjectAnimator.ofPropertyValuesHolder(mRightArm,tx,ty)
AnimatorSet().apply {
playTogether(rotate,translate)
duration = 500
}
}
6.實現捂眼睛動畫函數
private fun coverEye(){
AnimatorSet().apply {
play(leftHandDownAnim)
.with(rightHandDownAnim)
.before(leftArmUpAnim)
.before(rightArmUpAnim)
start()
}
}
7.實現打開眼睛的動畫
private fun openEye(){
AnimatorSet().apply {
play(leftArmDownAnim)
.with(rightArmDownAnim)
.before(leftHandUpAnim)
.before(rightHandUpAnim)
start()
}
}
七、手掌和手臂動畫
1.將dp值轉化為像素
private fun dpToPx(dp:Float):Float{
val display= DisplayMetrics()
windowManager.defaultDisplay.getMetrics(display)
return display.density*dp
}
2.手掌移動動畫
左手掌下移
val leftHandDownAnim:ObjectAnimator by lazy {
ObjectAnimator.ofFloat(mLeftHand,"translationY",mLeftHand.height*0.5f).apply {
duration = 500
}
}
左手掌上移
val leftHandUpAnim:ObjectAnimator by lazy {
ObjectAnimator.ofFloat(mLeftHand,"translationY",0f).apply {
duration = 500
}
}
右手掌下移
val rightHandDownAnim:ObjectAnimator by lazy {
ObjectAnimator.ofFloat(mRighrHand,"translationY",mRighrHand.height*0.5f).apply {
duration = 500
}
}
右手掌上移
val rightHandUpAnim:ObjectAnimator by lazy {
ObjectAnimator.ofFloat(mRighrHand,"translationY",0f).apply {
duration = 500
}
}
所有內容就差不多了，可以結合前面的文章食用。主要的重難點就是監聽焦點，還有動畫的分析過程以及實現過程。
