logo标签列表

使用三角形在Android XML中绘制对角线形状

androidxmlshapesdiagonal
6

你好，我想画类似于以下图片的东西：

Diagonal

带一个形状，这可行吗？

你尝试过什么？ - Sree
我尝试了两个矩形并旋转它们，但我没有绘制XML形状的经验.. - Pauli
为什么不尝试使用图像呢？ - Sree
我需要添加5dp的圆角，类似于以下代码：<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="5dp"/> <solid android:color="@color/button_buy_pre" /> </shape> - Pauli
6个回答
7

我知道回答这个问题有点晚，但我还是要在这里发布我的答案，以便其他人可以参考：

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

<path
    android:name="dark_triangle"
    android:fillColor="#FFFFFF"
    android:pathData="M 100,0 L 0,100 100,100 z" />

<path
    android:name="light_triangle"
    android:fillColor="#d0021b"
    android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>
谢谢。这是最好的答案。 - meow2x
有史以来最简洁的答案！我需要快速学习如何在Android中创建矢量图形！ - Dmytro Marchuk
5

@Pauli。您可以使用图像来进行简单练习并尝试这种方法。使用这个逻辑。

     <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:drawable="@color/Your_color">
</item>

<item>
    <rotate
        android:fromDegrees="50"
        android:pivotX="10%"
        android:pivotY="85%"
         >
        <shape

            android:shape="rectangle">
            <solid android:color="#000000" />

        </shape>
    </rotate>
</item>

SO Courtesy（stackoverflow的礼仪）

如何在RelativeLayout上实现倾斜分割背景？

如何使用XML定义制作三角形形状？

我之前看过这些链接并尝试了一下，但那不是我想要的。 - Pauli
4

  1. Create color resources in colors.xml file

    <color name="primaryColor">#3F51B5</color>
<color name="primaryColorDark">#303F9F</color>

  2. Create Java file TriangleBackgroundView.Java:

    public class TriangleBackgroundView extends View {
Paint paint;
Paint bgPaint;

public TriangleBackgroundView(Context context) {
    super(context);
    init();
}

public TriangleBackgroundView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TriangleBackgroundView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint = new Paint();
    paint.setStrokeWidth(1);
    paint.setAntiAlias(true);
    paint.setStrokeCap(Paint.Cap.SQUARE);
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(getResources().getColor(R.color.primaryColor));

    bgPaint= new Paint();
    bgPaint.setStyle(Paint.Style.FILL);
    bgPaint.setColor(getResources().getColor(R.color.primaryColorDark));
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int h = getMeasuredHeight();
    int w = getMeasuredWidth();

    canvas.drawRect(0,0,w,h,bgPaint);

    Path path = new Path();
    path.moveTo(0, h);
    path.lineTo(w, h);
    path.lineTo(0, 0);
    path.lineTo(0, h);
    path.close();
    canvas.drawPath(path,paint);
}
}

  3. Now add custom view in your layout:

<com.yourpackage.TriangleBackgroundView
    android:layout_height="match_parent"
    android:layout_width="match_parent"/>

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textStyle="bold"
    android:textSize="20dp"
    android:textColor="@android:color/white"
    android:layout_centerInParent="true"/>

您可以通过本教程获得帮助，创建具有三角形对角线的形状：

来源：http://marcouberti.net/2015/06/23/create-a-custom-triangle-background-view-in-android/

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审查】 - Abhinav Singh Maurya
编辑了@AbhinavSinghMaurya的帖子。 - Gagan Sethi
1
你可以使用类似这样的代码：

您可以使用类似于此的代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/yellow_color"/>
        </shape>
    </item>
    <item>
        <rotate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="45"
            android:pivotX="85%"
            android:pivotY="135%">
            <shape>
                <solid android:color="@color/brown_color" />

            </shape>
        </rotate>
    </item>
    <item>
        <rotate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="45"
            android:pivotX="-35%"
            android:pivotY="85%">
            <shape android:shape="rectangle">
                <solid android:color="@color/brown_color" />

            </shape>
        </rotate>
    </item>
</layer-list>

两个旋转的矩形可以填充您图片中的棕色侧面。
1

half_diagonal.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:name="dark_triangle"
        android:fillColor="#673AB7"
        android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>
0
1
虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供链接供参考。 - Bhargav Rao
背景：-moz-linear-gradient（45deg，rgba（192,192,192,1）0％，rgba（192,192,192,1）49％，rgba（0,0,0,1）50％，rgba（0,0,0,1）100％）; / * ff3.6 + * / 背景：-webkit-gradient（linear，left bottom，right top，color-stop（0％，rgba（192,192,192,1）），color-stop（49％，rgba（192,192,192,1）），color-stop（50％，rgba（0,0,0,1）），color-stop（100％，rgba（0,0,0,1）））; / * safari4 +，chrome * / 背景：-webkit-linear-gradient（45deg，rgba（192,192,192,1）0％，rgba（192,192,192,1）49％，rgba（0,0,0,1）50％，rgba（0,0,0,1）100％）; / * safari5.1 +，chrome10 + * / - Dimitris DK
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接