Android如何以编程方式创建三角形和矩形形状？

Question

我们如何创建气球可绘制形状如下。我们可以动态改变它的颜色。

Answer 1

使用三角形图像和矩形图像，并在数学上对齐它们在上述格式。使用颜色过滤来动态更改其颜色。

你甚至可以在自定义视图上绘制它们，使用矢量图形，使用自定义颜色，这是解决这个问题的另一种方法。

Answer 2

在自定义View类中的onDraw方法中使用Canvas类。

其他方法是使用Path类。

Answer 3

首先，你可以创建一个xml内drawable文件夹

这xml将负责矩形的边框颜色

您可以创建下面的代码

<?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="#B2E3FA" /> 
    </shape> 
    </item> 
    <item android:left="5dp" android:bottom="5dp" android:top="5dp" > 
    <shape android:shape="rectangle"> 
     <solid android:color="#D8D8D8" /> 
    </shape> 
    </item>  
</layer-list> 

以及这样的边界形状这将创建一个所需的边框到矩形形状，您需要为此可绘制的背景分配该矩形形状，如下所示

android:background="@drawable/bg" 

其中bg是已经保存在文件夹绘制

之后，你需要把那个三角形恰好下方矩形对象XML文件名。

我希望你明白我的逻辑

Answer 4

这XML为triangle和rectangle。将其保存在可绘制的文件夹中。

triangle.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="@android:color/transparent" android:width="10dp"/> 
       <solid 
        android:color="#000000" /> 
      </shape> 
     </rotate> 
    </item> 
</layer-list> 

rectangle.xml

<?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="#B2E3FA" /> 
    </shape> 
    </item> 
</layer-list> 

和布局为您所需要的形状。 ，根据

<RelativeLayout 
     android:id="@+id/rlv1" 
     android:layout_width="150dp" 
     android:layout_height="50dp" 
     android:background="@drawable/rectangle" /> 

    <RelativeLayout 
     android:id="@+id/rlv2" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_below="@+id/rlv1" 
     android:background="@drawable/triangle" 
     android:rotation="180" /> 

设置的空白满足你的要求。

Source

Answer 5

清洁和正确的方式做到这一点，同时保持其动态是延长View类。

然后在的onDraw你会做这样的事情：

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

    drawBackground(canvas); 
} 

private void drawBackground(Canvas canvas) { 
    int width = (int) mWidth; 
    int height = (int) mHeight; 

    Point a = new Point(0, 0); 
    Point b = new Point(width, 0); 
    Point c = new Point(width, height - mPointHeight);//mPointedHeight is the length of the triangle... in this case we have it dynamic and can be changed. 
    Point d = new Point((width/2)+(mPointedHeight/2), height - mPointHeight); 
    Point e = new Point((width/2), height);// this is the sharp point of the triangle 
    Point f = new Point((width/2)-(mPointedHeight/2), height - mPointHeight); 
    Point g = new Point(0, height - mPointHeight); 

    Path path = new Path(); 
    path.moveTo(a.x, a.y); 
    path.lineTo(b.x, b.y); 
    path.lineTo(c.x, c.y); 
    path.lineTo(d.x, d.y); 
    path.lineTo(e.x, e.y); 
    path.lineTo(f.x, f.y); 
    path.lineTo(g.x, g.y); 

    canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill. 
} 

你去那里，没有不必要的分层或代码，不是动态的或干净。您也可以在框中添加文本。

Answer 6

创建自定义视图，并用帆布画黄金三角

package com.example.dickbutt; 

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 int colorCode = Color.MAGENTA; 

    public int getColorCode() { 
     return colorCode; 
    } 

    public void setColorCode(int colorCode) { 
     this.colorCode = colorCode; 
    } 

    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; 
     int h = getHeight()/2; 

     Path path = new Path(); 
     path.moveTo(0, 0); 
     path.lineTo(w, 2 * h); 
     path.lineTo(2 * w, 0); 
     path.lineTo(0, 0); 

     path.close(); 

     Paint p = new Paint(); 
     p.setColor(colorCode); 
     p.setAntiAlias(true); 

     canvas.drawPath(path, p); 
    } 
} 

结果

使用

个

<TextView 
    android:id="@+id/progress_value" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentTop="true" 
    android:layout_centerHorizontal="true" 
    android:background="@android:color/holo_purple" 
    android:gravity="center_horizontal" 
    android:text="200,0000000" 
    android:textColor="#fff" /> 

<com.example.dickbutt.TriangleShapeView 
    android:id="@+id/textView1" 
    android:layout_width="10dp" 
    android:layout_height="20dp" 
    android:layout_below="@+id/progress_value" 
    android:layout_centerHorizontal="true" 
    android:background="@drawable/rectangle" 
    android:gravity="center_horizontal" 
    android:textSize="10sp" /> 

优点

• 根据宽度和高度视图改变形状。
• 高度自定义可能。
• 看起来更干净

Answer 7

如果你想有一个边框布局

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/linear_root" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    > 

    <TextView 
     android:id="@+id/text_message" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:background="@drawable/bg_rectangle" 
     android:layout_marginLeft="20dp" 
     android:layout_marginRight="20dp" 
     android:layout_marginTop="20dp" 
     android:padding="8dp" 
     android:text="Abc" 
     /> 

    <ImageView 
     android:id="@+id/image_arrow" 
     android:layout_marginTop="-1.5dp" 
     android:layout_width="16dp" 
     android:layout_height="16dp" 
     android:layout_gravity="center_horizontal" 
     android:background="@drawable/icon_arrow_down" 
     /> 
</LinearLayout> 

bg_rectangle

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#eaeaea" /> 
    <stroke 
     android:width="1dp" 
     android:color="#f00" /> 
    <corners android:radius="8dp" /> 

</shape> 

ICO n_ar​​row_down，或者您也可以通过矢量像here

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

    <item> 
     <rotate 
      android:fromDegrees="45" 
      android:pivotX="135%" 
      android:pivotY="15%" 
      android:toDegrees="45" 
      > 
      <shape android:shape="rectangle"> 
       <solid android:color="#eaeaea"/> 
       <stroke 
        android:width="1dp" 
        android:color="#f00" /> 
      </shape> 
     </rotate> 
    </item> 
</layer-list>