2010-12-11 12 views
10

Ich lerne Android seit etwa zwei Wochen (Experte in as2/3).Android - Drehen eines ImageView mit Finger bewegt andere Ansichten um

I ein einfaches LinearLayout1, which contains an ImageView` erstellt haben, eine PNG einer Vinylschallplatte (nur eine kreisförmige Scheibe im Prinzip) enthält

I dieses ImageView eingerichtet haben gedreht werden, wenn der Benutzer einen Finger auf sie zieht, wie eine Schallplatte kratzen.

Mein Code scheint zu arbeiten (nicht sicher, ob es der beste Weg ist, aber es funktioniert). Das Problem ist, wenn die ImageView gedreht wird schiebt es andere Ansichten herum. Ich habe festgestellt, dass das ist, weil mein rundes Bild wirklich ein Quadrat mit transparenten Ecken ist. Es sind diese Ecken, die andere Ansichten herumschieben und dazu führen, dass sich der Datensatz von der linken Seite des Bildschirms wegbewegt, wenn ich die ImageView linksbündig habe.

Es gibt ein paar Versuche, dies online zu lösen, aber keiner von ihnen scheint zu sein, was ich brauche, und einige sind in Beispiele so robust verpackt, dass ich nicht erkennen kann, was ich davon am Anfang nehmen soll.

Wenn jemand etwas Licht auf etwas werfen könnte, was ich tun kann, um das zu lösen, das würde groß sein. Ich weiß, dass eine einfache Antwort vielleicht nicht existiert, aber denk daran, dass ich ein Java-Noob bin und halte es so einfach wie möglich! Vielen Dank im Voraus für jede Hilfe!

auch wenn mir jemand sagen kann, warum ich 50 von der Rotation subtrahieren muss, um die Aufzeichnung unter die genaue Stelle zu bewegen, die der Benutzer berührt, wäre das auch hilfreich! Sehen Sie dies in der Methode updateRotation().

Hier ist meine XML-Markup:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/baseView" 
    android:background="#FFFFFFFF" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <ImageView 
     android:id="@+id/turntable" 
     android:src="@drawable/turntable" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"/> 

</LinearLayout> 

und hier ist mein Java-Code:

package com.codingfiend.android.turntable; 

import android.app.Activity; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Canvas; 
import android.graphics.Matrix; 
import android.os.Bundle; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.Window; 
import android.widget.ImageView; 
import android.widget.TextView; 

public class Turntable extends Activity 
{ 
    View baseView; 
    ImageView turntable; 
    TextView bottomText; 

    @Override 
    public void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     requestWindowFeature(Window.FEATURE_NO_TITLE); 
     setContentView(R.layout.main); 

     baseView = (View)findViewById(R.id.baseView); 
     turntable = (ImageView)findViewById(R.id.turntable); 

     turntable.setOnTouchListener(onTableTouched); 
    } 

    public android.view.View.OnTouchListener onTableTouched = new android.view.View.OnTouchListener() 
    { 
     public boolean onTouch(View v, MotionEvent evt) 
     { 
      double r = Math.atan2(evt.getX() - turntable.getWidth()/2, turntable.getHeight()/2 - evt.getY()); 
      int rotation = (int) Math.toDegrees(r); 


      if (evt.getAction() == MotionEvent.ACTION_DOWN) 
      { 
       // 
      } 

      if (evt.getAction() == MotionEvent.ACTION_MOVE) 
      { 
       updateRotation(rotation); 
      } 

      if (evt.getAction() == MotionEvent.ACTION_UP) 
      { 
       // 
      } 

      return true; 
     } 
    }; 

    private void updateRotation(double rot) 
    { 
     float newRot = new Float(rot); 

     Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.turntable); 

     Matrix matrix = new Matrix(); 
     matrix.postRotate(newRot - 50); 

     Bitmap redrawnBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true); 
     turntable.setImageBitmap(redrawnBitmap); 
    } 
} 

EDIT

Dieses ein irritierendes Problem sein erweist sich. Es muss eine Möglichkeit geben, ein Bild zu drehen, das so groß oder größer ist als der Bildschirm, ohne dass es skaliert wird, sodass das gesamte Bild auf dem Bildschirm bleibt. Warum kann ein Teil des rotierenden Bildes nicht vom Bildschirm verschwinden? Sehr frustrierend. Ich habe versucht, die ImageView in ein FrameView zu wickeln, was teilweise geholfen hat. Jetzt kann ich andere Ansichten hinzufügen, die nicht betroffen sind, aber ich kann meine Disc immer noch nicht groß genug haben, weil es nicht erlaubt ist, die Bildschirmgrenzen zu überschreiten, wenn sie sich dreht. Ich verstehe nicht warum. Ich habe die Erweiterung ImageView noch nicht ausgecheckt. Irgendwelche anderen Gedanken würden noch geschätzt werden!

+1

+1 Gut gestellte Frage. Willkommen bei SO. – wheaties

Antwort

3

Eigentlich ist das, weil Sie versuchen, eine Ansicht in einem linearen Layout zu drehen. Und dadurch wird sein dedizierter Raum erweitert oder verkleinert.

Idee 1: versuchen Sie, ein Rahmenlayout zu verwenden und Ihre Ansicht darin drehen Idee 2: versuchen Sie eine benutzerdefinierte Ansicht Unterklasse und zeichnen Sie Ihre Drehscheibe in der OnDraw. Im Internet suchen Sie nach einem Kompass-Zeichenbeispiel für den Start.

+0

Danke, ich werde jetzt deinen Vorschlag versuchen. Sei bald zurück mit den Ergebnissen. – Ribs

+1

Die Verwendung eines Rahmenlayouts hat einen Teil des Problems gelöst, indem ich jetzt andere Ansichten hinzufügen kann, die nicht von der rotierenden ImageView betroffen sind, aber wenn ich das rotierende ImageView am Rand des Bildschirms habe oder es so breit wie der Bildschirm ist Das Bild wird beim Drehen immer noch an den Ecken herumgedrückt. – Ribs

+0

Eine Kombination aus Frame-Layout und einer benutzerdefinierten Ansichtsklasse mit überschriebenen onDraw() funktioniert. Es gibt immer noch ein paar unerwartete Verhaltensweisen, aber ich denke, dass das jetzt nichts mit der Frage zu tun hat. – Ribs

0

Fix Ihren imageview von

imageview.setScaleType(ScaleType.CENTER);

0

einfach und klar, nur einen Kreis Leinwand ziehen und das Bild, um das Foto canvas.The Leinwand hinzufügen, werden Ecken nicht hat. Verwenden Sie auch FrameLayout, um ein Bild übereinander zu legen, das wird Ihr Problem lösen