Grafikpositionierung in einer App

huebstAr · 2012-12-07T20:08:26+0100

Hallo zusammen!

Ich bin gerade dabei mich etwas in die Androidprogrammierung einzuarbeiten.
Dazu habe ich mir zunächst als Pojekt überlegt, einen Teil der App
Electrodroid nachzubauen - genauer die Widerstandsapp.

Kleine Erklärung:
Durch Anklicken der Images im unteren Bildschirmteil wird der entsprechende Farbring
oben auf den Widerstand gelegt und der Wert des Widerstandes berechnet.
Zunächst beschränke ich mich dabei auf 4 Farbringe.

Mein Problem ist nun folgendes:
Wie bekomme ich es hin, einen Farbring an die entsprechende Stelle zu legen?

Mein Ansatz dafür ist, dass ich für jede Farbe einen Strich in der entsprechenden Farbe
als Bild abgespeichert habe.
Nun wollte mittels dem OnClickListener von einem Imageview oben den Farbring quasi
auf das Widerstandsbild legen - der richtige Weg?

Gibt es die Möglichkeit, den Ring vielleicht zunächst vertikal zu zentrieren und anschließend
nach Links oder Rechts zu verschieben?

Hier ist mal ein Screenshot der App, so wie sie bei mir aussieht im Moment:

Weiterhin:
Obere Teil der Layout-XML-Datei:

Code:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_height="fill_parent" 
	android:layout_width="fill_parent"
	android:background="#000000"
	android:layout_alignParentBottom="true"
	> 
    
<LinearLayout 
    android:layout_height="wrap_content"  
    android:layout_width="fill_parent" 
    android:layout_alignParentTop="true"
    android:layout_marginTop="2pt"
    android:id="@+id/r_line_resistor"
    android:weightSum="1.0"
    >  
        <ImageView
        android:id="@+id/resistor_cutting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/resistor_cutting"
        android:layout_weight="1" />	
</LinearLayout>

<LinearLayout 
    android:layout_height="wrap_content"  
    android:layout_width="fill_parent" 
    android:layout_marginTop="2pt"
    android:id="@+id/r_line_value"
    android:layout_below="@id/r_line_resistor"
    android:layout_marginBottom="2pt"
    >  
        <TextView 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:text="10 kOhm"
	    android:textSize="8pt"
	    android:id="@+id/text_ohmvalue"
		android:freezesText="true"
		android:clickable="false"
		android:gravity="center_vertical|center_horizontal"
		android:layout_marginTop="1pt"
		android:textColor="#FFFFFF"
	/>	
</LinearLayout>

Und hier ein Teil der aktuellen Java-Datei:

Code:

public class Resistoriz0r extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
        
        setContentView(R.layout.activity_resistoriz0r);
    
        ImageView blank_resistor = (ImageView) findViewById(R.id.resistor_cutting);
        
        ImageView image_set2_black = (ImageView) findViewById(R.id.image_m_black_2);
        ImageView image_set3_black = (ImageView) findViewById(R.id.image_m_black_3);
        
        ImageView image_set1_brown = (ImageView) findViewById(R.id.image_m_brown_1);
        ImageView image_set2_brown = (ImageView) findViewById(R.id.image_m_brown_2);
        ImageView image_set3_brown = (ImageView) findViewById(R.id.image_m_brown_3);
        ImageView image_set4_brown = (ImageView) findViewById(R.id.image_m_brown_4);
        
        ImageView image_set1_red = (ImageView) findViewById(R.id.image_m_red_1);
        ImageView image_set2_red = (ImageView) findViewById(R.id.image_m_red_2);
        ImageView image_set3_red = (ImageView) findViewById(R.id.image_m_red_3);
        ImageView image_set4_red = (ImageView) findViewById(R.id.image_m_red_4);        
        
        ImageView image_set1_orange = (ImageView) findViewById(R.id.image_m_orange_1);
        ImageView image_set2_orange = (ImageView) findViewById(R.id.image_m_orange_2);
        ImageView image_set3_orange = (ImageView) findViewById(R.id.image_m_orange_3);
  
        ImageView image_set1_yellow = (ImageView) findViewById(R.id.image_m_yellow_1);
        ImageView image_set2_yellow = (ImageView) findViewById(R.id.image_m_yellow_2);
        ImageView image_set3_yellow = (ImageView) findViewById(R.id.image_m_yellow_3);
        ImageView image_set4_yellow = (ImageView) findViewById(R.id.image_m_yellow_4);
        
        ImageView image_set1_green = (ImageView) findViewById(R.id.image_m_green_1);
        ImageView image_set2_green = (ImageView) findViewById(R.id.image_m_green_2);
        ImageView image_set3_green = (ImageView) findViewById(R.id.image_m_green_3);
        ImageView image_set4_green = (ImageView) findViewById(R.id.image_m_green_4);        
        
        ImageView image_set1_blue = (ImageView) findViewById(R.id.image_m_blue_1);
        ImageView image_set2_blue = (ImageView) findViewById(R.id.image_m_blue_2);
        ImageView image_set3_blue = (ImageView) findViewById(R.id.image_m_blue_3);
        ImageView image_set4_blue = (ImageView) findViewById(R.id.image_m_blue_4);
        
        ImageView image_set1_violett = (ImageView) findViewById(R.id.image_m_violett_1);
        ImageView image_set2_violett = (ImageView) findViewById(R.id.image_m_violett_2);
        ImageView image_set3_violett = (ImageView) findViewById(R.id.image_m_violett_3);
        ImageView image_set4_violett = (ImageView) findViewById(R.id.image_m_violett_4);
        
        ImageView image_set1_grey = (ImageView) findViewById(R.id.image_m_grey_1);
        ImageView image_set2_grey = (ImageView) findViewById(R.id.image_m_grey_2);
        ImageView image_set3_grey = (ImageView) findViewById(R.id.image_m_grey_3);
        ImageView image_set4_grey = (ImageView) findViewById(R.id.image_m_grey_4);
        
        ImageView image_set1_white = (ImageView) findViewById(R.id.image_m_white_1);
        ImageView image_set2_white = (ImageView) findViewById(R.id.image_m_white_2);
        ImageView image_set3_white = (ImageView) findViewById(R.id.image_m_white_3);
        
        ImageView image_set3_gold = (ImageView) findViewById(R.id.image_m_gold_3);
        ImageView image_set4_gold = (ImageView) findViewById(R.id.image_m_gold_4);
        
        ImageView image_set3_silver = (ImageView) findViewById(R.id.image_m_silver_3);
        ImageView image_set4_silver = (ImageView) findViewById(R.id.image_m_silver_4);
        
        image_set2_black.setOnClickListener(new OnClickListener() {
        	public void onClick(View v) 
        	{
        	// BLABLA
        	//Resistoriz0r.this.getResources().get 
	        	ImageView image_set2_black = (ImageView) findViewById(R.id.image_m_black_2);
	        	image_set2_black.setImageResource( R.drawable.m_red);
        	}
        	});
   
    }

Vielen Dank für eure Antworten im Vorraus!

Mike_SD · 2012-12-07T23:07:46+0100

Ich würd's anders machen und den Widerstand in 6 Teile zerschnippeln und die 6 Teile in ein horizontales LinearLayout packen.

Endstück - Ring 1 - Ring 2 - Ring 3 - Ring 4 - Endstück

Die ImageViews der Ringe zeigen anfangs farblose Ringe und werden dann bei Bedarf ausgetauscht. Wenn du die gleichen drawables verwenden willst, kannst du den Widerstand auch in 11 Teile zersägen mit 5 farblosen Zwischenstücken.

huebstAr · 2012-12-08T00:04:08+0100

Hi!

Hab's nun so gemacht:

Code:

<LinearLayout 
    android:layout_height="wrap_content"  
    android:layout_width="fill_parent" 
    android:layout_alignParentTop="true"
    android:layout_marginTop="2pt"
    android:id="@+id/r_line_resistor"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    >  
        <ImageView
        android:id="@+id/resistor_l"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/resistor_r"
        />	
        <ImageView
        android:id="@+id/resistor_mid1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r_resistor20"
        />
        <ImageView
        android:id="@+id/resistor_mid2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r_resistor20"
        />
        <ImageView
        android:id="@+id/resistor_mid3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/r_resistor20"
        />
        <ImageView
        android:id="@+id/resistor_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/resistor_l"
        />
</LinearLayout>

Danke für die klasse Idee!
Leider ist der Widerstand nun rechtsbündig, wie bekomme ich diesen zentriert?

Mike_SD · 2012-12-08T02:10:24+0100

Im LinearLayout android:gravity="center" hinzufügen, dann zentrieren sich die ImageViews selbst in diesem Layout.

huebstAr · 2012-12-09T18:28:48+0100

Super, du hast mir sehr geholfen!

Allerbesten Dank!

Quick results: Click search for more Results…

Grafikpositionierung in einer App

huebstAr

Neues Mitglied

Mike_SD

Ambitioniertes Mitglied

huebstAr

Neues Mitglied

Mike_SD

Ambitioniertes Mitglied

huebstAr

Neues Mitglied

Ähnliche Themen