2019-05-24 Android仿iOS FaceBook登
2019-05-24 本文已影响0人
馒Care
先看效果图
n5o0m-z9420.gif
好像有点小卡，将就看看
基本跟FaceBook（iOS版本）登录效果一致
看代码 这里是布局，注意图片的android:scaleType="centerCrop"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ImageView
android:id="@+id/close"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="16dp"
android:src="@drawable/close"
android:visibility="gone" />
<RelativeLayout
android:id="@+id/topPanel"
android:layout_width="match_parent"
android:layout_height="200dp">
<View
android:id="@+id/back_line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0"
android:background="@color/design_default_color_primary" />
<ImageView
android:id="@+id/back_bg"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="@mipmap/login_top_back" />
<ImageView
android:id="@+id/logo_bg"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true"
android:src="@mipmap/ic_launcher" />
</RelativeLayout>
<LinearLayout
android:id="@+id/body"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_below="@+id/logo"
android:layout_marginTop="30dp"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="13dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:src="@drawable/ic_mobile_flag" />
<EditText
android:id="@+id/et_mobile"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_weight="1"
android:background="@null"
android:hint="@string/hint_login_username"
android:inputType="textVisiblePassword"
android:maxLength="11"
android:singleLine="true"
android:text=""
android:textColor="@color/color_999999"
android:textColorHint="@color/color_999999"
android:textSize="14dp" />
<ImageView
android:id="@+id/iv_clean_phone"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:scaleType="centerInside"
android:src="@drawable/ic_clear"
android:visibility="gone" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/color_eeeeee" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="13dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:src="@drawable/ic_password_flag" />
<EditText
android:id="@+id/et_password"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_weight="1"
android:background="@null"
android:hint="@string/hint_login_password"
android:inputType="textPassword"
android:maxLength="30"
android:singleLine="true"
android:text=""
android:textColor="@color/color_999999"
android:textColorHint="@color/color_999999"
android:textSize="14dp" />
<ImageView
android:id="@+id/clean_password"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:scaleType="centerInside"
android:src="@drawable/ic_clear"
android:visibility="gone" />
<ImageView
android:id="@+id/iv_show_pwd"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:scaleType="centerInside"
android:src="@drawable/pass_gone" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/color_eeeeee" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginTop="21dp"
android:background="@color/design_default_color_primary"
android:text="@string/login"
android:textColor="@color/color_ffffff"
android:textSize="18dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/regist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_weight="1"
android:text="注册新用户"
android:textColor="@color/color_b0b8b2"
android:textSize="14dp" />
<TextView
android:id="@+id/forget_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginLeft="21dp"
android:text="@string/login_forget_pwd"
android:textColor="@color/color_b0b8b2"
android:textSize="14dp" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/service"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="联系客服"
android:textColor="@color/color_b0b8b2"
android:textSize="14dp" />
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@color/color_eeeeee" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="关于我们"
android:textColor="@color/color_b0b8b2"
android:textSize="14dp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
来看看代码的几个初始化的数据吧
//中级的logo图
logo = (ImageView) findViewById(R.id.logo_bg);
//背景图渐变消失后的颜色tuce
bgLine = findViewById(R.id.back_line);
//背景图
backBg = (ImageView) findViewById(R.id.back_bg);
//包裹上面三个view的父View
topView = findViewById(R.id.topPanel);
再来看看实际调用的方法
//缩小动画
public void suoxiao() {
final int height = topView.getHeight();
topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//0.5代表要缩小多少倍高度
int i = (int) (height * 0.5 * (float) animation.getAnimatedValue());
topView.getLayoutParams().height = height - i;
topView.requestLayout();
}
}).setInterpolator(new AccelerateDecelerateInterpolator()).start();
logo.animate().scaleX(0.5f).scaleY(0.5f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
backBg.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
bgLine.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
}
public void kuoda() {
final int height = topView.getHeight();
topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int i = (int) (height * (float) animation.getAnimatedValue());
topView.getLayoutParams().height = height + i;
topView.requestLayout();
}
}).setInterpolator(new AccelerateDecelerateInterpolator()).start();
logo.animate().scaleX(1f).scaleY(1.0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
backBg.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
bgLine.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
}
以上使用的都是View自带的动画ViewPropertyAnimator
网上很多都是各种动画组合，我觉得太麻烦了，而且代码量也很多，用View的动画，其实更直接。代码比较简单明了，可以直接CV使用
