Tạo hình tam giác bằng định nghĩa xml?

Có cách nào để tôi có thể chỉ định hình dạng tam giác trong tệp xml không?

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

chúng ta có thể làm điều này với một hình dạng đường dẫn hoặc một cái gì đó? Tôi chỉ cần một tam giác đều.

Cảm ơn

Trong bài viết này tôi mô tả làm thế nào để làm điều đó. Và đây là tam giác xác định 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>

Tham khảo bài viết của tôi nếu một cái gì đó không rõ ràng hoặc bạn cần giải thích làm thế nào nó được xây dựng. Nó được xoay một hình chữ nhật cutout :) nó là giải pháp rất thông minh và hoạt động tốt.

EDIT: để tạo một mũi tên chỉ như -> sử dụng:

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

Và để tạo một mũi tên chỉ như <- use:

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

Bạn có thể nhận được ở đây nhiều lựa chọn hơn.

Bạn có thể sử dụng vectorđể tạo ra hình tam giác như thế này

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

Sau đó sử dụng nó như

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

Để thay đổi màu sắc và hướng, sử dụng android:tintvàandroid: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
    />

Kết quả

Để thay đổi hình dạng của vectơ, bạn có thể thay đổi chiều rộng / chiều cao của vectơ. Ví dụ thay đổi chiều rộng thành 10dp

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

Bạn có thể sử dụng vector drawables .

Nếu API tối thiểu của bạn thấp hơn 21, Android Studio sẽ tự động tạo ảnh bitmap PNG cho các phiên bản thấp hơn đó vào thời gian xây dựng (xem Vector Asset Studio ). Nếu bạn sử dụng thư viện hỗ trợ, Android thậm chí còn quản lý "vectơ thực" xuống API 7 (nhiều hơn về điều đó trong bản cập nhật của bài đăng này ở phía dưới).

Một hình tam giác hướng lên màu đỏ sẽ là:

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

Thêm nó vào bố cục của bạn và nhớ đặt clipChildren = "false" nếu bạn xoay hình tam giác.

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

Thay đổi kích thước (chiều rộng / chiều cao) của hình tam giác bằng cách đặt thuộc tính Lượt xem layout_ thong / layout_height. Bằng cách này, bạn cũng có thể có được một bộ ba điện tử nếu bạn thực hiện đúng phép toán.

CẬP NHẬT 25.11.2017

Nếu bạn sử dụng thư viện hỗ trợ, bạn có thể sử dụng các vectơ thực (thay vì tạo bitmap) xa như API 7 . Chỉ cần thêm:

vectorDrawables.useSupportLibrary = true

làm defaultConfigtrong build.gradle của mô-đun của bạn.

Sau đó, đặt (vector xml) drawable như thế này:

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

Tất cả mọi thứ được ghi lại rất độc đáo trên trang Vector Asset Studio .

Kể từ khi tính năng này, tôi đã làm việc hoàn toàn không có bitmap về các biểu tượng. Điều này cũng làm giảm kích thước APK khá nhiều.

Tôi chắc chắn sẽ đi thực hiện một View trong trường hợp này:

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

Sử dụng nó trong bố trí của bạn như sau:

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

Sử dụng triển khai này sẽ cho bạn kết quả như sau:

Các giải pháp của Jacek Milewski làm việc cho tôi và dựa trên giải pháp của mình, nếu bạn cần và tam giác đảo ngược; bạn có thể sử dụng này:

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

Xem câu trả lời tại đây: Mũi tên tùy chỉnh không có hình ảnh: 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>

Tôi có thể giúp bạn mà không sử dụng XML không?

Đơn giản,

Bố cục tùy chỉnh (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;
    }
}

Hoạt động của bạn (Ví dụ):

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

Ví dụ làm việc:

Một Calculatechức năng hoàn toàn đơn giản khác mà bạn có thể quan tâm ..

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

Sử dụng vector drawable:

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

Đối với những người muốn một mũi tên tam giác bên phải, ở đây bạn đi:

BƯỚC 1: Tạo tệp XML có thể vẽ, sao chép và dán nội dung XML sau vào XML có thể vẽ của bạn. (Xin lưu ý rằng bạn có thể sử dụng bất kỳ tên nào cho tệp XML có thể vẽ của mình. Đối với trường hợp của tôi, tôi đặt tên là "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>

BƯỚC 2: Trong XML của bố cục của bạn, tạo Chế độ xem và liên kết nền của nó với XML có thể vẽ mà bạn vừa tạo trong BƯỚC 1 . Đối với trường hợp của tôi, tôi liên kết v_right_arrow với thuộc tính nền của Chế độ xem của tôi.

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

Đầu ra mẫu:

Hy vọng điều này sẽ giúp, chúc may mắn!

Bạn có thể thêm hình tam giác sau vào nền bằng xml sau

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

Toàn bộ logic để tùy chỉnh thiết kế xml là trong pathData. Xem xét trên cùng bên trái là (0,0) và thiết kế bố trí theo yêu cầu của bạn. Kiểm tra câu trả lời này .

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

Tôi chưa bao giờ làm điều này, nhưng từ những gì tôi hiểu, bạn có thể sử dụng lớp PathShape: http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html

Tôi đến trễ tiệc tùng và tôi gặp phải vấn đề tương tự và Google đã chỉ cho tôi chủ đề StackOverflow này như là kết quả đầu tiên.

Tôi đã thử sử dụng cách xml để thêm hình tam giác và tìm ra một vấn đề rằng hình dạng tam giác thông qua phương pháp xml đang chiếm nhiều không gian hơn nó xuất hiện.

Xem ảnh chụp màn hình với giới hạn bố cục trên

Vì vậy, cuối cùng đã tạo ra lớp xem tùy chỉnh này có thể vẽ Tam giác của bất kỳ loại nào sau đây: -

1. chỉ lên
2. chỉ xuống
3. chỉ trái &
4. chỉ đúng

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

Bạn chỉ có thể sử dụng nó trong bố cục xml như thế này

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

Tôi biết OP muốn các giải pháp trong giải pháp xml nhưng như tôi đã chỉ ra vấn đề với cách tiếp cận xml. Tôi hy vọng nó có thể giúp ai đó.

Sử dụng giải pháp của Jacek Milewski, tôi tạo một góc hướng xuống với nền trong suốt.

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

Bạn có thể thay đổi android:pivotXvà android:pivotYđể thay đổi góc độ.

Sử dụng:

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

Các thông số phụ thuộc vào kích thước của hình ảnh. Ví dụ: nếu ImageViewcó kích thước 100dp * 80dp, bạn nên sử dụng các hằng số này:

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

Tôi cố gắng tạo hình ảnh tam giác như nút quay lại của thanh điều hướng Android nhưng tôi không tìm thấy giải pháp nào.

Bây giờ, tôi tìm thấy giải pháp với chính mình và muốn chia sẻ nó.

sử dụng xml dưới đây

<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 cung cấp một tam giác đều ở đây .
Chọn VectorDrawable để kích thước linh hoạt.
Nó được tích hợp vào Android Studio dưới dạng plugin.

Nếu bạn có một hình ảnh SVG, bạn cũng có thể sử dụng nó để chuyển đổi nó thành VectorDrawable.

Khi bạn đã có VectorDrawable, việc thay đổi màu sắc và xoay của nó rất dễ dàng như những người khác đã đề cập.