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

本文介绍了Android自定义控件之翻转按钮的示例代码&＃xff0c;分享给大家&＃xff0c;具体如下&＃xff1a;

先看一下效果

一.先定义控件的基本结构

这里我们定义一个容器&＃xff0c;所以是在ViewGroup的基础上扩展。

简单起见&＃xff0c;直接使用扩展自ViewGroup的LinearLayout&＃xff0c;并将我们的控件扩展自LinearLayout。

1.按钮的基本布局如下

xmlns:android&＃61;"http://schemas.android.com/apk/res/android"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content"

android:orientation&＃61;"vertical">

android:id&＃61;"&＃64;&＃43;id/mButton"

android:background&＃61;"&＃64;color/colorPrimary"

android:padding&＃61;"5dp"

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"match_parent">

android:id&＃61;"&＃64;&＃43;id/buttonText"

android:text&＃61;"FLIPPED BUTTON"

android:textColor&＃61;"&＃64;android:color/white"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content" />

2.自定义控件开门三步走

构造函数&＃xff0c;onMeasure&＃xff0c;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 &＃61; context;

init(context);

}

public flippedButton(Context context, AttributeSet attrs) {

super(context, attrs);

this.mContext &＃61; context;

init(context);

}

public flippedButton(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.mContext &＃61; context;

init(context);

}

private void init(Context context){

//使用xml中的布局

LayoutInflater.from(context).inflate(R.layout.filpped_button,this, true);

mButton&＃61;findViewById(R.id.mButton);

buttonText&＃61;findViewById(R.id.buttonText);

}

//测量子View

&＃64;Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measureChildren(widthMeasureSpec, heightMeasureSpec);

mWidth &＃61; getMeasuredWidth();

mHeight &＃61; getMeasuredHeight();

//遍历子元件

// int childCount &＃61; this.getChildCount();

// for (int i &＃61; 0; i

// View child &＃61; this.getChildAt(i);

// this.measureChild(child, widthMeasureSpec, heightMeasureSpec);

// int cw &＃61; child.getMeasuredWidth();

// int ch &＃61; child.getMeasuredHeight();

// }

}

//排列子View的位置

&＃64;Override

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

int childTop &＃61; 0;

for (int i &＃61; 0; i

View child &＃61; getChildAt(i);

if (child.getVisibility() !&＃61; GONE) {

child.layout(0, childTop,child.getMeasuredWidth(), childTop &＃43; child.getMeasuredHeight());

childTop &＃61; childTop &＃43; child.getMeasuredHeight();

}

}

}

}

3.在Activity的布局中直接使用

xmlns:android&＃61;"http://schemas.android.com/apk/res/android"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content"

android:layout_gravity&＃61;"center"

android:orientation&＃61;"vertical">

android:id&＃61;"&＃64;&＃43;id/flippedButton"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content">

现在可以看到一个最基本的自定义控件已经可以使用了。

二.接下来是重点&＃xff0c;控件真正“自定义”的部分。

1.添加自定义事件

a.先定义自定义事件接口

/**

* 定义接口

*/

public interface IMyClick{

public void onMyClick(String str);

}

/**

* 初始化接口变量

*/

IMyClick iMyClick&＃61;null;

/**

* 自定义事件监听

* &＃64;param _iMyClick

*/

public void setOnMyClickListener(IMyClick _iMyClick){

iMyClick&＃61;_iMyClick;

}

b.添加按钮点击事件的监听并调用接口传参

mButton.setOnClickListener(new OnClickListener() {

&＃64;Override

public void onClick(View v) {

iMyClick.onMyClick("clicked me");

flipMe();

}

});

c.父级Activity监听事件

fButton&＃61;(flippedButton) findViewById(R.id.flippedButton);

fButton.setOnMyClickListener(new flippedButton.IMyClick(){

&＃64;Override

public void onMyClick(String str) {

Log.d(LOG_TAG,str);

}

});

2.绘制按钮翻转的动画

这里的3d变换需要用到Camera(android.graphics.Camera)、Matrix。

这里可以想象成用Camera拍摄原件的图形&＃xff0c;并将拍摄得到的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.

*

* &＃64;param fromDegrees the start angle of the 3D rotation

* &＃64;param toDegrees the end angle of the 3D rotation

* &＃64;param centerX the X center of the 3D rotation

* &＃64;param centerY the Y center of the 3D rotation

* &＃64;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 &＃61; fromDegrees;

mToDegrees &＃61; toDegrees;

mCenterX &＃61; centerX;

mCenterY &＃61; centerY;

mDepthZ &＃61; depthZ;

mReverse &＃61; reverse;

}

&＃64;Override

public void initialize(int width, int height, int parentWidth, int parentHeight) {

super.initialize(width, height, parentWidth, parentHeight);

mCamera &＃61; new Camera();

}

/**

*

* &＃64;param interpolatedTime 动画时间点&＃xff0c;类似百分比

* &＃64;param t

*/

&＃64;Override

protected void applyTransformation(float interpolatedTime, Transformation t) {

final float fromDegrees &＃61; mFromDegrees;

float degrees &＃61; fromDegrees &＃43; ((mToDegrees - fromDegrees) * interpolatedTime);

final float centerX &＃61; mCenterX;

final float centerY &＃61; mCenterY;

final Camera camera &＃61; mCamera;

final Matrix matrix &＃61; 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);

}

}

注意&＃xff1a;使用的是graphics里的Camera而不是hardware里的

注意&＃xff1a;其中的centerX和centerY是中心点位置。由于Camera的变换是以(0,0)点为原点&＃xff0c;所以需要进行变换。

b.调用这个Animation

final Rotate3dAnimation animation &＃61; new Rotate3dAnimation(0, 180,centerX, centerY, 0, true);

animation.setDuration(500);//动画持续时间&＃xff0c;默认为0

animation.setFillAfter(true);//这个false的话动画完了会复原

mButton.startAnimation(animation);

嗯&＃xff0c;这样按钮就翻转了。

3.接下来做出按钮切换的效果

这里有两种方法。可以使用两个按钮一起翻转&＃xff0c;也可以一个按钮翻90后改变样式再翻回来。

我这里使用一个按钮的方案。

先设置两种状态的动画。(注意在onMeasure后设置&＃xff0c;不然中心位置定位到0&＃xff0c;0了)

animationF &＃61; new Rotate3dAnimation(0, 90,centerX, centerY, 0, true);

animationF.setDuration(500);//动画持续时间&＃xff0c;默认为0

animationF.setFillAfter(true);//这个false的话动画完了会复原

animationB &＃61; new Rotate3dAnimation(-90, 0,centerX, centerY, 0, true);

animationB.setDuration(500);

animationB.setFillAfter(true);

给0-90度翻转的动画增加监听&＃xff0c;动画完成时根据状态标识改变样式和文字&＃xff0c;然后再从-90-0度翻转的动画。

animationF.setAnimationListener(new Animation.AnimationListener() {

&＃64;Override

public void onAnimationStart(Animation animation) {

}

&＃64;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);

}

&＃64;Override

public void onAnimationRepeat(Animation animation) {

}

});

三.一个问题&＃xff1a;显示不全

翻转的时候发现3d变换扩大了的部分超过了空间原先的显示区域而没有显示出来。

这里涉及到margin和padding的处理。

先给mButton的布局增加margin。

xmlns:android&＃61;"http://schemas.android.com/apk/res/android"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content"

android:orientation&＃61;"vertical">

android:id&＃61;"&＃64;&＃43;id/mButton"

android:layout_margin&＃61;"100dp"

android:background&＃61;"&＃64;color/colorPrimary"

android:padding&＃61;"5dp"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content">

android:id&＃61;"&＃64;&＃43;id/buttonText"

android:text&＃61;"FRONT BUTTON"

android:gravity&＃61;"center"

android:textColor&＃61;"&＃64;android:color/white"

android:layout_width&＃61;"100dp"

android:layout_height&＃61;"50dp" />

在onMeasure处理自定义view的margin和padding。

&＃64;Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measureChildren(widthMeasureSpec, heightMeasureSpec);

centerX&＃61;mButton.getMeasuredWidth()/ 2;

centerY&＃61;mButton.getMeasuredHeight() / 2;

mWidth &＃61; 0;

mHeight &＃61; 0;

//margin

marginLeft &＃61; 0;

marginTop &＃61; 0;

marginRight &＃61; 0;

marginBottom &＃61; 0;

//padding

paddingLeft &＃61; getPaddingLeft();

paddingTop &＃61; getPaddingTop();

paddingRight &＃61; getPaddingRight();

paddingBottom &＃61; getPaddingBottom();

int childCount &＃61; getChildCount();

for (int i &＃61; 0; i

View childView &＃61; getChildAt(i);

MarginLayoutParams lp &＃61; (MarginLayoutParams) childView.getLayoutParams();

measureChild(childView, widthMeasureSpec, heightMeasureSpec);

viewsHeight &＃43;&＃61; childView.getMeasuredHeight();

viewsWidth &＃61; Math.max(viewsWidth, childView.getMeasuredWidth());

marginLeft &＃61; Math.max(0,lp.leftMargin);//最大左边距

marginTop &＃43;&＃61; lp.topMargin;//上边距之和

marginRight &＃61; Math.max(0,lp.rightMargin);//最大右边距

marginBottom &＃43;&＃61; lp.bottomMargin;//下边距之和

}

mWidth &＃61; getMeasuredWidth() &＃43; paddingLeft &＃43; paddingRight &＃43; marginLeft &＃43; marginRight;

mHeight &＃61; getMeasuredHeight() &＃43; paddingBottom &＃43; paddingTop &＃43; marginTop &＃43; marginBottom;

setMeasuredDimension(measureWidth(widthMeasureSpec, mWidth), measureHeight(heightMeasureSpec, mHeight));

//动画

animationF &＃61; new Rotate3dAnimation(0, 90,centerX, centerY, 0, true);

animationF.setDuration(500);//动画持续时间&＃xff0c;默认为0

animationF.setFillAfter(true);//这个false的话动画完了会复原

animationB &＃61; new Rotate3dAnimation(-90, 0,centerX, centerY, 0, true);

animationB.setDuration(500);

animationB.setFillAfter(true);

animationF.setAnimationListener(new Animation.AnimationListener() {

&＃64;Override

public void onAnimationStart(Animation animation) {

}

&＃64;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);

}

&＃64;Override

public void onAnimationRepeat(Animation animation) {

}

});

}

相关github项目地址&＃xff1a;flippedButton

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。