Android自定义控件之翻转按钮的示例代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:orientation="vertical">  <FrameLayout    android:id="@+id/mButton"    android:background="@color/colorPrimary"    android:padding="5dp"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView      android:id="@+id/buttonText"      android:text="FLIPPED BUTTON"      android:textColor="@android:color/white"      android:layout_width="wrap_content"      android:layout_height="wrap_content" />  </FrameLayout></LinearLayout>

package net.codepig.customviewdemo.view;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.LinearLayout;import net.codepig.customviewdemo.R;public class flippedButton extends LinearLayout {  private Context mContext;  private int mWidth;//容器的宽度  private int mHeight;//容器的高度  private TextView buttonText;  private FrameLayout mButton;  public flippedButton(Context context){    super(context);    this.mContext = context;    init(context);  }  public flippedButton(Context context, AttributeSet attrs) {    super(context, attrs);    this.mContext = context;    init(context);  }  public flippedButton(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    this.mContext = context;    init(context);  }  private void init(Context context){    //使用xml中的布局    LayoutInflater.from(context).inflate(R.layout.filpped_button,this, true);    mButton=findViewById(R.id.mButton);    buttonText=findViewById(R.id.buttonText);  }  //测量子View  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    measureChildren(widthMeasureSpec, heightMeasureSpec);    mWidth = getMeasuredWidth();    mHeight = getMeasuredHeight();    //遍历子元件//    int childCount = this.getChildCount();//    for (int i = 0; i < childCount; i++) {//      View child = this.getChildAt(i);//      this.measureChild(child, widthMeasureSpec, heightMeasureSpec);//      int cw = child.getMeasuredWidth();//      int ch = child.getMeasuredHeight();//    }  }  //排列子View的位置  @Override  protected void onLayout(boolean changed, int l, int t, int r, int b) {    int childTop = 0;    for (int i = 0; i < getChildCount(); i++) {      View child = getChildAt(i);      if (child.getVisibility() != GONE) {        child.layout(0, childTop,child.getMeasuredWidth(), childTop + child.getMeasuredHeight());        childTop = childTop + child.getMeasuredHeight();      }    }  }}

<?xml version="1.0" encoding="utf-8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_gravity="center"  android:orientation="vertical">  <net.codepig.customviewdemo.view.flippedButton    android:id="@+id/flippedButton"    android:layout_width="wrap_content"    android:layout_height="wrap_content">  </net.codepig.customviewdemo.view.flippedButton></LinearLayout>

/**   * 定义接口   */  public interface IMyClick{    public void onMyClick(String str);  }  /**   * 初始化接口变量   */  IMyClick iMyClick=null;  /**   * 自定义事件监听   * @param _iMyClick   */  public void setOnMyClickListener(IMyClick _iMyClick){    iMyClick=_iMyClick;  }

mButton.setOnClickListener(new OnClickListener() {      @Override      public void onClick(View v) {        iMyClick.onMyClick("clicked me");        flipMe();      }    });

fButton=(flippedButton) findViewById(R.id.flippedButton);    fButton.setOnMyClickListener(new flippedButton.IMyClick(){      @Override      public void onMyClick(String str) {        Log.d(LOG_TAG,str);      }    });

package net.codepig.customviewdemo.model;import android.graphics.Camera;//注意使用的是graphics里的而不是hardware里的import android.view.animation.Animation;import android.view.animation.Transformation;import android.graphics.Matrix;/** * An animation that rotates the view on the Y axis between two specified angles. * This animation also adds a translation on the Z axis (depth) to improve the effect. */public class Rotate3dAnimation extends Animation {  private final float mFromDegrees;  private final float mToDegrees;  private final float mCenterX;  private final float mCenterY;  private final float mDepthZ;  private final boolean mReverse;  private Camera mCamera;  /**   * Creates a new 3D rotation on the Y axis. The rotation is defined by its   * start angle and its end angle. Both angles are in degrees. The rotation   * is performed around a center point on the 2D space, definied by a pair   * of X and Y coordinates, called centerX and centerY. When the animation   * starts, a translation on the Z axis (depth) is performed. The length   * of the translation can be specified, as well as whether the translation   * should be reversed in time.   *   * @param fromDegrees the start angle of the 3D rotation   * @param toDegrees the end angle of the 3D rotation   * @param centerX the X center of the 3D rotation   * @param centerY the Y center of the 3D rotation   * @param reverse true if the translation should be reversed, false otherwise   */  public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX, float centerY, float depthZ, boolean reverse) {    mFromDegrees = fromDegrees;    mToDegrees = toDegrees;    mCenterX = centerX;    mCenterY = centerY;    mDepthZ = depthZ;    mReverse = reverse;  }  @Override  public void initialize(int width, int height, int parentWidth, int parentHeight) {    super.initialize(width, height, parentWidth, parentHeight);    mCamera = new Camera();  }  /**   *   * @param interpolatedTime 动画时间点，类似百分比   * @param t   */  @Override  protected void applyTransformation(float interpolatedTime, Transformation t) {    final float fromDegrees = mFromDegrees;    float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);    final float centerX = mCenterX;    final float centerY = mCenterY;    final Camera camera = mCamera;    final Matrix matrix = t.getMatrix();    camera.save();    if (mReverse) {//远离      camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);    } else {//靠近      camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));    }    camera.rotateY(degrees);    camera.getMatrix(matrix);    camera.restore();    //移动旋转中心到布局中心    matrix.preTranslate(-centerX, -centerY);    matrix.postTranslate(centerX, centerY);  }}

final Rotate3dAnimation animation = new Rotate3dAnimation(0, 180,centerX, centerY, 0, true);      animation.setDuration(500);//动画持续时间，默认为0      animation.setFillAfter(true);//这个false的话动画完了会复原      mButton.startAnimation(animation);

    animationF = new Rotate3dAnimation(0, 90,centerX, centerY, 0, true);    animationF.setDuration(500);//动画持续时间，默认为0    animationF.setFillAfter(true);//这个false的话动画完了会复原    animationB = new Rotate3dAnimation(-90, 0,centerX, centerY, 0, true);    animationB.setDuration(500);    animationB.setFillAfter(true);

animationF.setAnimationListener(new Animation.AnimationListener() {      @Override      public void onAnimationStart(Animation animation) {      }      @Override      public void onAnimationEnd(Animation animation) {        if (!showBack) {          buttonText.setText("BACK BUTTON");          mButton.setBackgroundColor(getResources().getColor(R.color.colorAccent));        } else { // 背面朝上          buttonText.setText("FRONT BUTTON");          mButton.setBackgroundColor(getResources().getColor(R.color.colorPrimary));        }        mButton.startAnimation(animationB);      }      @Override      public void onAnimationRepeat(Animation animation) {      }    });

<?xml version="1.0" encoding="utf-8"?><LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:orientation="vertical">  <FrameLayout    android:id="@+id/mButton"    android:layout_margin="100dp"    android:background="@color/colorPrimary"    android:padding="5dp"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <TextView      android:id="@+id/buttonText"      android:text="FRONT BUTTON"      android:gravity="center"      android:textColor="@android:color/white"      android:layout_width="100dp"      android:layout_height="50dp" />  </FrameLayout></LinearLayout>

@Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    measureChildren(widthMeasureSpec, heightMeasureSpec);    centerX=mButton.getMeasuredWidth()/ 2;    centerY=mButton.getMeasuredHeight() / 2;    mWidth = 0;    mHeight = 0;    //margin    marginLeft = 0;    marginTop = 0;    marginRight = 0;    marginBottom = 0;    //padding    paddingLeft = getPaddingLeft();    paddingTop = getPaddingTop();    paddingRight = getPaddingRight();    paddingBottom = getPaddingBottom();    int childCount = getChildCount();    for (int i = 0; i < childCount; i++) {      View childView = getChildAt(i);      MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();      measureChild(childView, widthMeasureSpec, heightMeasureSpec);      viewsHeight += childView.getMeasuredHeight();      viewsWidth = Math.max(viewsWidth, childView.getMeasuredWidth());      marginLeft = Math.max(0,lp.leftMargin);//最大左边距      marginTop += lp.topMargin;//上边距之和      marginRight = Math.max(0,lp.rightMargin);//最大右边距      marginBottom += lp.bottomMargin;//下边距之和    }    mWidth = getMeasuredWidth() + paddingLeft + paddingRight + marginLeft + marginRight;    mHeight = getMeasuredHeight() + paddingBottom + paddingTop + marginTop + marginBottom;    setMeasuredDimension(measureWidth(widthMeasureSpec, mWidth), measureHeight(heightMeasureSpec, mHeight));    //动画    animationF = new Rotate3dAnimation(0, 90,centerX, centerY, 0, true);    animationF.setDuration(500);//动画持续时间，默认为0    animationF.setFillAfter(true);//这个false的话动画完了会复原    animationB = new Rotate3dAnimation(-90, 0,centerX, centerY, 0, true);    animationB.setDuration(500);    animationB.setFillAfter(true);    animationF.setAnimationListener(new Animation.AnimationListener() {      @Override      public void onAnimationStart(Animation animation) {      }      @Override      public void onAnimationEnd(Animation animation) {        if (showBack) {          buttonText.setText("BACK BUTTON");          mButton.setBackgroundColor(getResources().getColor(R.color.colorAccent));        } else { // 背面朝上          buttonText.setText("FRONT BUTTON");          mButton.setBackgroundColor(getResources().getColor(R.color.colorPrimary));        }        mButton.startAnimation(animationB);      }      @Override      public void onAnimationRepeat(Animation animation) {      }    });  }