在網(wǎng)上看見一個不錯的登錄注冊效果媚狰，嘗試著寫了一遍，主要使用TextInputLayout做輸入框妄痪，F(xiàn)loatingActionButton做頁面切換按鈕哈雏。
遵循Material design色彩樣式楞件。源碼在我的Github Widget中衫生，并長期更新一些有意思的小組件或功能。
新年開工大吉 土浸！
效果
loginGIf
實現(xiàn)
- 登錄界面布局
<?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"
>
<android.support.v7.widget.CardView
android:id="@+id/cardview"
android:layout_width="350dp"
android:layout_height="420dp"
android:layout_centerInParent="true"
app:cardCornerRadius="7dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="8dp"
android:layout_height="50dp"
android:layout_marginTop="15dp"
android:background="#039be5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_marginLeft="40dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="@string/login"
android:textColor="#03a9f4"
android:textSize="20sp"
android:textStyle="bold"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/login_edname"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="@string/login_edaccount"
android:paddingLeft="10dp"
android:textColorHint="#9e9e9e"
android:textSize="15sp" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/login_edpwd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="@string/login_edpwd"
android:paddingLeft="10dp"
android:textColorHint="#9e9e9e"
android:inputType="textPassword"
android:textSize="15sp" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp">
<Button
android:id="@+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/btn_shape"
android:paddingBottom="20dp"
android:paddingLeft="60dp"
android:paddingRight="60dp"
android:paddingTop="20dp"
android:text="@string/login_btnok"
android:textColor="#03a9f4"
android:textSize="18sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center_horizontal">
<TextView
android:id="@+id/login_tvfogot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/login_fogotpwd" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/login_qq"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/qq" />
<ImageView
android:id="@+id/login_wechat"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/wechat" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignTop="@+id/cardview"
android:layout_marginTop="25dp"
android:src="@mipmap/register"
android:transitionName="login"
app:fabSize="normal" />
</RelativeLayout>
利用CardView居中登錄框罪针，登錄卡片略小于注冊卡片，這樣能體現(xiàn)一點層次效果黄伊。FloatingActionButton繼承自ImageButton泪酱，我們使用它主要是為了做出切換效果。
如果要修改FloatingActionButton的背景色，要使用FloatingActionButton的自定義屬性app:backgroundTint="#03a9f4"墓阀，使用Android的background是沒有作用的毡惜。
- 切換效果
登錄切換到注冊，這是兩個界面斯撮。一般startActivity跳轉(zhuǎn)會有默認的過渡動畫经伙，首先我們要在點擊FloatingActionButton事件中取消掉默認的過渡動畫：
public void onClick(View v) {
switch (v.getId()){
case R.id.fab:
getWindow().setEnterTransition(null);
getWindow().setExitTransition(null);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,fab,fab.getTransitionName());
startActivity(new Intent(LoginActivity.this,RegisterActivity.class),options.toBundle());
}else{
startActivity(new Intent(LoginActivity.this,RegisterActivity.class));
}
break;
}
}
要注意的是需要判斷一下當(dāng)前的系統(tǒng)版本是不是高于21，不然我們自己定義的過渡效果可能是無效的勿锅。
如果系統(tǒng)版本高于21帕膜，因為我們的過渡動畫是涉及到兩個布局的，我們就需要在View上使用Transition框架溢十。
我們在登錄和注冊布局中都給button添加了一個android:transitionName="login"垮刹，這樣我們根據(jù)相同的transitionname做出連貫的過渡動畫。
取消默認的切換動畫张弛，就這兩行代碼：getWindow().setEnterTransition(null);荒典，getWindow().setExitTransition(null);
我們拆分一下過渡動畫：
- 按鈕FloatingActionButton從右側(cè)滑行到頂部中間
- 布局首先是隱藏的，在按鈕動畫過渡完成以后吞鸭，從按鈕處擴散至完整种蝶。
按鈕FloatingActionButton動畫:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:interpolator="@android:interpolator/linear_out_slow_in"
android:duration="300">
<changeBounds>
<arcMotion
android:maximumAngle="0"
android:minimumHorizontalAngle="90"
android:minimumVerticalAngle="60"/>
</changeBounds>
</transitionSet>
布局顯示動畫：
Animator animator = ViewAnimationUtils.createCircularReveal(cv, cv.getWidth() / 2, 0, fab.getWidth() / 2, cv.getHeight());
animator.setInterpolator(new AccelerateInterpolator());
animator.setDuration(500);
我們看一下createCircularReveal(View view,int centerX, int centerY, float startRadius, float endRadius)
參數(shù)比較明顯，中心點在頂部中間瞒大，即cardView的寬度/2,高度為0螃征，起始和結(jié)束半徑為button的一半(因為button出去了一部分)和整個cardView的高度
在動畫開始時，就開始顯示注冊布局透敌，所以我們需要一個動畫監(jiān)聽：
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
cv.setVisibility(View.VISIBLE);
super.onAnimationStart(animation);
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
}
});
animator.start();
至此盯滚，主要步驟便實現(xiàn)完成了。
