Android Comment créer un triangle et une forme de rectangle par programmation?
Comment pouvons-nous créer une forme de ballon comme ci-dessous? où nous pouvons changer la couleur de manière dynamique. 
Ici, il s'agit de XML pour triangle et rectangle. enregistrez-le dans un dossier pouvant être dessiné.
triangle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item >
<rotate
Android:fromDegrees="45"
Android:toDegrees="45"
Android:pivotX="-40%"
Android:pivotY="87%" >
<shape
Android:shape="rectangle" >
<stroke Android:color="@Android:color/transparent" Android:width="10dp"/>
<solid
Android:color="#000000" />
</shape>
</rotate>
</item>
</layer-list>
rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
<shape Android:shape="rectangle">
<solid Android:color="#B2E3FA" />
</shape>
</item>
</layer-list>
et layout pour la forme souhaitée.
<RelativeLayout
Android:id="@+id/rlv1"
Android:layout_width="150dp"
Android:layout_height="50dp"
Android:background="@drawable/rectangle" />
<RelativeLayout
Android:id="@+id/rlv2"
Android:layout_width="50dp"
Android:layout_height="50dp"
Android:layout_below="@+id/rlv1"
Android:background="@drawable/triangle"
Android:rotation="180" />
définir la marge en fonction de vos besoins.
Si vous voulez une bordure pour votre mise en page
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/linear_root"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:orientation="vertical"
>
<TextView
Android:id="@+id/text_message"
Android:layout_width="100dp"
Android:layout_height="wrap_content"
Android:background="@drawable/bg_rectangle"
Android:layout_marginLeft="20dp"
Android:layout_marginRight="20dp"
Android:layout_marginTop="20dp"
Android:padding="8dp"
Android:text="Abc"
/>
<ImageView
Android:id="@+id/image_arrow"
Android:layout_marginTop="-1.5dp"
Android:layout_width="16dp"
Android:layout_height="16dp"
Android:layout_gravity="center_horizontal"
Android:background="@drawable/icon_arrow_down"
/>
</LinearLayout>
bg_rectangle
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<solid Android:color="#eaeaea" />
<stroke
Android:width="1dp"
Android:color="#f00" />
<corners Android:radius="8dp" />
</shape>
icon_arrow_down , ou vous pouvez créer un triangle par un vecteur comme ici
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<rotate
Android:fromDegrees="45"
Android:pivotX="135%"
Android:pivotY="15%"
Android:toDegrees="45"
>
<shape Android:shape="rectangle">
<solid Android:color="#eaeaea"/>
<stroke
Android:width="1dp"
Android:color="#f00" />
</shape>
</rotate>
</item>
</layer-list>
La manière propre et correcte de procéder tout en conservant sa dynamique consiste à étendre la classe View.
Ensuite, dans le onDraw, vous feriez quelque chose comme ceci:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawBackground(canvas);
}
private void drawBackground(Canvas canvas) {
int width = (int) mWidth;
int height = (int) mHeight;
Point a = new Point(0, 0);
Point b = new Point(width, 0);
Point c = new Point(width, height - mPointHeight);//mPointedHeight is the length of the triangle... in this case we have it dynamic and can be changed.
Point d = new Point((width/2)+(mPointedHeight/2), height - mPointHeight);
Point e = new Point((width/2), height);// this is the sharp point of the triangle
Point f = new Point((width/2)-(mPointedHeight/2), height - mPointHeight);
Point g = new Point(0, height - mPointHeight);
Path path = new Path();
path.moveTo(a.x, a.y);
path.lineTo(b.x, b.y);
path.lineTo(c.x, c.y);
path.lineTo(d.x, d.y);
path.lineTo(e.x, e.y);
path.lineTo(f.x, f.y);
path.lineTo(g.x, g.y);
canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill.
}
Voilà, pas de superposition inutile ni de code non dynamique ni propre. Vous pouvez également ajouter le texte dans la zone aussi.
Créer une vue personnalisée et dessiner une traingle avec canvas
package com.example.dickbutt;
import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.Path;
import Android.util.AttributeSet;
import Android.view.View;
public class TriangleShapeView extends View {
public int colorCode = Color.Magenta;
public int getColorCode() {
return colorCode;
}
public void setColorCode(int colorCode) {
this.colorCode = colorCode;
}
public TriangleShapeView(Context context) {
super(context);
}
public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public TriangleShapeView(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int w = getWidth() / 2;
int h = getHeight() / 2;
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(w, 2 * h);
path.lineTo(2 * w, 0);
path.lineTo(0, 0);
path.close();
Paint p = new Paint();
p.setColor(colorCode);
p.setAntiAlias(true);
canvas.drawPath(path, p);
}
}
Résultat
Utilisation
<TextView
Android:id="@+id/progress_value"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentTop="true"
Android:layout_centerHorizontal="true"
Android:background="@Android:color/holo_purple"
Android:gravity="center_horizontal"
Android:text="200,0000000"
Android:textColor="#fff" />
<com.example.dickbutt.TriangleShapeView
Android:id="@+id/textView1"
Android:layout_width="10dp"
Android:layout_height="20dp"
Android:layout_below="@+id/progress_value"
Android:layout_centerHorizontal="true"
Android:background="@drawable/rectangle"
Android:gravity="center_horizontal"
Android:textSize="10sp" />
Avantages
- Changez de forme en fonction de la largeur et de la hauteur de vue.
- Très personnalisation possible.
- Regarder plus propre
Utilisez une image en triangle et une image rectangulaire et alignez-les mathématiquement dans le format mentionné ci-dessus. Utilisez le filtrage des couleurs pour modifier dynamiquement sa couleur.
Vous pouvez même les dessiner sur une vue personnalisée, à l'aide de graphiques vectoriels, à l'aide de couleurs personnalisées, ce qui serait un autre moyen de résoudre ce problème.
Vous pouvez d’abord créer un dossier xml dans le dossier drawable
Que xml sera responsable de la couleur de la bordure du rectangle
Vous pouvez créer une telle forme de bordure avec le code ci-dessous
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<shape Android:shape="rectangle">
<solid Android:color="#B2E3FA" />
</shape>
</item>
<item Android:left="5dp" Android:bottom="5dp" Android:top="5dp" >
<shape Android:shape="rectangle">
<solid Android:color="#D8D8D8" />
</shape>
</item>
</layer-list>
ainsi, cela créera une bordure requise en forme de rectangle, vous devez attribuer un arrière-plan de cette forme en rectangle avec ce dessin comme ceci
Android:background="@drawable/bg"
où bg est le nom du fichier XML qui a été enregistré dans un dossier pouvant être dessiné
Après cela, vous devez placer ce triangle exactement en dessous de l'objet rectangle.
J'espère que tu as compris ma logique