2015-05-07 3 views
11

Ich möchte zeichnen ein Diagramm genau wie das Bild an, aber ich habe Probleme beim Zeichnen der roten vertikalen Rechteck auf der rechten Seite zusammen mit anderen Objekten auf der Oberseite. Die größte Sorge ist die mit zahlreichen unterschiedlichen Bildschirmgrößen von Android-Geräten zu tun. Ich verstehe vollkommen, was ich während des Prozesses erreichen möchte, einschließlich der folgenden Ziele. Jede Hilfe würde sehr geschätzt werden.Zeichne Multi-Objekt-Diagramm in Fragment

  • 1 rotes Rechteck auf jeder Seite des Bildschirms (rechte Seite ich weiß nicht, wie es zu ziehen)
  • 7 graue Kästen in zwischen den roten müssen vertikale Rechtecken in der Breite
  • gleich sein eine schwarze vertikale Linie muss zwischen den Rechtecken sein wie in der Abbildung oben
  • ein Textfeld mit einer Nummer muss in der Mitte jedes grauen Rechteck zusammen mit kleinen roten
  • Ich möchte auch in der Lage sein um das Diagramm in Zukunft wiederzuverwenden, damit ich die kleinen Kästchen immer mit Rot oder Schwarz füllen kann wollen

enter image description here

Layout-

<?xml version="1.0" encoding="utf-8"?> 
    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <my.package.name.ComplexDiagram 
      android:layout_width="match_parent" 
      android:layout_height="65dp" 
      android:layout_centerVertical="true" 
      /> 
    </RelativeLayout> 

Java

import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.RectF; 
import android.util.AttributeSet; 
import android.view.View; 

public class ComplexDiagram extends View { 


    private int measuredWidth, measuredHeight; 
    private Paint mGreyRectPaint, mBlackLinePaint, mRedRectPaint; 
    private RectF mGreyRect, mBlackLineF, mRedRectF; 


    public ComplexDiagram(Context context) { 
     super(context); 
     init(context, null, 0); 
    } 

    public ComplexDiagram(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(context, attrs, 0); 
    } 

    public ComplexDiagram(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(context, attrs, defStyleAttr); 
    } 

    private void init(Context context, AttributeSet attributeSet, int defStyle) { 

     mGreyRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mGreyRectPaint.setColor(0xFF3C3C3C); 
     mGreyRectPaint.setStyle(Paint.Style.FILL); 

     mBlackLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mBlackLinePaint.setColor(0xFF000000); 
     mBlackLinePaint.setStyle(Paint.Style.FILL); 

     mRedRectPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mRedRectPaint.setColor(0xFFCC3333); 
     mRedRectPaint.setStyle(Paint.Style.FILL); 
    } 


    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
     measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); 
     measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); 

     setMeasuredDimension(measuredWidth, measuredHeight); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 

     if (measuredHeight == 0 || measuredWidth == 0) 
      return; 

     canvas.drawRect(mGreyRect, mGreyRectPaint); 
     canvas.drawRect(mBlackLineF, mBlackLinePaint); 
     canvas.drawRect(mRedRectF, mRedRectPaint); 
    } 
} 
+0

Do Box 1 und 7 müssen 6 Rechtecke haben, oder können sie verwenden 8 wie der Rest von ihnen? –

+0

Sie müssen 6 genau wie im Bild gesehen haben. Es gibt noch andere Zeichnungen, die ich gerne machen würde. Ich denke, wir sollten das im Chat besprechen, damit ich sie dir zeigen kann. :-) – MacaronLover

+0

@BojanKseneman Mir wurde gesagt, dass ich die Aktivität nicht mit Ansichten überladen soll und dass es besser in 1 Klasse gemacht wird. Ich denke eher an die "1-Klasse" -Methode, aber ich würde beide Methoden gezeichnet sehen und aus den 2 Optionen auswählen. – MacaronLover

Antwort

5

es tun auf diese Weise

Setzen Sie diese in Ihrem XML-

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:orientation="horizontal" > 

    <View 
     android:layout_width="5dp" 
     android:layout_height="wrap_content" 
     android:background="#CC3333" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="1" 
      android:textColor="@android:color/black" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:id="@+id/box1" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box2" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box1" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box3" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box4" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box4" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="#CC3333" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="2" 
      android:textColor="@android:color/black" /> 

     <View 
      android:id="@+id/box5" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box6" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box5" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box7" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box8" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box8" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:id="@+id/box1" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box2" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box1" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box3" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box4" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box4" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="3" 
      android:textColor="@android:color/black" /> 

     <View 
      android:id="@+id/box5" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box6" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box5" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box7" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box8" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box8" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:id="@+id/box1" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box2" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box1" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box3" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box4" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box4" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="4" 
      android:textColor="@android:color/black" /> 

     <View 
      android:id="@+id/box5" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box6" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box5" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box7" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box8" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box8" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:id="@+id/box1" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box2" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box1" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box3" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box4" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box4" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="5" 
      android:textColor="@android:color/black" /> 

     <View 
      android:id="@+id/box5" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box6" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box5" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box7" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box8" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box8" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:id="@+id/box1" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="1dp" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box2" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box1" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box3" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box4" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box4" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="6" 
      android:textColor="@android:color/black" /> 

     <View 
      android:id="@+id/box5" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box6" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginLeft="2dp" 
      android:layout_toRightOf="@+id/box5" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box7" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_marginRight="2dp" 
      android:layout_toLeftOf="@+id/box8" 
      android:background="@drawable/red_background" /> 

     <View 
      android:id="@+id/box8" 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="wrap_content" 
     android:background="#1D1D1D" /> 

    <RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:layout_marginRight="1dp" 
      android:background="@drawable/red_background" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="7" 
      android:textColor="@android:color/black" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/red_background" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:layout_marginRight="1dp" 
      android:background="@drawable/red_background" /> 
    </RelativeLayout> 

    <View 
     android:layout_width="5dp" 
     android:layout_height="wrap_content" 
     android:background="#CC3333" /> 

</LinearLayout> 

für rot rectangle.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <solid android:color="@android:color/transparent" /> 

    <stroke 
     android:width="1dip" 
     android:color="#CC3333" /> 

</shape> 
+0

Kennen Sie eine richtige Lösung zum Lösen [dieses andere Problem programmgesteuert (in Java mit Canvas nicht XML)] (http://stackoverflow.com/questions/32037260/how-to-add-rectangles-on-top- von-Existing-Rectangle-in-Canvas)? Ich habe monatelang versucht, dieses Problem zu lösen, aber ich hatte kein Glück und die Antworten, die gegeben wurden, lösen das Problem auch nicht. – MacaronLover