Android自定义控件添加动画

 

本例中的自定义控件代码具体如下：

<!--WizRtf2Html Charset=0 -->

<!--WizRtf2Html Charset=0 --> package com.wolf.widget.view;

import android.content.Context;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.animation.Animation;

import android.view.animation.Animation.AnimationListener;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.TextView;

import com.wolf.widget.R;

/**

* 带滑动动画的开关

* @author wolf_jr

*

*/

public class SlideSwitcher extends RelativeLayout implements OnClickListener, AnimationListener {

/* 指示物 */

private ImageView indicate;

private boolean anim_ing = false;

private Status status = Status.STATUS_1;

private TextView txt_1;

private TextView txt_2;

private AfterClickListener listener;

public SlideSwitcher(Context context, AttributeSet attrs) {

super(context, attrs);

this.setOnClickListener(this);

}

/**

* 设置监听

* @param listener

*/

public void setAfterClickListener(AfterClickListener listener) {

this.listener = listener;

}

/**

* 设置状态1文字

* @param str

*/

public void setText1(String str) {

txt_1.setText(str);

}

/**

* 设置状态2文字

* @param str

*/

public void setText2(String str) {

txt_2.setText(str);

}

/**

* 设置字体大小

* @param unit ex:TypedValue.COMPLEX_UNIT_SP

* @param size

*/

public void setTextSize(int unit, float size) {

txt_1.setTextSize(TypedValue.COMPLEX_UNIT_DIP, size);

txt_2.setTextSize(TypedValue.COMPLEX_UNIT_DIP,

size);

}

/**

* 设置状态

* @param status SlideSwitcher.Status

*/

public void setStatus(Status status) {

if(!this.status.equals(status)) {

switchStatus();

}

}

/**

* 获取状态

* @return

*/

public Status getStatus() {

return status;

}

@Override

protected void onFinishInflate() {

super.onFinishInflate();

indicate = (ImageView) this.findViewById(R.id.indicate);

txt_1 = (TextView) findViewById(R.id.txt_1);

txt_2 = (TextView) findViewById(R.id.txt_2);

}

@Override

protected

void onLayout(boolean changed, int l, int t, int r, int b) {

super.onLayout(changed, l, t, r, b);

}

@Override

public void onAnimationEnd(Animation animation) {

anim_ing = false;

}

@Override

public void onAnimationRepeat(Animation animation) {

}

@Override

public void onAnimationStart(Animation animation) {

anim_ing = true;

}

@Override

public void onClick(View v) {

if(!anim_ing) {

switchStatus();

}

}

/**

* 根据status切换开关状态

*/

private void switchStatus() {

if(status.equals(Status.STATUS_1)) {

indicate.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.go_right_half));

status = Status.STATUS_2;

}else if(status.equals(Status.STATUS_2)) {

indicate.setAnimation(AnimationUtils.loadAnimation(getContext(), R.anim.go_left_half));

status = Status.STATUS_1;

}

this.invalidate();

if(listener != null) {

listener.doInAfter(status);

}

}

/**

* 状态枚举

* @author wolf_jr

*

*/

public enum Status {

STATUS_1,

STATUS_2

}

/**

* 点击后的监听

* @author wolf_jr

*

*/

public interface AfterClickListener {

void doInAfter(Status status);

}

}

 

重点看标红色的代码，这是当该控件被按下时触发的动画，记住最后一定要

this.invalidate();

否则没有动画效果，即视图没有更新，不知道是不是android的BUG。之前参考的那个代码是通过给控件的背景图片使用Button上用的那个<selector>文件来更新视图，觉得很不合理。。

动画就是直接在需要做动画的视图上setAnimation就好了，具体的动画文件如下：

<!--WizRtf2Html Charset=0 --> <?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true">

<translate android:fromXDelta="0.0" android:toXDelta="50%" android:duration="300"/>

</set>

 

fillAfter 是为了让动画结束后保持动画结束后的状态

android:fromXDelta= "0.0" android:toXDelta= "50%" android:duration= "300"分别是开始X位置、结束X位置和动画持续时间

此外还有设置透明度等等的。

 

 

接下来看蓝色部分的代码，是用于在控件被按下时执行的动作，并会传回Status status的当前状态。

 

最后来看看如何使用该控件：

slide_button.xml

<!--WizRtf2Html Charset=0 --> <?xml version="1.0" encoding="utf-8"?>

<com.wolf.widget.view.SlideSwitcher xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/slide_btn_bg"

android:id="@+id/slide_switcher" >

<ImageView

android:id="@+id/indicate"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/slide_btn_indicate"

android:contentDescription="@string/hello"

/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:id="@+id/txt_1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1.0"

android:textColor="@color/black"

android:textSize="16sp"

android:gravity="center"

/>

<TextView

android:id="@+id/txt_2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1.0"

android:textColor="@color/black"

android:textSize="16sp"

android:gravity="center"

/>

</LinearLayout>

</com.wolf.widget.view.SlideSwitcher>

在SlideSwitcher标签中包含的视图就可以在控件类里直接通过findViewById获取。

上面的slide_switcher.xml文件不用改动，只要在如下的文件中调用即可：

 

main.xml

<!--WizRtf2Html Charset=0 --> <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:gravity="center"

android:orientation="vertical" >

<include

layout="@layout/slide_button"

android:layout_width="120dip"

android:layout_height="80dip"

/>

<Button

android:id="@+id/btn_1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="获取状态"

/>

</LinearLayout>

 

下面是在Java代码中使用该控件：

 

<!--WizRtf2Html Charset=0 -->

private SlideSwitcher ss;

<!--WizRtf2Html Charset=0 -->

private Button btn_1;

 

<!--WizRtf2Html Charset=0 -->

ss = (SlideSwitcher) findViewById(R.id.slide_switcher);

ss.setStatus(Status.STATUS_2);

ss.setText1("开");

ss.setText2("关");

ss.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);

ss.setAfterClickListener(new SlideSwitcher.AfterClickListener() {

@Override

public void doInAfter(Status status) {

Toast.makeText(MainActivity.this, "切换为：" + status, Toast.LENGTH_SHORT).show();

}

});

<!--WizRtf2Html Charset=0 -->

btn_1 = (Button) findViewById(R.id.btn_1);

btn_1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "当前状态为：" + ss.getStatus(), Toast.LENGTH_SHORT).show();

}

});