Java Android-创建一个模拟类型的动画图像，用于移动

我希望创建一个类似模拟的控制器，以便在我的xml布局中移动我的角色（这将类似于PlayStation或Xbox控制器上的控制器-循环模拟）

我的第一个计划是简单地拥有一个图像视图，并在图像视图上放置4个透明按钮以允许移动，但是这有点枯燥，我想用它获得真正的创意，但是我很难找到任何类型的文档，也不确定从何处开始

本质上，我所追求的功能是一个看起来像模拟的图像（见下文），用户可以按下并通过动画四处移动，这将触发相关的位置移动。理想情况下，我也希望这样，用户只需点击右侧的模拟它自动动画，然后触发正确的运动

---

我不确定这是否可行，我要求在我的xml布局中实现这一点，或者如果更容易的话，可以通过编程方式创建它。

请参阅上次编辑

----------------------------------------------

您必须实现GestureDetector.OnGetureListener接口，并使用onDown和onScroll方法检测手势，然后使用视图的onDraw（Canvas c）方法，在修改模拟位图的位置后重新绘制该位图（如果需要，可以使用矩阵进行变换）

您也可以使用如下答案中的onTouchEvent：

编辑
下面是一个尝试，不使用位图，只使用drawCircle方法：



不太复杂， 我写得很快，所以肯定有改进要做，
但它的效果相当好：

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, cy, w/2, black);
        canvas.drawCircle(cx, cy, w/2-5, grey);
        canvas.drawCircle(cx, cy, w/2-10, black);
        canvas.drawCircle(x, y, RADIUS+2, white);
        canvas.drawCircle(x, y, 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,y,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,y,cx,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"
     />

上次编辑：使用侦听器处理事件：

我在AnalogueView中嵌入了一个监听器，现在你可以像在按钮中使用OnClickListener一样使用它

使用setOnMoveListener方法提供两种方法的实现：

onMaxMoveInDirection(double polar_angle_of_direction) and 
onHalfMoveInDirection(double polar_angle_of_direction)

以下是AnalogueView的新代码（没有大的修改，只有接口定义、moveListener字段和updatePosition中的激发操作）：

下面是如何提供一个实现：

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");

            }
        });
    }



}

结果：在文本字段中显示事件：

---

你是想重建一个真实的模拟棍棒，还是只想让中心圆沿着拇指绕棍棒半径移动？@dev理论上我想重建一个真实的模拟棍棒，但不要太在意它的外观，只要用户觉得他们好像在移动一个模拟棍棒左右移动，向上和向下。@dev进一步移动如果用户将模拟物保持在右侧，则在调用移动函数之前，我需要一个1秒钟的小间隙。您应该制作一个动画gif图像并使用电影类播放。@Biraj，这不会真正起作用，因为我仍然需要检测用户选择移动的位置。然后给我的移动课打电话。谢谢你，我会在周五考虑实现它，我会让你知道它是如何产生的，如果它有效的话，我会接受答案。嗨，我已经实现了你的代码，模拟图像看起来很完美。我只是想弄清楚如何检测用户选择的位置，以便触发相关移动。基本上我想通过模拟加上一个假想的X，当它在离边缘最近的50%位置时，移动被称为。我知道我需要使用OnTouch，只是不太确定如何检测位置，然后我的函数移动（1）。Thanksher是你应该怎么做的：当模拟在某个方向超过50%时，它会在侦听器中触发移动动作，我会这样做，知道并编辑答案，好的，谢谢，我会接受答案，并在它工作后奖励你。当然，你可以在界面中添加方法定义来处理更多事件

onMaxMoveInDirection(double polar_angle_of_direction) and 
onHalfMoveInDirection(double polar_angle_of_direction)

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,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, cy, w/2, black);
        canvas.drawCircle(cx, cy, w/2-5, grey);
        canvas.drawCircle(cx, cy, w/2-10, black);
        canvas.drawCircle(x, y, RADIUS+2, white);
        canvas.drawCircle(x, y, 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,y,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,y,cx,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();


        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");

            }
        });
    }



}