Делая треугольную форму, используя определения XML? - PullRequest
119 голосов
/ 25 марта 2010

Есть ли способ указать форму треугольника в 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>

мы можем сделать это с помощью формы пути или чего-то еще? Мне просто нужен равносторонний треугольник.

Спасибо

Ответы [ 19 ]

4 голосов
/ 07 июля 2018

Вы можете добавить следующий треугольник в фоновом режиме, используя следующий xml

image

<?xml version="1.0" encoding="utf-8"?>

    
        <путь
            андроид: имя = «треугольник»
            андроид: FillColor = "# 848af8"
            android: pathData = "M 0,20 L 0,0 L 100,0 L 100,20 L 54,55 л -1,0,6 л -1,0,4 л -1,0,2 л -1,0 л -1, - 0 л -1, -0,2 л -1, -0,4 л -1, -0,6 л, 46,55 л, 0,20 -100, -100 Z ">
    

Вся логика для настройки дизайна XML находится в данных пути. Рассмотрим верхний левый как (0,0) и спроектируем макет в соответствии с вашими требованиями. Проверьте этот ответ.

4 голосов
/ 16 мая 2017
 <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>
3 голосов
/ 16 сентября 2016

Я опоздал на вечеринку, и я столкнулся с той же проблемой, и Google указал мне на этот поток StackOverflow в качестве первого результата.

Я пытался использовать способ XML, чтобы добавить треугольник и выяснить проблему, что треугольник Подход к фигуре через xml занимает больше места, чем кажется.

См. Снимок экрана с границами макета на

enter image description here

Итак, в итоге мы создали этот пользовательский класс представления, который может рисовать треугольник любого из следующих типов: -

  1. вверх, указывая
  2. вниз, указывая
  3. указатель влево &
  4. вправо

АСАС

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

Вы можете просто использовать его в XML-макете, как это

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

Я знаю, что OP хочет решения в xml-решении, но, как я уже говорил, проблема с xml-подходом. Надеюсь, это кому-нибудь поможет.

3 голосов
/ 10 мая 2019

Использование векторного рисования:

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

enter image description here

3 голосов
/ 16 июля 2010

Я никогда не делал этого, но насколько я понимаю, вы можете использовать класс PathShape: http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html

0 голосов
/ 26 февраля 2019

Я пытаюсь создать треугольное изображение, например кнопку "Назад" на панели навигации Android, но я не нашел никакого решения.

Теперь я нашел решение для себя и хотел бы поделиться им.

triangle navigation bar android

используйте xml ниже

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

0 голосов
/ 03 октября 2013
  <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>

0 голосов
/ 24 октября 2018

Используя решение Яцек Милевски Я сделал ориентированный угол вниз с прозрачным фоном.

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

Вы можете изменить android:pivotX и android:pivotY, чтобы сместить угол.

Использование:

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

enter image description here

Параметры зависят от размера изображения. Например, если ImageView имеет размер 100dp * 80dp, вы должны использовать эти константы:

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

enter image description here

0 голосов
/ 04 мая 2018

Google предоставляет равносторонний треугольник здесь .
Выберите VectorDrawable, чтобы размер был гибким.
Он интегрирован в Android Studio как плагин.

Если у вас есть изображение SVG, вы можете использовать this , чтобы конвертировать его в VectorDrawable.

Если у вас есть VectorDrawable, изменить его цвет и вращение легко, как уже упоминали другие.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...