1. Nimm jetzt an unserem Uhans - 3. ADVENT - Gewinnspiel teil - Alle Informationen findest Du hier!

Layout für Drag and Drop Mastermind-Clone

Dieses Thema im Forum "Android App Entwicklung" wurde erstellt von einspunktnull, 21.02.2011.

  1. einspunktnull, 21.02.2011 #1
    einspunktnull

    einspunktnull Threadstarter Neuer Benutzer

    Beiträge:
    8
    Erhaltene Danke:
    0
    Registriert seit:
    21.02.2011
    Hallo Leute,

    ich bin neu und recht unerfahren in der Android-Anwendungsentwicklung. Ich komme aus der Flash/ActionScript3-Ecke und habe ernsthafte Probleme, das Grafik- und Layout-Konzept von Android zu verstehen. Als Flasher gibt es für mich nur Pixel und Positionsangaben wie x und y.
    Ich möchte ein kleines Spiel im MasterMind-Stil umsetzen, um Android-Anwendungs-Programmierung zu lernen.
    Um mir erstmal die Logik und das Handling des Games zu überlegen, habe ich eine sehr rohen Prototypen des Spiels mit Flash entwickelt. Dieser ist hier spielbar:

    http://einspunktnull.net/tmp/mastermind/
    Die farbigen Knöpfe werden per DragAndDrop auf das Spielbrett gezogen und wenn alle Plätze einer Reihe belegt sind, lässt sich die Reihge per klick auf den unteren Button lösen. Eine "Neues Spiel"-Funktion gibt im Flash-Prototypen nicht. Man muss für ein neues Spiel die Seite erneut laden.


    Zu meinem Problem:
    Ich jetzt schon seit Tagen am Layout fest und komme damit gar nicht klar.
    Der Hintergrund ist egal, der wird ja per android:background="@drawable/background
    [FONT=Times New Roman, serif]automatisch skaliert.
    [/FONT]

    Aber wie muss ich den das Layout definieren, dass...


    1. die grafischen Elemente (Spielbrett, Spielfiguren und Button) absolut, wie im FlashPrototypen positioniert sind?
    2. diese Elemente eine Einheit bilden, die bei verschiedenen Screenauflösungen und Seitenverhältnissen entsprechend proportional skaliert und immer mittig zentriert wird (siehe Grafik unten)?
    3. ich die Spielfiguren innerhalb des gesamten Screens Draggen und Droppen kann?
    Für Anregungen, Codeschnipsel und Ideen wäre ich sehr dankbar.
    [​IMG]
     
    Zuletzt bearbeitet: 22.02.2011
  2. einspunktnull, 22.02.2011 #2
    einspunktnull

    einspunktnull Threadstarter Neuer Benutzer

    Beiträge:
    8
    Erhaltene Danke:
    0
    Registriert seit:
    21.02.2011
    Ok. Ich glaube, eine (nicht unbedingt schöne, dennoch funktionierende) Lösung gefunden zu haben. Als Content-View der Activity verwende ich eine "CustomView" namens BoardView. Im folgenden Beispiel sind die bunten Stecker mit im Resource-Bild integriert. Der Button müsste ebenfalls noch mit in der View verwurstelt werden.


    Code:
    package net.einspunktnull.minilogi;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.util.Log;
    import android.view.MotionEvent;
    import android.view.View;
    
    public class BoardView extends View
    {
    
        private final Bitmap mBoardBmp = BitmapFactory.decodeResource(getResources(), R.drawable.board);
        private Bitmap mBoard;
        private int mHeight = 0;
        private int mWidth = 0;
        private int mX = 0;
        private int mY = 0;
    
        public BoardView(Context context)
        {
            super(context);
        }
    
        @Override
        protected void onDraw(Canvas canvas)
        {
            // draw BG
            this.setBackgroundResource(R.drawable.background);
    
            // Create/setSizeAndPosition/draw the BoardBitmap
            mBoard = Bitmap.createScaledBitmap(mBoardBmp, mWidth, mHeight, false);
            canvas.drawBitmap(mBoard, mX, mY, null);
        }
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh)
        {
            // Calculate Bounds
            float bmpAR = (float) mBoardBmp.getWidth() / (float) mBoardBmp.getHeight();
            float screenAR = (float) w / (float) h;
    
            if (bmpAR > screenAR)
            {
                mWidth = w;
                mHeight = (int) (mWidth / bmpAR);
            }
            else
            {
                mHeight = h;
                mWidth = (int) (mHeight / screenAR);
            }
    
            mX = w/2 - mWidth / 2;
            mY = h/2 - mHeight / 2;
    
            super.onSizeChanged(w, h, oldw, oldh);
        }
    
        
    }
     
    Zuletzt bearbeitet: 22.02.2011

Diese Seite empfehlen