仿Airbnb登录界面提示组件

  公司应用2.0版本研发，完全废弃之前的所有界面，所有的界面和交互均是从新设计。产品借鉴（说好听的叫借鉴，说的不好听是抄袭）国外一款旅游软件Airbnb。从借鉴到交互基本上是照搬吧。时间上给的充裕点照搬也行，但是时间上最多只给2个月，叫人实在是有点不爽，但是又没有办法。。。。。。

好了，闲话少说，还是回归正题吧。

先说下，组件需要具有的效果吧。文字介绍的有点麻烦，还是上图吧。

第一张图是动效开始的时候，第二张图是动效结束的时候。具体的动效是当用户点击输入框的时候提示信息向上边移动大小边改变。当用户在输入文本框中输入内容后再点击则没有任何效果，若用户没有在输入文本框中输入内容后，则当用户点击输入文本时，则提示信息从顶部边下移边字体变大。

不再扯些闲话了，直接上代码啦。

import java.util.Timer;
import java.util.TimerTask;


import org.xutils.common.util.DensityUtil;


import com.able.wisdomtreeformember.util.OnWhichItemClickListener;


import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.widget.TextView;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;


/**边移动边修改显示字体大小的组件
 * @author Administrator ll
 * @date 2016-9-5
 */
public class MoveView extends TextView implements OnClickListener 
{
private static final int MOVING_TIME=500,//动画
DELAY_TIME=10;//发送消息延迟时间
/**组件位于顶部记录*/
public static final int UP=0,
DOWN=1;//顶部记录
private float sizeRate=0,//字体大小改变的速率
 currentSize=0;//当前字体大小
private int startSize=0,//起始字体大小
endSize=0,//结束字体大小
distanceSize=0,//其实字体大小和结束字体大小只差
state=0;//当前组件的状态
private TranslateAnimation up=null,//上移
  down=null;//下移
private boolean isTop=false;//组件当前的位置
private int[] position=null;//组件x,y坐标的缓存数组
private Timer time=null;//时间定时器
private OnWhichItemClickListener listener=null;//点击事件回调处理接口
@SuppressLint("HandlerLeak")
private Handler hand=new Handler(){


@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case 0x123://向上移动
currentSize-=sizeRate;//将字体大小逐渐缩小
MoveView.this.setTextSize(currentSize);//设置字体大小
if(currentSize-endSize<0.0001){//当前字体大小与结束字体大小差距在规定范围之内，重置状态
isTop=true;//组件位于顶部
stop();//停止
}
break;
case 0x234://向下移动
currentSize+=sizeRate;//将字体大小逐渐增大
MoveView.this.setTextSize(currentSize);//设置字体大小
if(startSize-currentSize<0.0001){//当前大小与最大字体大小在规定范围之内
isTop=false;//组件位于底部
stop();//停止
}
break;
}
}

};

public MoveView(Context context) {
super(context);
init();
}


public MoveView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MoveView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

/**设置监听回调处理
* @param listener 监听回调处理接口
*/
public void setMoveListener(OnWhichItemClickListener listener){
this.listener=listener;
}

/**获取当前组件的位置标志
* @return
*/
public boolean getIsTop(){
return isTop;
}

/**设置当前组件位置
* @param isTop 位于顶部的标志
*/
public void setIsTop(boolean isTop){
this.isTop=isTop;
}

/**设置当前组件的位置状态
* @param state
*/
public void setState(int state){
this.state=state;
}

/**只设置起始字体大小
* @param startSize 起始字体大小
*/
public void setStartAndEndSize(int startSize){
setStartAndEndSize(startSize, null);
}

/**设置起始和结束的字体大小
* @param startSize 起始字体大小
* @param endSize 结束字体大小
*/
public void setStartAndEndSize(int startSize,String endSize){
this.startSize=startSize;//设置其实字体大小
if(TextUtils.isEmpty(endSize))//没有结束字体大小
this.endSize=14;//设置默认字体大小
else
this.endSize=Integer.valueOf(endSize);//设置结束字体大小
distanceSize=startSize-this.endSize;//字体大小之差
sizeRate=((float)distanceSize*DELAY_TIME)/MOVING_TIME;//MOVE_TIME/DELAY_TIME即为发送消息的次数i,distanceSize/i即为每次改变的字体大小
if(state==0){//上移
this.setTextSize(startSize);//设置起始字体大小
currentSize=startSize;//更新当前字体大小
}else if(state==1){//下移
this.setTextSize(this.endSize);//设置结束字体大小
currentSize=this.endSize;//更新当前字体大小
}
}

/**设置字体大小
* @param endSize 结束字体大小
*/
public void setSmallSize(int endSize){
setSmallSize(null, endSize);
}

/**设置文本一开始就显示在顶部
* @param endSize 结束字体的大小
*/
public void setSmallSize(String startSize,int endSize){
isTop=true;//组件位于顶部
state=2;//当前状态为静止
this.endSize=endSize;//设置结束字体大小
if(TextUtils.isEmpty(startSize))
this.startSize=17;
else
this.startSize=Integer.valueOf(startSize);
this.setTextSize(endSize);//设置字体大小
distanceSize=this.startSize-endSize;//字体大小之差
sizeRate=((float)distanceSize*DELAY_TIME)/MOVING_TIME;//MOVE_TIME/DELAY_TIME即为发送消息的次数i,distanceSize/i即为每次改变的字体大小
//上移动画
TranslateAnimation top=new TranslateAnimation(0, 0, position[1], position[1]-DensityUtil.dip2px(30));
top.setDuration(1);//设置时间
top.setFillAfter(true);//移动过后不恢复位置
this.startAnimation(top);//启动动画
currentSize=endSize;//设置当前字体大小为最小大小
top=null;//释放内存
}

/**设置显示的文本
* @param tip 显示的文本
*/
public void setTip(String tip){
this.setText(tip);
}

/**下移
* 
*/
public void startDown(){
this.state=1;//设置当前状态
moveAndChangeSize();//移动
}

/**重置
* 
*/
private void stop(){
state=2;//将组件状态设置为停止
if(time!=null){//定时器不为空
time.cancel();//取消定时器
time=null;//释放内存
}
}

/**初始化
* 
*/
private void init(){
position=new int[2];//创建记录组件在窗口中的位置的数组对象
this.getLocationInWindow(position);//获取组件在窗口中的位置并保存
//上移动画
up=new TranslateAnimation(0, 0, position[1], position[1]-DensityUtil.dip2px(30));
up.setDuration(MOVING_TIME);//设置移动时间
up.setFillAfter(true);//组件位置不恢复
//下移
down=new TranslateAnimation(0, 0,position[1]-DensityUtil.dip2px(30),position[1]);
down.setDuration(MOVING_TIME);//同上
down.setFillAfter(true);//..
setListener();//设置组件点击监听
}

/**设置监听
* 
*/
private void setListener(){
// this.setOnClickListener(this);
}


/**一边移动组件一边改变字体大小
* 
*/
public void moveAndChangeSize(){
if(state==0){//上移
this.startAnimation(up);//启动动画
start();//开启定时任务
}else if(state==1){//下移
this.startAnimation(down);
start();
}
}

/**启动任务
* 
*/
private void start(){
time=new Timer();//实例化
time.schedule(new TimerTask() {//执行定时任务

@Override
public void run() {
if(state==0)//上移
hand.sendEmptyMessage(0x123);//发送上移消息
else if(state==1)//下移
hand.sendEmptyMessage(0x234);//发送下移消息
}
}, 0, DELAY_TIME);//发送消息的时间间隔为10毫秒
}

@Override
public void onClick(View v) {
if(state!=2||!isTop){//当前组件状态不是停止或者组件位置在下面
if(!isTop)//组件在下面
state=0;//修改组件状态
moveAndChangeSize();//变动边修改大小
if(listener!=null)
listener.onWhichItemClick((Integer)v.getTag());//回调处理
}
}
}

上面就是自定义的动效组件，下面看下如何使用该组件吧。

xml中使用该组件如：

<com.able.wisdomtreeformember.widget.MoveView
                        android:id="@+id/edit_name_tip"
                        style="@style/txt_move"
                        android:text="真实姓名"
                        android:clickable="false" />

在java代码中使用如：

MoveView  tv_tel_tip = (MoveView) findViewById(R.id.edit_tel_tip);

下面就是注册点击监听然后回调处理就行了，就不多说了哈。