Erstellen einer Dreiecksform mithilfe von XML-Definitionen?

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

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

<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

Sie können hier weitere Optionen erhalten.

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

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>

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>

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

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:

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>

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>

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:

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

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>

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:

Hoffe das hilft, viel Glück!

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.

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

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

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

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

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.

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

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

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.

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>

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

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.