Erstellen einer Dreiecksform mithilfe von XML-Definitionen?

133

Gibt es eine Möglichkeit, eine Dreiecksform in einer XML-Datei anzugeben?

<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>

Können wir das mit einer Pfadform oder so machen? Ich brauche nur ein gleichseitiges Dreieck.

Vielen Dank

user291701
quelle
Haben Sie eine Lösung gefunden? Ich habe das gleiche Problem.
Mike Bevz
Dies scheint für den Typ funktioniert zu haben, der die Anleitung geschrieben hat (und einige Kommentatoren): Android: Zeichnen Sie gleichseitige Dreiecksformen in Leinwand
Diegum

Antworten:

166

In diesem Beitrag beschreibe ich, wie es geht. Und hier ist das XML-definierende Dreieck:

<?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>

Lesen Sie meinen Beitrag, wenn etwas unklar ist oder Sie eine Erklärung benötigen, wie es aufgebaut ist. Es ist ein ausgeschnittenes Rechteck gedreht :) Es ist eine sehr intelligente und gut funktionierende Lösung.

BEARBEITEN: um einen Pfeil zu erstellen, der zeigt wie -> verwenden:

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

Und um einen Pfeil wie <zu erstellen, verwenden Sie:

android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%" >
Jacek Milewski
quelle
3
Es tut mir leid ... aber ein gleichseitiges Dreieck kann niemals ein rechtwinkliges Dreieck sein.
Lilbyrdie
3
@JacekMilewski - vielen Dank! Möchten Sie mitteilen, welche PivotX / PivotY-Parameter für einen Abwärtspfeil gelten? Links? Richtig?
Johnny Lambada
2
Um es zu drehen, ändere ich die Drehung in der Layout-XML-Datei, nicht in der Dreiecksdefinition selbst.
Jacek Milewski
1
-1. Das ist nicht gut Die tatsächlichen Abmessungen der Ansicht sind größer als die auf dem Bildschirm angezeigten. Es hätte die Grenzen umwickeln sollen.
Javanator
1
Können Sie uns bitte mitteilen, wie Sie Ihre Werte für fromDegrees, toDegrees, pivotX und pivotY abgeleitet haben? Ich habe einen Anwendungsfall, in dem es nicht möglich ist, die Drehung in der Layoutdatei zu ändern.
Patrick Brennan
82
<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

Sie können hier weitere Optionen erhalten.

Elhanan Mishraky
quelle
3
Wie setzen Sie diesen Wert in XML?
user531069
2
Kopieren Sie diese Textansicht und fügen Sie sie in Ihre XML ein
Elhanan Mishraky
6
@ user531069: setzen Sie dies auf Ihre strings.xml:<string name="bottom_arrow">&#9660;</string>
1
Ich möchte einen anderen Pfeil als der Link. Ich kopiere und füge & # 129032; Als Text zeigt es ein unbekanntes Zeichen. ?
M. Usman Khan
2
Diese Lösung führt zu einem neuen Problem beim Umgang mit dem Auffüllen von Schriftarten in der Textansicht.
Salman Khakwani
59

Sie können verwenden vector, um Dreieck wie dieses zu machen

ic_triangle_right.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:pathData="M0,12l0,12 11.5,-5.7c6.3,-3.2 11.5,-6 11.5,-6.3 0,-0.3 -5.2,-3.1 -11.5,-6.3l-11.5,-5.7 0,12z"
        android:strokeColor="#00000000"
        android:fillColor="#000000"/>
</vector>

Dann benutze es wie

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_triangle_right"
    />

Verwenden Sie zum Ändern der Farbe und Richtung android:tintundandroid:rotation

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_triangle_right"
    android:rotation="180" // change direction
    android:tint="#00f" // change color
    />

Ergebnis

Geben Sie hier die Bildbeschreibung ein

Um die Form des Vektors zu ändern, können Sie die Breite / Höhe des Vektors ändern. Beispiel ändern Sie die Breite auf 10dp

<vector 
        android:width="10dp"
        android:height="24dp"
        >
       ...
</vector>

Geben Sie hier die Bildbeschreibung ein

Phan Van Linh
quelle
Danke, ich weiß nicht wirklich, wie diese Vektoren funktionieren. Ich brauchte das Ergebnis
Hossein Shahdoost
Wie kann ich die Größe dieser Dreiecke vergrößern und verkleinern? Durch Angabe von Höhe und Breite funktioniert es nicht
Aayushi
46

Sie können Vektorzeichnungen verwenden .

Wenn Ihre Mindest-API unter 21 liegt, erstellt Android Studio zum Zeitpunkt der Erstellung automatisch PNG-Bitmaps für diese niedrigeren Versionen (siehe Vector Asset Studio ). Wenn Sie die Support-Bibliothek verwenden, verwaltet Android sogar "echte Vektoren" bis hin zu API 7 (mehr dazu im Update dieses Beitrags unten).

Ein rotes nach oben zeigendes Dreieck wäre:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#FF0000"
            android:pathData="m 50,0 l 50,100 -100,0 z" />
    </group>
</vector>

Fügen Sie es Ihrem Layout hinzu und denken Sie daran, clipChildren = "false" zu setzen, wenn Sie das Dreieck drehen.

<?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:clipChildren="false">

    <ImageView
        android:layout_width="130dp"
        android:layout_height="100dp"
        android:rotation="0"
        android:layout_centerInParent="true"
        android:background="@drawable/triangle"/>

</RelativeLayout>

Geben Sie hier die Bildbeschreibung ein

Ändern Sie die Größe (Breite / Höhe) des Dreiecks, indem Sie die Attribute Ansichten layout_width / layout_height festlegen. Auf diese Weise können Sie auch ein gleichseitiges Triagle erhalten, wenn Sie die Mathematik korrekt ausführen.

UPDATE 25.11.2017

Wenn Sie die Unterstützungsbibliothek verwenden, können Sie bereits in API 7 echte Vektoren (stattdessen bei der Erstellung von Bitmaps) verwenden . Einfach hinzufügen:

vectorDrawables.useSupportLibrary = true

defaultConfigMachen Sie das in Ihrem Modul build.gradle.

Stellen Sie dann das Zeichen (vector xml) wie folgt ein:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/triangle" />

Alles ist sehr gut auf der Vector Asset Studio- Seite dokumentiert .

Seit dieser Funktion arbeite ich völlig ohne Bitmaps in Bezug auf Symbole. Dies reduziert auch die APK-Größe erheblich.

Oliver Metz
quelle
1
poste
1
+1 vectorDrawables.useSupportLibrary = truehat den zusätzlichen Vorteil, dass Sie colors.xmldie in definierten Farben verwenden können , da Bitmaps während der Erstellung erstellt werden (wenn die definierten Farben nicht verfügbar sind).
Rob
39

In diesem Fall würde ich auf jeden Fall eine Ansicht implementieren:

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 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;

        Path path = new Path();
        path.moveTo( w, 0);
        path.lineTo( 2 * w , 0);
        path.lineTo( 2 * w , w);
        path.lineTo( w , 0);
        path.close();

        Paint p = new Paint();
        p.setColor( Color.RED );

        canvas.drawPath(path, p);
    }
}

Verwenden Sie es in Ihren Layouts wie folgt:

<TriangleShapeView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff487fff">
</TriangleShapeView>

Wenn Sie diese Implementierung verwenden, erhalten Sie das folgende Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Peter
quelle
<com.your.path.to.view.TriangleShapeView ... />
arbeitete
das ist großartig. Wie kann ich die Dreiecksfarbe ändern? Angenommen, die ursprüngliche Farbe ist grau, ändert sich jedoch bei onTouch oder onClick in rot.
Fshamri
Dies ist viel besser als der Hack in XML
Dorsz
@ Peter Hallo. Kannst du mir mit kleinen Verbesserungen helfen? Ich brauche eine obere rechte Ecke, um abgerundet zu sein. Wie kann ich das erreichen?
Barterio
1
Wie würde ich Text innerhalb des Dreiecks hinzufügen?
Sakiboy
38

Die Lösung von Jacek Milewski funktioniert für mich und basierend auf seiner Lösung können Sie Folgendes verwenden, wenn Sie ein umgekehrtes Dreieck benötigen:

<?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>
Senechaux
quelle
-1 Auf diese Weise können Sie kein gleichseitiges Dreieck erhalten. Und überhaupt, es hat viele potenzielle Probleme, dh. stackoverflow.com/questions/20805826/…
j_kubik
21

Siehe Antwort hier: Benutzerdefinierte Pfeile ohne Bild: Android

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="32dp"
        android:height="24dp"
        android:viewportWidth="32.0"
        android:viewportHeight="24.0">
    <path android:fillColor="#e4e4e8"
          android:pathData="M0 0 h32 l-16 24 Z"/>
</vector>

Pfeil

zed
quelle
11

Darf ich Ihnen helfen, ohne XML zu verwenden?


Einfach,

Benutzerdefiniertes Layout (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;
    }
}

Ihre Aktivität (Beispiel):

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));
    }
}

Arbeitsbeispiel:

Geben Sie hier die Bildbeschreibung ein


Eine weitere absolut einfache CalculateFunktion, die Sie interessieren könnte ..

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;
}
Ahmed Ghoneim
quelle
11
+1 Ja, das kannst du. Und danke dir. Neben OP gibt es noch andere Leute, die nach einer Lösung suchen, die nicht speziell nach XML fragen - wie ich.
Johndodo
1
onDraw wird nicht für Klassen aufgerufen, die von ViewGroup abgeleitet sind, und ist nicht standardmäßig. Sie müssen entweder das Zeichnen mit setWillNotDraw (false) aktivieren oder stattdessen von einer Ansicht erben.
Blago
11

Mit Vektor zeichnen:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
   android:viewportWidth="24.0"
   android:viewportHeight="24.0">
   <path
        android:pathData="M0,0 L24,0 L0,24 z"
        android:strokeColor="@color/color"
        android:fillColor="@color/color"/>
</vector>

Geben Sie hier die Bildbeschreibung ein

Zygi
quelle
Mit Lund zam Ende mein Problem behoben, danke!
Oxied
6

Für diejenigen, die einen rechtwinkligen Dreieckspfeil wollen, hier geht's:

SCHRITT 1: Erstellen Sie eine zeichnbare XML-Datei, kopieren Sie den folgenden XML-Inhalt und fügen Sie ihn in Ihr zeichnbares XML ein. (Bitte beachten Sie, dass Sie für Ihre zeichnbare XML-Datei einen beliebigen Namen verwenden können. In meinem Fall nenne ich sie "v_right_arrow".)

<?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="15%"
            android:pivotY="-36%" >
            <shape
                android:shape="rectangle"  >
                <stroke android:color="@android:color/transparent" android:width="1dp"/>
                <solid
                    android:color="#000000"  />
            </shape>
        </rotate>
    </item>
</layer-list>

SCHRITT 2: Erstellen Sie im XML Ihres Layouts eine Ansicht und binden Sie den Hintergrund an das zeichnbare XML, das Sie gerade in SCHRITT 1 erstellt haben . In meinem Fall binde ich v_right_arrow an die Hintergrundeigenschaft meiner Ansicht.

<View
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/v_right_arrow">
</View>

Beispielausgabe:

Geben Sie hier die Bildbeschreibung ein

Hoffe das hilft, viel Glück!

Chong Chern Dong
quelle
6

Sie können das folgende Dreieck im Hintergrund mit der folgenden XML-Datei hinzufügen

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#848af8"
            android:pathData="M 0,20 L 0,0 L 100,0 L 100,20 L 54,55  l -1,0.6  l -1,0.4  l -1,0.2  l -1,0   l -1,-0  l -1,-0.2  l -1,-0.4  l -1,-0.6    L 46,55   L 0,20 -100,-100 Z" />
    </group>
</vector>

Die gesamte Logik zum Anpassen des XML-Designs ist in pathData. Betrachten Sie oben links als (0,0) und gestalten Sie das Layout gemäß Ihren Anforderungen. Überprüfen Sie diese Antwort.

Sanjay Sharma
quelle
4
<?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>
Arunkumar
quelle
4
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <rotate
                android:fromDegrees="45"
                android:pivotX="135%"
                android:pivotY="1%"
                android:toDegrees="45">
                <shape android:shape="rectangle">
                    <stroke
                        android:width="-60dp"
                        android:color="@android:color/transparent" />
                    <solid android:color="@color/orange" />
                </shape>
            </rotate>
        </item>
    </layer-list>
Shivam Kumar
quelle
3

Ich habe dies noch nie getan, aber soweit ich weiß, können Sie die PathShape-Klasse verwenden: http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html

Justin
quelle
2
Wie verwende ich die Pfadform in XML?
Sebastian Roth
Dies war hilfreich, um das richtige Teil für die Verwendung zu finden, bietet jedoch nicht genügend Erklärungen zur Verwendung. Trotzdem danke.
Navarr
Tut mir leid, Sebastian und Navarr ... Ich habe in meiner Antwort angegeben, dass ich es nie benutzt habe, daher bin ich mir nicht sicher, wie ich es verwenden soll. Dies scheint nur die Klasse zu sein, die die Arbeit erledigen würde. Ich stimme jedoch zu, dass es nicht genügend Dokumentation dafür gibt.
Justin
3
PathShape scheint keine XML-Syntax zugeordnet zu haben. Das XML Shape-Tag unterstützt nur Rechtecke, Ovale, Linien und Ringe. developer.android.com/guide/topics/resources/…
Nilzor
3

Ich bin zu spät zum Feiern und bin auf dasselbe Problem gestoßen. Google hat mich als erstes Ergebnis auf diesen StackOverflow-Thread hingewiesen.

Ich habe versucht, mithilfe der XML-Methode ein Dreieck hinzuzufügen und ein Problem herauszufinden, dass die Dreiecksform über den XML-Ansatz mehr Platz beansprucht, als es scheint.

Siehe Screenshot mit aktivierten Layoutgrenzen

Geben Sie hier die Bildbeschreibung ein

So entstand diese benutzerdefinierte Ansichtsklasse, die Dreiecke eines der folgenden Typen zeichnen kann: -

  1. nach oben zeigen
  2. nach unten zeigen
  3. links zeigend &
  4. nach rechts zeigen

asas

package com.hiteshsahu.materialupvotewidget;    
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.view.View;

public class TriangleShapeView extends View {

    private int colorCode = Color.DKGRAY;

    public int getColorCode() {
        return colorCode;
    }

    public void setColorCode(int colorCode) {
        this.colorCode = colorCode;
    }

    public TriangleShapeView(Context context) {
        super(context);
        if (isInEditMode())
            return;
    }

    public TriangleShapeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (isInEditMode())
            return;
    }

    public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        if (isInEditMode())
            return;
    }


    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int w = getWidth() / 2;
        int h = getHeight() / 2;

        //Choose what type of triangle you want here
        Path path = getLeftTriangle(w, h);

        path.close();
        Paint p = new Paint();
        p.setColor(colorCode);
        p.setAntiAlias(true);

        canvas.drawPath(path, p);
    }

    @NonNull
    /**
     * Return Path for down facing triangle
     */
    private Path getInvertedTriangle(int w, int h) {
        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(w, 2 * h);
        path.lineTo(2 * w, 0);
        path.lineTo(0, 0);
        return path;
    }

    @NonNull
    /**
     * Return Path for Up facing triangle
     */
    private Path getUpTriangle(int w, int h) {
        Path path = new Path();
        path.moveTo(0, 2 * h);
        path.lineTo(w, 0);
        path.lineTo(2 * w, 2 * h);
        path.lineTo(0, 2 * h);
        return path;
    }

    @NonNull
    /**
     * Return Path for Right pointing triangle
     */
    private Path getRightTriangle(int w, int h) {
        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(2 * w, h);
        path.lineTo(0, 2 * h);
        path.lineTo(0, 0);
        return path;
    }

    @NonNull
    /**
     * Return Path for Left pointing triangle
     */
    private Path getLeftTriangle(int w, int h) {
        Path path = new Path();
        path.moveTo(2 * w, 0);
        path.lineTo(0, h);
        path.lineTo(2 * w, 2 * h);
        path.lineTo(2 * w, 0);
        return path;
    }
}

Sie können es einfach in einem XML-Layout wie diesem verwenden

 <com.hiteshsahu.materialupvote.TriangleShapeView
            android:layout_width="50dp"
            android:layout_height="50dp"></com.hiteshsahu.materialupvote.TriangleShapeView>

Ich weiß, dass OP Lösungen in XML-Lösung will, aber wie ich auf ein Problem mit dem XML-Ansatz hingewiesen habe. Ich hoffe es könnte jemandem helfen.

Hitesh Sahu
quelle
2

Mit der Lösung von Jacek Milewski habe ich einen orientierten Abwärtswinkel mit transparentem Hintergrund erstellt.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="135"
            android:pivotX="65%"
            android:pivotY="20%"
            android:toDegrees="135"
            >
            <shape android:shape="rectangle">
                <stroke
                    android:width="1dp"
                    android:color="@color/blue"
                    />
                <solid android:color="@color/transparent" />
            </shape>
        </rotate>
    </item>
</layer-list>

Sie können den Winkel ändern android:pivotXund android:pivotYverschieben.

Verwendung:

<ImageView
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:src="@drawable/ic_angle_down"
    />

Geben Sie hier die Bildbeschreibung ein

Die Parameter hängen von der Größe des Bildes ab. Wenn Sie beispielsweise ImageViewdie Größe 100dp * 80dp haben, sollten Sie die folgenden Konstanten verwenden:

<rotate
    android:fromDegrees="135"
    android:pivotX="64.5%"
    android:pivotY="19%"
    android:toDegrees="135"
    >

Geben Sie hier die Bildbeschreibung ein

CoolMind
quelle
2

Ich versuche, ein Dreiecksbild wie die Zurück-Schaltfläche der Android-Navigationsleiste zu erstellen, habe aber keine Lösung gefunden.

Jetzt habe ich die Lösung mit mir selbst gefunden und möchte sie teilen.

Dreieck Navigationsleiste Android

benutze xml unten

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:bottom="20dp"
    android:left="480dp"
    android:right="60dp"
    android:top="20dp">
    <shape>
        <size android:width="60dp" />
        <corners android:radius="80dp"/>
        <solid android:color="#AAA" />
    </shape>
</item>
<item
    android:bottom="480dp"
    android:right="70dp"
    android:top="20dp">
    <rotate
        android:fromDegrees="-28"
        android:pivotX="96%"
        android:pivotY="50%"
        android:toDegrees="-20">
        <shape>
            <corners android:radius="80dp"/>
            <size android:height="60dp" />
            <solid android:color="#AAA" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="20dp"
    android:right="70dp"
    android:top="480dp">
    <rotate
        android:fromDegrees="28"
        android:pivotX="96%"
        android:pivotY="50%"
        android:toDegrees="-20">
        <shape>
            <corners android:radius="80dp"/>
            <size android:height="60dp" />
            <solid android:color="#AAA" />
        </shape>
    </rotate>
</item>

Rattisuk
quelle
0
  <LinearLayout
        android:id="@+id/ly_fill_color_shape"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@drawable/shape_triangle"
        android:gravity="center"
        android:orientation="horizontal" >
    </LinearLayout>

<item>
    <rotate
        android:fromDegrees="45"
        android:pivotX="-15%"
        android:pivotY="77%"
        android:toDegrees="45" >
        <shape android:shape="rectangle" >
            <stroke
                android:width="2dp"
                android:color="@color/black_color" />

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

            <padding android:left="1dp" />
        </shape>
    </rotate>
</item>
<item android:top="200dp">
    <shape android:shape="line" >
        <stroke
            android:width="1dp"
            android:color="@color/black_color" />

        <solid android:color="@color/white" /> 
    </shape>
</item>

Kena Patel
quelle
-1 Auf diese Weise können Sie kein gleichseitiges Dreieck erhalten. Und überhaupt, es hat viele potenzielle Probleme, dh. stackoverflow.com/questions/20805826/…
j_kubik
0

Google stellt ein gleichseitiges Dreieck hier .
Wählen Sie VectorDrawable, damit die Größe flexibel ist.
Es ist als Plugin in Android Studio integriert.

Wenn Sie ein SVG - Bild haben, können Sie diese , es auch zu VectorDrawable konvertieren.

Sobald Sie ein VectorDrawable haben, ist es einfach, seine Farbe und Drehung zu ändern, wie andere bereits erwähnt haben.

ericn
quelle