java – Android – 为移动创建模拟类型的动画图像
我希望创建一个类似控制器的模拟器,以便在xml布局中移动我的角色(这看起来与PlayStation或Xbox控制器上的类似 – 圆形模拟).
我的第一个计划是简单地使用图像视图并在图像视图上放置4个透明按钮以允许移动,但是这有点沉闷并且想要真正有创意,但是我很难找到任何类型的文档并不确定从哪里开始. 基本上,我所追求的功能是一个看起来像模拟的图像(见下文),然后用户可以按下并移动动画,这将触发相关的位置移动.理想情况下,我也想拥有这个,这样用户只需点击模拟上的右侧即可自动动画,然后触发正确的动作. 我不确定这是否可行,我要求在我的xml布局中实现,或者如果更容易,可以通过编程方式创建. 解决方法
请参阅最后的编辑
---------------------------------------------- 你必须实现GestureDetector.OnGestureListener接口,并使用onDown,onScroll方法来检测手势,然后使用视图的onDraw(Canvas c)方法,在修改它的位置后重绘模拟的位图(并对其进行转换)如果你想用矩阵) 你也可以在这个答案中使用onTouchEvent: --------------------------------------------------------------------------------------- 编辑 ?它不是太复杂, import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class AnalogueView extends View { float x,y; double r,t; int cx,cy,w,h; final int RADIUS = 20; Paint black = new Paint(); Paint grey = new Paint(); Paint white = new Paint(); private int toDo; public AnalogueView(Context context,AttributeSet attrs) { super(context,attrs); black.setColor(Color.BLACK); grey.setColor(Color.GRAY); white.setColor(Color.WHITE); black.setFlags(Paint.ANTI_ALIAS_FLAG); white.setFlags(Paint.ANTI_ALIAS_FLAG); grey.setFlags(Paint.ANTI_ALIAS_FLAG); } @Override protected void onSizeChanged(int w,int h,int oldw,int oldh) { this.w = w; this.h = h; cx = w/2; cy = h/2; x = cx;y=cy; super.onSizeChanged(w,h,oldw,oldh); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawMyStuff(canvas); switch (toDo) { case 1: center(); break; default: break; } } private void drawMyStuff(final Canvas canvas) { canvas.drawCircle(cx,w/2,black); canvas.drawCircle(cx,w/2-5,grey); canvas.drawCircle(cx,w/2-10,black); canvas.drawCircle(x,y,RADIUS+2,white); canvas.drawCircle(x,RADIUS,grey); } // n2p : normal to polar coordinates conversion // p2n : polar to normal coordinates conversion // R : distance to polar center // T : polar angle double n2pR(double x,double y){ return distance(x,cx,cy); } double n2pT(double x,double y){ return Math.atan2((y-cy),(x-cx)); } double p2nX(double r,double t){ return r*Math.cos(t) + cx; } double p2nY(double r,double t){ return r*Math.sin(t) + cy; } double n2pR(){ return distance(x,cy); } double n2pT(){ return Math.atan2((y-cy),(x-cx)); } double p2nX(){ return r*Math.cos(t) + cx; } double p2nY(){ return r*Math.sin(t) + cy; } double distance(double x1,double y1,double x2,double y2 ){ return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)); } @Override public boolean onTouchEvent(MotionEvent event) { switch(event.getAction()){ case MotionEvent.ACTION_DOWN : updatePosition(event); break; case MotionEvent.ACTION_MOVE : updatePosition(event); break; case MotionEvent.ACTION_UP : toDo = 1; center(); break; default :break; } return true; } private void center(){ if(r>15){ r-=15; }else{ toDo=0; r=0; } x = (float) p2nX(); y= (float) p2nY(); invalidate(); } void updatePosition(MotionEvent e){ r= Math.min(w/2-RADIUS,n2pR(e.getX(),e.getY())); t = n2pT(e.getX(),e.getY()); x = (float) p2nX(); y =(float) p2nY(); invalidate(); } } 这是如何将其添加到布局: <yourpackage.AnalogueView android:id="@+id/analogueView1" android:layout_width="80px" android:layout_height="80px" /> 为了检测不同的模拟事件,您可以添加一个具有所需方法定义的Listener,并使用AnalogView中的接口,然后当您想要实现AnalogView的行为时,只需通过调用setter为接口添加一个实现对于监听器(它类似于Button的setOnClickListener).这样您将拥有一个完全封装的AnalogView,您可以在任何其他应用程序中重复使用. ------------------------------------------------------------------------------- 最后编辑:使用监听器处理事件: 我使用AnalogueView嵌入了一个Listener,现在你可以像使用OnClickListener一样使用它, 使用setOnMoveListener方法提供两种方法的实现: onMaxMoveInDirection(double polar_angle_of_direction) and onHalfMoveInDirection(double polar_angle_of_direction) 这是AnalogueView的新代码(没有大的修改,只是接口定义,moveListener字段并触发updatePosition中的动作): import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class AnalogueView extends View { OnMoveListener moveListener; float x,e.getY()); x = (float) p2nX(); y =(float) p2nY(); if(moveListener != null) if(r == w/2-RADIUS) moveListener.onMaxMoveInDirection(t); else if(r >= w/4-RADIUS/2) moveListener.onHalfMoveInDirection(t); invalidate(); } public void setOnMoveListener(OnMoveListener listener){ moveListener =listener; } public interface OnMoveListener{ public void onHalfMoveInDirection(double polarAngle); public void onMaxMoveInDirection(double polarAngle); } } 以下是如何提供实现: import android.app.Activity; import android.os.Bundle; import android.widget.TextView; import com.analog.AnalogueView.OnMoveListener; public class MainActivity extends Activity { AnalogueView analogue; TextView showMoveEvent; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); showMoveEvent = (TextView) findViewById(R.id.showMoveEvent); analogue = (AnalogueView) findViewById(R.id.analogueView1); analogue.setOnMoveListener(new OnMoveListener() { @Override public void onMaxMoveInDirection(double polarAngle) { showMoveEvent.setText("max move in "+polarAngle+" direction"); } @Override public void onHalfMoveInDirection(double polarAngle) { showMoveEvent.setText("half move in "+polarAngle+" direction"); } }); } } 结果:在文本字段中显示事件: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |