147 votes

Faire une forme de triangle en utilisant des définitions XML ?

Existe-t-il un moyen de spécifier une forme de triangle dans un fichier XML ?

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="triangle">
  <stroke android:width="1dip" android:color="#FFF" />
  <solid android:color="#FFF" />
</shape>

Peut-on faire cela avec une forme de chemin ou autre ? J'ai juste besoin d'un triangle équilatéral.

Merci

0 votes

Avez-vous trouvé une solution ? J'ai le même problème.

0 votes

Cela semble avoir fonctionné pour l'auteur du guide (et quelques commentateurs) : Android : Dessiner des formes de triangles équilatéraux dans Canvas

171voto

Jacek Milewski Points 754

En ce poste Je décris comment le faire. Et voici le triangle de définition 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="@color/transparent" android:width="10dp"/>
                <solid
                    android:color="@color/your_color_here" />
            </shape>
        </rotate>
    </item>
</layer-list>

Référez-vous à mon post si quelque chose n'est pas clair ou si vous avez besoin d'une explication sur la façon dont il est construit. Il s'agit d'une rotation et d'une découpe de rectangle :) c'est une solution très intelligente et qui fonctionne bien.

EDIT : pour créer une flèche pointant comme --> utiliser :

...
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="13%"
android:pivotY="-40%" >
...

Et pour créer une flèche pointant comme <-- utiliser :

android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%" >

4 votes

Je suis désolé mais un triangle équilatéral ne peut jamais être un triangle à angle droit.

3 votes

@JacekMilewski -- Merci beaucoup ! Pouvez-vous nous dire quels sont vos paramètres de pivotX/pivotY pour une flèche vers le bas ? A gauche ? A droite ?

2 votes

Pour le faire pivoter, je modifie la rotation dans le fichier xml de mise en page, et non dans la définition du triangle lui-même.

85voto

Elhanan Mishraky Points 178
<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""/>

Vous pouvez obtenir aquí plus d'options.

0 votes

C'est une bonne solution. C'est facile et propre et vous n'avez pas besoin de toucher aux drawables. De plus, il suffit de changer la couleur du triangle en utilisant le paramètre textColor.

3 votes

Comment mettre cette valeur en xml ?

2 votes

Copiez ce TextView et collez-le dans votre xml.

41voto

senechaux Points 189

El solution de Jacek Milewski fonctionne pour moi et, en se basant sur sa solution, si vous avez besoin d'un triangle inversé, vous pouvez utiliser ceci :

<?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="135%" 
            android:pivotY="15%">
            <shape android:shape="rectangle">    
                <solid android:color="@color/aquamarine" />
            </shape>
        </rotate>
    </item>
</layer-list>

0 votes

-1 De cette façon, vous ne pouvez pas obtenir de triangle équilatéral. Et de toute façon, il a beaucoup de problèmes potentiels, par exemple. stackoverflow.com/questions/20805826/

13voto

Ahmed Ghoneim Points 1844

Je peux vous aider ? sans en utilisant XML ?


Tout simplement,

Mise en page personnalisée ( Slice ) :

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.View;

public class Slice extends View {

    Paint mPaint;

    Path mPath;

    public enum Direction {
        NORTH, SOUTH, EAST, WEST
    }

    public Slice(Context context) {
        super(context);
        create();
    }

    public Slice(Context context, AttributeSet attrs) {
        super(context, attrs);
        create();
    }

    public void setColor(int color) {
        mPaint.setColor(color);
        invalidate();
    }

    private void create() {
        mPaint = new Paint();
        mPaint.setStyle(Style.FILL);
        mPaint.setColor(Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPath = calculate(Direction.SOUTH);
        canvas.drawPath(mPath, mPaint);
    }

    private Path calculate(Direction direction) {
        Point p1 = new Point();
        p1.x = 0;
        p1.y = 0;

        Point p2 = null, p3 = null;

        int width = getWidth();

        if (direction == Direction.NORTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y - width);
        } else if (direction == Direction.SOUTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y + width);
        } else if (direction == Direction.EAST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x - width, p1.y + (width / 2));
        } else if (direction == Direction.WEST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x + width, p1.y + (width / 2));
        }

        Path path = new Path();
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
    }
}

Votre activité (exemple) :

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class Layout extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Slice mySlice = new Slice(getApplicationContext());
        mySlice.setBackgroundColor(Color.WHITE);
        setContentView(mySlice, new LinearLayout.LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}

Exemple de travail :

enter image description here


Un autre exemple absolument simple Calculate fonction qui peut vous intéresser

private Path Calculate(Point A, Point B, Point C) {
    Path Pencil = new Path();
    Pencil.moveTo(A.x, A.y);
    Pencil.lineTo(B.x, B.y);
    Pencil.lineTo(C.x, C.y);
    return Pencil;
}

11 votes

+1 Oui, vous pouvez. Et je vous remercie. Il y a d'autres personnes que l'OP qui recherchent une solution et qui ne demandent pas spécifiquement le XML - tout comme moi.

1 votes

OnDraw ne sera pas appelé sur les classes qui dérivent de ViewGroup, pas par défaut. Vous devez soit activer le dessin par setWillNotDraw(false) ou hériter d'une View à la place.

4voto

Arunkumar Points 31
<?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="0dp"/>
                <solid
                    android:color="#fff" />
            </shape>
        </rotate>
    </item>
</layer-list>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X