先看一下效果
20180515_153605.gif
一.先定义控件的基本结构
这里我们定义一个容器，所以是在ViewGroup的基础上扩展。
简单起见，直接使用扩展自ViewGroup的LinearLayout，并将我们的控件扩展自LinearLayout。
1.按钮的基本布局如下
2.自定义控件开门三步走
构造函数，onMeasure，onLayout
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();
}
}
}
}
3.在Activity的布局中直接使用
现在可以看到一个最基本的自定义控件已经可以使用了。
二.接下来是重点，控件真正“自定义”的部分。
1.添加自定义事件
a.先定义自定义事件接口
/**
* 定义接口
*/
public interface IMyClick{
public void onMyClick(String str);
}
/**
* 初始化接口变量
*/
IMyClick iMyClick=null;
/**
* 自定义事件监听
* @param _iMyClick
*/
public void setOnMyClickListener(IMyClick _iMyClick){
iMyClick=_iMyClick;
}
b.添加按钮点击事件的监听并调用接口传参
mButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
iMyClick.onMyClick("clicked me");
flipMe();
}
});
c.父级Activity监听事件
fButton=(flippedButton) findViewById(R.id.flippedButton);
fButton.setOnMyClickListener(new flippedButton.IMyClick(){
@Override
public void onMyClick(String str) {
Log.d(LOG_TAG,str);
}
});
2.绘制按钮翻转的动画
这里的3d变换需要用到Camera（android.graphics.Camera）、Matrix。
这里可以想象成用Camera拍摄原件的图形，并将拍摄得到的bitmap传入matrix再绘制到Canvas。
而改变Camera镜头角度就可以得到缩放变形后的图像以实现3d效果。
参考官方demo里的这个工具类的范例Rotate3dAnimation.java（其实是照搬)
a.先建一个3d变换的工具类:
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);
}
}
注意：使用的是graphics里的Camera而不是hardware里的
注意：其中的centerX和centerY是中心点位置。由于Camera的变换是以（0,0）点为原点，所以需要进行变换。
b.调用这个Animation
final Rotate3dAnimation animation = new Rotate3dAnimation(0, 180,centerX, centerY, 0, true);
animation.setDuration(500);//动画持续时间，默认为0
animation.setFillAfter(true);//这个false的话动画完了会复原
mButton.startAnimation(animation);
嗯，这样按钮就翻转了。
3.接下来做出按钮切换的效果
这里有两种方法。可以使用两个按钮一起翻转，也可以一个按钮翻90后改变样式再翻回来。
我这里使用一个按钮的方案。
先设置两种状态的动画。（注意在onMeasure后设置，不然中心位置定位到0，0了）
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);
给0-90度翻转的动画增加监听，动画完成时根据状态标识改变样式和文字，然后再从-90-0度翻转的动画。
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) {
}
});
三.一个问题：显示不全
翻转的时候发现3d变换扩大了的部分超过了空间原先的显示区域而没有显示出来。
这里涉及到margin和padding的处理。
先给mButton的布局增加margin。
在onMeasure处理自定义view的margin和padding。
@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) {
}
});
}
相关github项目地址：
flippedButton