Android 사용자 정의 컨트롤 뒤 집기 단추 의 예제 코드
일단 효 과 를 볼 게 요.
1.컨트롤 의 기본 구 조 를 먼저 정의 합 니 다.
여기 서 우 리 는 용 기 를 정의 하기 때문에 View Group 을 바탕 으로 확장 합 니 다.
간단하게 볼 때 View Group 에서 확 장 된 LinearLayout 를 직접 사용 하고 우리 의 컨트롤 을 LinearLayout 에서 확장 합 니 다.
1.버튼 의 기본 레이아웃 은 다음 과 같 습 니 다.
<?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>
2.사용자 정의 컨트롤 문 열 고 3 단계 걷 기구조 함수,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 레이아웃 에서 직접 사용
<?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>
이제 가장 기본 적 인 사용자 정의 컨트롤 을 사용 할 수 있 습 니 다.2.다음은 컨트롤 이 진정 으로'사용자 정의'하 는 부분 입 니 다.
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.부모 활동 감청 사건
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 를 사용 해 야 합 니 다.
카메라 로 원본 을 찍 은 그래 픽 을 상상 하고 촬영 한 bitmap 를 matrix 에 전송 해 Canvas 에 그립 니 다.
카메라 렌즈 의 각 도 를 바 꾸 면 변 형 된 그림 의 크기 를 조정 하여 3d 효 과 를 얻 을 수 있 습 니 다.
공식 demo 에 있 는 이 도구 류 의 범례 를 참고 하 십시오.Rotate3d Animation.자바(사실은 그대로 옮 기 는 것 입 니 다)
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);
}
}
메모:하드웨어 가 아 닌 그래 픽 의 카 메 라 를 사용 합 니 다.주의:그 중의 centerX 와 centerY 는 중심 점 위치 입 니 다.카메라 의 변환 은(0,0)점 을 원점 으로 하기 때문에 변환 이 필요 하 다.
b.이 애니메이션 호출
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 을 추가 합 니 다.
<?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>
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이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.