仿淘宝底栏点击效果

最近发现淘宝双十一版底栏有个点击效果挺有意思，然后就研究了一下，猜想估计是用属性动画吧，可是感觉怪怪的，现把我的思路写一下。希望大神指点。



首先，先搭界面，activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:background="@android:color/black"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:id="@+id/main_content_ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_orange_dark"
android:layout_above="@+id/main_bottom_ll"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="淘宝"
android:padding="10dp"
android:textColor="#ffffff"
android:textSize="20sp"
/>
<FrameLayout
android:id="@+id/main_content_fl"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>

<LinearLayout
android:id="@+id/main_bottom_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fafafa"
android:orientation="horizontal" >

<com.maxi.taobaotest.widget.PressedLayout
android:id="@+id/main_bottom_home_pl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="5dp"
android:src="@drawable/sy_sy" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="13sp"
android:paddingBottom="5dp"
android:textColor="@drawable/sy_sy"
android:layout_gravity="center"
/>
</com.maxi.taobaotest.widget.PressedLayout>

<com.maxi.taobaotest.widget.PressedLayout
android:id="@+id/main_bottom_wt_pl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="5dp"
android:src="@drawable/wt_wt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微淘"
android:textSize="13sp"
android:paddingBottom="5dp"
android:textColor="@drawable/sy_sy"
android:layout_gravity="center"
/>
</com.maxi.taobaotest.widget.PressedLayout>

<com.maxi.taobaotest.widget.PressedLayout
android:id="@+id/main_bottom_sq_pl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="5dp"
android:src="@drawable/sq_sq" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="社区"
android:textSize="13sp"
android:paddingBottom="5dp"
android:textColor="@drawable/sy_sy"
android:layout_gravity="center"
/>
</com.maxi.taobaotest.widget.PressedLayout>

<com.maxi.taobaotest.widget.PressedLayout
android:id="@+id/main_bottom_gwc_pl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="5dp"
android:src="@drawable/gwc" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="购物车"
android:textSize="13sp"
android:paddingBottom="5dp"
android:textColor="@drawable/sy_sy"
android:layout_gravity="center"
/>
</com.maxi.taobaotest.widget.PressedLayout>
<com.maxi.taobaotest.widget.PressedLayout
android:id="@+id/main_bottom_user_pl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="5dp"
android:src="@drawable/mytb" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的淘宝"
android:textSize="13sp"
android:paddingBottom="5dp"
android:textColor="@drawable/sy_sy"
android:layout_gravity="center"
/>
</com.maxi.taobaotest.widget.PressedLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@id/main_bottom_ll"
android:background="@color/light_gray_3"
/>
</RelativeLayout>

据我观察淘宝下面的底栏点击后会收缩，所以我猜测是底栏整体设置了属性动画，即ObjectAnimator，所以我们在此也将底栏设置一个x轴横向收缩的一个动画。

public static AnimatorSet anim;

private void initAnimator() {
ObjectAnimator anim1 = ObjectAnimator.ofFloat(main_bottom_ll, "scaleX",
1f, 0.99f);
ObjectAnimator anim2 = ObjectAnimator.ofFloat(main_bottom_ll, "scaleX",
0.99f, 1f);
anim = new AnimatorSet();
anim.play(anim2).after(anim1);
anim.setDuration(50);
}

由于点击后收缩，所以点击后将anim进行start。

为了方便，我将底栏的控件进行了封装，PressedLayout。方便用户选中后的变色操作。同时在用户点击抬起后将anim进行start。

package com.maxi.taobaotest.widget;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

import com.maxi.taobaotest.activity.MainActivity;

public class PressedLayout extends LinearLayout {
private ClickListener listener;

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

@SuppressLint("NewApi")
public PressedLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

public PressedLayout(Context context) {
super(context);
}

public void setPressed(final boolean pressed) {
super.setPressed(pressed);
this.postDelayed(new Runnable() {
@Override
public void run() {
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
view.setPressed(pressed);
}
}
}, 50);

};

public boolean isSelected() {
return super.isSelected();
}

public void setSelected(final boolean selected) {
super.setSelected(selected);
this.postDelayed(new Runnable() {
@Override
public void run() {
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
view.setSelected(selected);
}
}
}, 50);
}

public void setClickListener(ClickListener clickListener) {
this.listener = clickListener;
}

private Handler mHandler = new Handler();
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
//			setPressed(true);
}
return true;
case MotionEvent.ACTION_UP: {
//			setPressed(false);
mHandler.post(new Runnable() {
@Override
public void run() {
MainActivity.anim.start();
//                    MainActivity.anim.end();
}
});
if (listener != null) {
listener.onClick();
}
}
return true;
}
return super.onTouchEvent(event);
}
/**
*  点击事件处理回调　
*/
public interface ClickListener {
public void onClick();
}
}

主要的代码大致就这些。有疑问或建议请留言，谢谢！

属性动画用起来还是很方便的，建议没有涉及过的同学去看看。

下面是我写的一个listview的小动画 ，就是根据属性动画实现的。