Tworzysz kształt trójkąta za pomocą definicji xml?

133

Czy istnieje sposób, w jaki mogę określić kształt trójkąta w pliku 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>

czy możemy to zrobić z kształtem ścieżki czy czymś? Potrzebuję tylko trójkąta równobocznego.

Dzięki

user291701
źródło
Znalazłeś rozwiązanie? Mam ten sam problem.
Mike Bevz
Wygląda na to, że zadziałało to dla gościa, który napisał poradnik (i kilku komentatorów): Android: Draw Equilateral Triangle Shapes In Canvas
Diegum

Odpowiedzi:

166

W tym poście opiszę jak to zrobić. A oto trójkąt definiujący 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>

Zapoznaj się z moim postem, jeśli coś jest niejasne lub potrzebujesz wyjaśnienia, jak to jest zbudowane. Jest obrócony jak wycięty prostokąt :) Jest to bardzo sprytne i dobrze działające rozwiązanie.

EDYCJA: aby utworzyć strzałkę wskazującą jak -> użyj:

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

Aby utworzyć strzałkę wskazującą jak <- użyj:

android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%" >
Jacek Milewski
źródło
3
Przepraszam ... ale trójkąt równoboczny nigdy nie może być trójkątem prostokątnym.
lilbyrdie,
3
@JacekMilewski - wielkie dzięki! Chcesz podzielić się swoimi parametrami pivotX / pivotY dla strzałki w dół? Lewo? Dobrze?
JohnnyLambada,
2
Aby go obrócić, zmieniam obrót w pliku XML układu, a nie w samej definicji trójkąta.
Jacek Milewski
1
-1. To nie jest dobre. Rzeczywiste wymiary widoku są większe niż to, co pojawia się na ekranie. Powinien był załatwić granice.
Javanator
1
Czy możesz podzielić się, w jaki sposób uzyskałeś wartości dla fromDegrees, toDegrees, pivotX i pivotY? Mam przypadek użycia, w którym nie można zmienić obrotu w pliku układu.
Patrick Brennan
82
<TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="▼"/>

Można uzyskać tu więcej opcji.

Elhanan Mishraky
źródło
3
Jak umieścić tę wartość w XML?
user531069
2
Skopiuj ten TextView i wklej go do swojego xml
Elhanan Mishraky
6
@ user531069: umieść to na swoim <string name="bottom_arrow">&#9660;</string>
1
Chcę mieć inną strzałkę z linku, kopiuję i wklejam & # 129032; jako tekst pokazuje nieznany znak. ?
M. Usman Khan,
2
To rozwiązanie stwarza nowy problem z obsługą dopełnienia czcionek w widoku tekstu.
Salman Khakwani
59

Możesz użyć vectordo stworzenia takiego trójkąta

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>

Następnie użyj tego jak

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

Aby zmienić kolor i kierunek, użyj android:tintiandroid: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
    />

Wynik

wprowadź opis obrazu tutaj

Aby zmienić kształt wektora, możesz zmienić szerokość / wysokość wektora. Przykład zmień szerokość na 10 dp

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

wprowadź opis obrazu tutaj

Phan Van Linh
źródło
dziękuję, naprawdę nie wiem, jak działają te wektory. Potrzebowałem wyniku
Hossein Shahdoost
jak mogę zwiększyć i zmniejszyć rozmiar tych trójkątów?
Podanie
46

Możesz użyć rysunków wektorowych .

Jeśli minimalny interfejs API jest niższy niż 21, Android Studio automatycznie tworzy mapy bitowe PNG dla tych niższych wersji w czasie kompilacji (zobacz Vector Asset Studio ). Jeśli korzystasz z biblioteki wsparcia, Android zarządza nawet „prawdziwymi wektorami” aż do API 7 (więcej na ten temat w aktualizacji tego postu na dole).

Czerwony trójkąt skierowany w górę to:

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

Dodaj go do swojego układu i pamiętaj, aby ustawić clipChildren = "false", jeśli obrócisz trójkąt.

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

wprowadź opis obrazu tutaj

Zmień rozmiar (szerokość / wysokość) trójkąta, ustawiając atrybuty widoki layout_width / layout_height. W ten sposób możesz również otrzymać równoboczny triagle, jeśli poprawnie wykonasz matematykę.

AKTUALIZACJA 25.11.2017

Jeśli korzystasz z biblioteki wsparcia, możesz używać rzeczywistych wektorów (zamiast tworzenia bitmap) już w API 7 . Po prostu dodaj:

vectorDrawables.useSupportLibrary = true

Zrób swoje defaultConfig w pliku build.gradle swojego modułu.

Następnie ustaw (vector xml) drawable w następujący sposób:

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

Wszystko jest bardzo ładnie udokumentowane na stronie Vector Asset Studio .

Od czasu tej funkcji pracuję całkowicie bez bitmap pod względem ikon. Zmniejsza to również nieco rozmiar APK.

Oliver Metz
źródło
1
opublikuj link, a ktoś go dla ciebie
załaduje
1
+1 vectorDrawables.useSupportLibrary = truema tę dodatkową zaletę, że można używać kolorów zdefiniowanych w programie colors.xml, ponieważ mapy bitowe są tworzone podczas budowania (gdy zdefiniowane kolory nie są dostępne).
Rob
39

Zdecydowanie chciałbym zaimplementować View w tym przypadku:

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

Wykorzystaj to w swoich układach w następujący sposób:

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

Użycie tej implementacji da następujący wynik:

wprowadź opis obrazu tutaj

Piotr
źródło
<com.your.path.to.view.TriangleShapeView ... />
działał
to wspaniale. jak mogę zmienić kolor trójkąta. powiedzieć, że początkowy kolor jest szary, ale zmienia się na czerwony po dotknięciu lub kliknięciu?
Fshamri
To jest o wiele lepsze niż hackowanie w xml
dorsz
@Peter Hi. czy możesz mi pomóc z małą poprawą? Potrzebuję zaokrąglenia prawego górnego rogu. jak mogę to osiągnąć?
Barterio
1
Jak dodać tekst wewnątrz trójkąta?
Sakiboy
38

Rozwiązanie Jacek Milewski pracuje dla mnie i, w oparciu o jego rozwiązanie, jeśli trzeba i odwrócony trójkąt można użyć to:

<?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
źródło
-1 W ten sposób nie można uzyskać trójkąta równobocznego. Poza tym ma wiele potencjalnych problemów, tj. stackoverflow.com/questions/20805826/…
j_kubik
21

Zobacz odpowiedź tutaj: Niestandardowe strzałki bez obrazu: 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>

strzałka

zed
źródło
11

Czy mogę pomóc bez używania XML?


Po prostu,

Układ niestandardowy (wycinek):

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

Twoja aktywność (przykład):

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

Przykład roboczy:

wprowadź opis obrazu tutaj


Kolejna absolutnie prosta Calculatefunkcja, która może Cię zainteresować.

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
źródło
11
+1 Tak, możesz. I dziękuję. Są inni ludzie oprócz OP, którzy szukają rozwiązania, które nie proszą konkretnie o XML - tak jak ja.
johndodo
1
onDraw nie będzie wywoływany na klasach pochodzących z ViewGroup, nie będzie domyślny. Musisz albo włączyć rysowanie przez setWillNotDraw (false), albo zamiast tego dziedziczyć z widoku.
Blago
11

Korzystanie z grafiki wektorowej:

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

wprowadź opis obrazu tutaj

Zygi
źródło
Używając Li zna koniec naprawiłem mój problem, dzięki!
oxied
6

Dla tych, którzy chcą strzałki w prawym trójkącie, proszę bardzo:

KROK 1: Utwórz możliwy do rysowania plik XML, skopiuj i wklej następującą zawartość XML do swojego rysowalnego XML. (Informujemy, że możesz użyć dowolnej nazwy dla pliku XML do rysowania. W moim przypadku nazywam go „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>

KROK 2: W kodzie XML układu utwórz Widok i powiąż jego tło z rysowalnym plikiem XML, który właśnie utworzyłeś w KROKU 1 . W moim przypadku wiążę v_right_arrow z właściwością tła mojego widoku.

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

Przykładowe dane wyjściowe:

wprowadź opis obrazu tutaj

Mam nadzięję, że to pomogło, powodzenia!

Chong Chern Dong
źródło
6

Możesz dodać następujący trójkąt w tle, używając następującego XML

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

Cała logika dostosowywania projektu xml jest w pathData. Rozważ lewy górny róg jako (0,0) i zaprojektuj układ zgodnie z wymaganiami. Sprawdź odpowiedź.

Sanjay Sharma
źródło
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
źródło
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
źródło
3

Nigdy tego nie robiłem, ale z tego, co rozumiem, możesz użyć klasy PathShape: http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html

Justin
źródło
2
Jak używać kształtu ścieżki w XML?
Sebastian Roth
Było to pomocne w znalezieniu odpowiedniej części do użycia, ale nie zapewnia wystarczającego wyjaśnienia, jak go używać. Mimo wszystko dzięki.
Navarr
Przepraszam Sebastian i Navarr ... Wskazałem w mojej odpowiedzi, że nigdy z niego nie korzystałem, więc nie jestem pewien, jak go używać. To po prostu wygląda na klasę, która wykona zadanie. Zgadzam się jednak, że nie ma na to wystarczającej dokumentacji.
Justin,
3
Wydaje się, że PathShape nie ma skojarzonej składni XML. Znacznik kształtu XML obsługuje tylko prostokąt, owal, linię i pierścień. developer.android.com/guide/topics/resources/…
Nilzor
3

Spóźniłem się na imprezę i natknąłem się na ten sam problem, a Google wskazało mi ten wątek StackOverflow jako pierwszy wynik.

Próbowałem użyć metody XML, aby dodać trójkąt i odkryłem problem polegający na tym, że kształt trójkąta za pomocą podejścia XML zajmuje więcej miejsca, niż się wydaje.

Zobacz zrzut ekranu z włączonymi ograniczeniami układu

wprowadź opis obrazu tutaj

Skończyło się na utworzeniu tej niestandardowej klasy widoku, która może rysować Trójkąt dowolnego z następujących typów: -

  1. skierowana w górę
  2. skierowany w dół
  3. skierowany w lewo &
  4. wskazując w prawo

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

Możesz po prostu użyć go w układzie XML, takim jak ten

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

Wiem, że OP chce rozwiązań w rozwiązaniu xml, ale jak wskazałem problem z podejściem xml. Mam nadzieję, że to może komuś pomóc.

Hitesh Sahu
źródło
2

Korzystając z rozwiązania Jacka Milewskiego wykonałem zorientowany kąt z przezroczystym tłem.

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

Możesz zmienić android:pivotXi android:pivotYprzesunąć kąt.

Stosowanie:

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

wprowadź opis obrazu tutaj

Parametry zależą od rozmiaru obrazu. Na przykład, jeśli ImageViewma rozmiar 100dp * 80dp, powinieneś użyć następujących stałych:

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

wprowadź opis obrazu tutaj

CoolMind
źródło
2

Próbuję utworzyć trójkątny obraz, taki jak przycisk Wstecz na pasku nawigacyjnym Androida, ale nie znalazłem żadnego rozwiązania.

Teraz znalazłem rozwiązanie u siebie i chciałbym się nim podzielić.

trójkątny pasek nawigacyjny android

użyj XML poniżej

<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
źródło
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
źródło
-1 W ten sposób nie można uzyskać trójkąta równobocznego. Poza tym ma wiele potencjalnych problemów, tj. stackoverflow.com/questions/20805826/…
j_kubik
0

Google podaje tutaj trójkąt równoboczny .
Wybierz VectorDrawable, aby rozmiar był elastyczny.
Jest zintegrowany z Android Studio jako wtyczka.

Jeśli masz obraz SVG, możesz tego użyć , aby przekształcić go VectorDrawable też.

Gdy już masz VectorDrawable, zmiana jego koloru i rotacji jest łatwa, jak wspominali inni.

ericn
źródło