Android如何以编程方式创build三angular形和矩形形状?
我们如何创build如下的气球可绘制形状。 我们可以dynamic地改变它的颜色。
这里是triangle
和rectangle
XML
。 将其保存在可绘制的文件夹中。
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" />
根据您的要求设定保证金。
资源
如果你想为你的布局的边界
<?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>
icon_arrow_down ,或者你可以像这里一样创build三angular形
<?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>
在保持dynamic的同时,干净而正确的做法是扩展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(ax, ay); path.lineTo(bx, by); path.lineTo(cx, cy); path.lineTo(dx, dy); path.lineTo(ex, ey); path.lineTo(fx, fy); path.lineTo(gx, gy); canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill. }
你去,没有不必要的分层或代码,不dynamic或干净。 您也可以在框中添加文本。
使用三angular形图像和矩形图像,并在math上alignment他们在上述格式。 使用颜色过滤来dynamic更改其颜色。
你甚至可以使用自定义颜色来绘制自定义视图,使用vectorgraphics,这是解决这个问题的另一种方法。
在自定义View
类中使用onDraw方法中的Canvas 。
其他的方法是使用Path类。
首先,您可以在drawable
文件夹内创build一个xml
该xml
将负责矩形形状的边框颜色
您可以使用下面的代码创build这样的边框形状
<?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>
以及这将创build一个所需的边框矩形形状,你需要像这样的可绘制分配该矩形形状的背景
android:background="@drawable/bg"
其中bg
是已保存在可绘制文件夹中的xml文件名
之后,您需要将该三angular形正好放在矩形对象的下面。
我希望你能理解我的逻辑
创build自定义视图并用canvas绘制混合
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" />
优点
- 根据视图的宽度和高度来改变形状。
- 高度定制可能。
- 看起来更干净