Android屬性動(dòng)畫實(shí)現(xiàn)炫酷的登錄界面
更新時(shí)間：2016年07月27日 17:13:15 作者：qq_25193681
這篇文章主要為大家詳細(xì)介紹了Android屬性動(dòng)畫實(shí)現(xiàn)炫酷的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
我們聊聊我們常寫的登錄界面，這個(gè)界面我相信很多人都寫過(guò)，而且也沒什么難度，但是如果要實(shí)現(xiàn)比較不一般的效果，那就要花點(diǎn)心思了，先看看項(xiàng)目的效果吧：
我一直都不知道怎么在編輯框連設(shè)置圖片大小，所以這個(gè)圖不怎么樣適配編輯框了，大家先湊合著看看。
我先講講思路，當(dāng)我們輸入完賬號(hào)跟密碼之后，點(diǎn)擊登錄，那這個(gè)輸入框就慢慢的消失，在消失后，緊接著就出現(xiàn)這個(gè)進(jìn)度的界面。
思路有了，那我們就開始編碼了：
新建一個(gè)項(xiàng)目，然后系統(tǒng)生成了一個(gè)MainActivity.java文件和activity_main.xml文件。先在activity_main里面操作：
代碼如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7adfb8"
tools:context=".MainActivity" >
<include
android:id="@+id/main_title"
layout="@layout/title_layout" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/main_title"
android:orientation="vertical" >
<ImageView
android:layout_width="55dip"
android:layout_height="55dip"
android:layout_gravity="center_horizontal"
android:src="@drawable/project_detail_cir" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:gravity="center"
android:text="FIREFLY FOREST"
android:textColor="#ffffff"
android:textSize="24sp" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="SHOW YOUR IDEAS"
android:textColor="#ffffff"
android:textSize="16sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<include
android:id="@+id/input_layout"
android:layout_width="match_parent"
android:layout_height="130dip"
layout="@layout/input_layout" />
<include
android:id="@+id/layout_progress"
android:layout_width="match_parent"
android:layout_height="130dip"
layout="@layout/layout_progress"
android:visibility="gone" />
<TextView
android:id="@+id/main_btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/input_layout"
android:layout_centerInParent="true"
android:layout_marginTop="15dip"
android:background="@drawable/text_bg"
android:gravity="center"
android:paddingBottom="2dip"
android:paddingLeft="15dip"
android:paddingRight="15dip"
android:paddingTop="2dip"
android:text="Login"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
這里我引用外面的三個(gè)布局，再加上一個(gè)TextView寫的按鈕，標(biāo)題所引用的文件:
title_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dip"
android:gravity="center_vertical"
android:padding="10dip" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/back" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:textSize="20sp"
android:text="Sign up"
/>
</RelativeLayout>
輸入框引用的文件：input_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:background="@drawable/radius_drawable_bg"
android:orientation="vertical"
android:padding="10dip" >
<LinearLayout
android:id="@+id/input_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/paw_code" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:background="#00000000"
android:hint="賬號(hào)/用戶名/郵箱"
android:padding="5dip"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_marginBottom="5dip"
android:layout_marginTop="5dip"
android:background="#eeeeee" />
<LinearLayout
android:id="@+id/input_layout_psw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/paw_left" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:background="#00000000"
android:hint="密碼"
android:inputType="textPassword"
android:padding="5dip"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
還有一個(gè)加載進(jìn)度的界面：layout_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="20dip"
android:background="@drawable/rotate_layout_bg"
android:orientation="vertical"
android:padding="10dip" >
<ProgressBar
android:id="@+id/progressBar2"
android:layout_width="wrap_content"
android:layout_margin="10dip"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
當(dāng)然，我這里還用到了drawable文件：radius_drawable_bg.xml，這個(gè)文件是輸入框的圓角矩形背景：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dip"/> <solid android:color="#ffffff"/> </shape>
還有進(jìn)度的白色圓形背景：rotate_layout_bg.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="60dip" /> <solid android:color="#ffffff" /> </shape>
除此之外，還有一個(gè)按鈕的描邊背景text_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<corners android:radius="50dip"/>
<stroke
android:width="1dip"
android:color="#ffffff" />
</shape>
至此，我們的前期界面的編寫就完成了，不難，很容易理解，下面開始處理MainActivity.java文件，先看看這里的初始化操作;
private TextView mBtnLogin;
private View progress;
private View mInputLayout;
private float mWidth, mHeight;
private LinearLayout mName, mPsw;
private void initView() {
mBtnLogin = (TextView) findViewById(R.id.main_btn_login);
progress = findViewById(R.id.layout_progress);
mInputLayout = findViewById(R.id.input_layout);
mName = (LinearLayout) findViewById(R.id.input_layout_name);
mPsw = (LinearLayout) findViewById(R.id.input_layout_psw);
mBtnLogin.setOnClickListener(this);
}
這里主要就是加載控件了，不需要多解釋，重點(diǎn)看看動(dòng)畫的處理：
/**
* 輸入框的動(dòng)畫效果
*
* @param view
* 控件
* @param w
* 寬
* @param h
* 高
*/
private void inputAnimator(final View view, float w, float h) {
AnimatorSet set = new AnimatorSet();
ValueAnimator animator = ValueAnimator.ofFloat(0, w);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
ViewGroup.MarginLayoutParams params = (MarginLayoutParams) view
.getLayoutParams();
params.leftMargin = (int) value;
params.rightMargin = (int) value;
view.setLayoutParams(params);
}
});
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mInputLayout,
"scaleX", 1f, 0.5f);
set.setDuration(1000);
set.setInterpolator(new AccelerateDecelerateInterpolator());
set.playTogether(animator, animator2);
set.start();
set.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
/**
* 動(dòng)畫結(jié)束后，先顯示加載的動(dòng)畫，然后再隱藏輸入框
*/
progress.setVisibility(View.VISIBLE);
progressAnimator(progress);
mInputLayout.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
}
這里用到的知識(shí)點(diǎn)還是挺多，例如：屬性動(dòng)畫容器、插值器、屬性動(dòng)畫的監(jiān)聽、動(dòng)態(tài)的設(shè)置控件的相對(duì)位置;一開始可能不容易理解，沒關(guān)系，以后我會(huì)在博客里都講到。我就說(shuō)一下這里的思路;
當(dāng)我們開啟這個(gè)動(dòng)畫的時(shí)候，先是設(shè)置相對(duì)位置，同時(shí)處理在X軸的縮放，然后我們監(jiān)聽到的生命周期，并且在動(dòng)畫結(jié)束的時(shí)候，隱藏當(dāng)前布局，開啟另外一個(gè)布局的顯示動(dòng)畫，看到另外一個(gè)動(dòng)畫：
/**
* 出現(xiàn)進(jìn)度動(dòng)畫
*
* @param view
*/
private void progressAnimator(final View view) {
PropertyValuesHolder animator = PropertyValuesHolder.ofFloat("scaleX",
0.5f, 1f);
PropertyValuesHolder animator2 = PropertyValuesHolder.ofFloat("scaleY",
0.5f, 1f);
ObjectAnimator animator3 = ObjectAnimator.ofPropertyValuesHolder(view,
animator, animator2);
animator3.setDuration(1000);
animator3.setInterpolator(new JellyInterpolator());
animator3.start();
}
其實(shí)這里的套路是一樣的但是不同的是，這里我用到了自己的插值器;
JellyInterpolator.java:
public class JellyInterpolator extends LinearInterpolator {
private float factor;
public JellyInterpolator() {
this.factor = 0.15f;
}
@Override
public float getInterpolation(float input) {
return (float) (Math.pow(2, -10 * input)
* Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
}
}
讓動(dòng)畫更有動(dòng)感。下面我貼上MainActivity的全部代碼;
public class MainActivity extends Activity implements OnClickListener {
private TextView mBtnLogin;
private View progress;
private View mInputLayout;
private float mWidth, mHeight;
private LinearLayout mName, mPsw;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mBtnLogin = (TextView) findViewById(R.id.main_btn_login);
progress = findViewById(R.id.layout_progress);
mInputLayout = findViewById(R.id.input_layout);
mName = (LinearLayout) findViewById(R.id.input_layout_name);
mPsw = (LinearLayout) findViewById(R.id.input_layout_psw);
mBtnLogin.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// 計(jì)算出控件的高與寬
mWidth = mBtnLogin.getMeasuredWidth();
mHeight = mBtnLogin.getMeasuredHeight();
// 隱藏輸入框
mName.setVisibility(View.INVISIBLE);
mPsw.setVisibility(View.INVISIBLE);
inputAnimator(mInputLayout, mWidth, mHeight);
}
/**
* 輸入框的動(dòng)畫效果
*
* @param view
* 控件
* @param w
* 寬
* @param h
* 高
*/
private void inputAnimator(final View view, float w, float h) {
AnimatorSet set = new AnimatorSet();
ValueAnimator animator = ValueAnimator.ofFloat(0, w);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
ViewGroup.MarginLayoutParams params = (MarginLayoutParams) view
.getLayoutParams();
params.leftMargin = (int) value;
params.rightMargin = (int) value;
view.setLayoutParams(params);
}
});
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mInputLayout,
"scaleX", 1f, 0.5f);
set.setDuration(1000);
set.setInterpolator(new AccelerateDecelerateInterpolator());
set.playTogether(animator, animator2);
set.start();
set.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
/**
* 動(dòng)畫結(jié)束后，先顯示加載的動(dòng)畫，然后再隱藏輸入框
*/
progress.setVisibility(View.VISIBLE);
progressAnimator(progress);
mInputLayout.setVisibility(View.INVISIBLE);
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
}
/**
* 出現(xiàn)進(jìn)度動(dòng)畫
*
* @param view
*/
private void progressAnimator(final View view) {
PropertyValuesHolder animator = PropertyValuesHolder.ofFloat("scaleX",
0.5f, 1f);
PropertyValuesHolder animator2 = PropertyValuesHolder.ofFloat("scaleY",
0.5f, 1f);
ObjectAnimator animator3 = ObjectAnimator.ofPropertyValuesHolder(view,
animator, animator2);
animator3.setDuration(1000);
animator3.setInterpolator(new JellyInterpolator());
animator3.start();
}
}
至此，所有的操作已經(jīng)完成了，運(yùn)行項(xiàng)目后點(diǎn)擊登錄按鈕，就可以看到效果了。
源碼下載：http://xiazai.jb51.net/201607/yuanma/LoginProject(jb51.net).rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android?Studio實(shí)現(xiàn)登錄界面功能
- Android實(shí)現(xiàn)登錄界面的注冊(cè)功能
- Android登錄界面的實(shí)現(xiàn)代碼分享
- Android實(shí)現(xiàn)注冊(cè)登錄界面的實(shí)例代碼
- Android設(shè)計(jì)登錄界面、找回密碼、注冊(cè)功能
- Android實(shí)現(xiàn)簡(jiǎn)潔的APP登錄界面
- 功能強(qiáng)大的登錄界面Android實(shí)現(xiàn)代碼
- Android開發(fā)實(shí)例之登錄界面的實(shí)現(xiàn)
- Android QQ登錄界面繪制代碼
- Android Studio實(shí)現(xiàn)簡(jiǎn)易登錄界面制作
相關(guān)文章
Android 實(shí)現(xiàn)仿網(wǎng)絡(luò)直播彈幕功能詳解及實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)仿網(wǎng)絡(luò)直播彈幕功能詳解的相關(guān)資料,并附實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
今天小編就為大家分享一篇關(guān)于Linux命令行下編譯Android NDK的示例代碼，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
Android 開發(fā)手機(jī)（三星）拍照應(yīng)用照片旋轉(zhuǎn)問(wèn)題解決辦法
這篇文章主要介紹了Android 開發(fā)手機(jī)（三星）拍照應(yīng)用照片旋轉(zhuǎn)問(wèn)題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了kotlin開發(fā)cli工具小技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Android實(shí)現(xiàn)簡(jiǎn)易版彈鋼琴效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)易版彈鋼琴效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Android開發(fā)實(shí)現(xiàn)去除bitmap無(wú)用白色邊框的方法示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)去除bitmap無(wú)用白色邊框的方法,結(jié)合實(shí)例形式給出了Android去除bitmap無(wú)用白色邊框的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-11-11
Android開發(fā)中ProgressDialog簡(jiǎn)單用法示例
這篇文章主要介紹了Android開發(fā)中ProgressDialog簡(jiǎn)單用法,結(jié)合實(shí)例形式分析了Android使用ProgressDialog的進(jìn)度條顯示與關(guān)閉、更新等事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
2021最新Android筆試題總結(jié)美團(tuán)Android崗職能要求
這篇文章主要介紹了2021最新Android筆試題總結(jié)以及美團(tuán)Android崗職能要求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
Android仿高德首頁(yè)三段式滑動(dòng)效果的示例代碼
很多app都會(huì)使用三段式滑動(dòng)，比如說(shuō)高德的首頁(yè)和某寶等物流信息都是使用的三段式滑動(dòng)方式。本文將介紹如何實(shí)現(xiàn)這一效果，感興趣的可以學(xué)習(xí)一下2022-01-01
這篇文章主要介紹了Android自定義View圓形圖片控件代碼詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12