使用xml定义制作三angular形形状?
有没有一种方法,我可以指定一个XML文件中的三angular形形状?
<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>
我们可以用path形状做什么吗? 我只需要一个等边三angular形。
谢谢
在这篇文章中,我将介绍如何去做。 这里是XML定义的三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: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>
请参考我的post,如果有什么不清楚,或者你需要解释如何build立。 它被旋转了一个切口矩形:)这是非常聪明和良好的工作解决scheme。
编辑:创build一个箭头指向 – >使用:
... android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > ...
并创build一个箭头指向像< – 使用:
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="▼"/>
你可以在这里得到更多的select。
Jacek Milewski的解决scheme为我工作,根据他的解决scheme,如果你需要和倒三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:toDegrees="45" android:pivotX="135%" android:pivotY="15%"> <shape android:shape="rectangle"> <solid android:color="@color/aquamarine" /> </shape> </rotate> </item> </layer-list>
我会在这种情况下定义去实现一个View:
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); } }
在你的布局中使用它如下:
<TriangleShapeView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff487fff"> </TriangleShapeView>
使用这个实现会给你以下结果:
你可以使用vector
做出这样的三angular形
ic_triangle_bottom.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="M5.7,11.5c3.2,6.3 6,11.5 6.3,11.5 0.3,0 3.1,-5.2 6.3,-11.5l5.7,-11.5 -12,0 -12,0 5.7,11.5z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector>
ic_triangle_left.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="M12.3,5.8c-6.2,3.1 -11.3,5.9 -11.3,6.2 0,0.3 5.2,3.1 11.5,6.3l11.5,5.7 0,-12c0,-6.6 -0.1,-12 -0.2,-11.9 -0.2,0 -5.4,2.6 -11.5,5.7z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector>
ic_triangle_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>
ic_triangle_top.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="M5.7,12.5l-5.7,11.5 12,0 12,0 -5.7,-11.5c-3.2,-6.3 -6,-11.5 -6.3,-11.5 -0.3,0 -3.1,5.2 -6.3,11.5z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector>
你可以使用vector绘图 。
如果您的最低API低于21,Android Studio将在构build时自动为这些较低版本创buildPNG位图(请参阅Vector Asset Studio )。
这里唯一的限制是你不能在运行时改变颜色,也不能从资源中引用颜色(如果最小API低于21)。
一个红色的向上指向的三angular形将是:
<?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>
将其添加到您的布局,并记住如果您旋转三angular形设置clipChildren =“假”。
<?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"> <View android:layout_width="100dp" android:layout_height="100dp" android:rotation="100" android:layout_centerInParent="true" android:background="@drawable/triangle"/> </RelativeLayout>
通过设置视图layout_width / layout_height属性来更改三angular形的大小(宽度/高度)。 这样,如果你的math正确,你也可以得到一个额外的老鹰。
会张贴截图,但我的声誉不够:
我可以帮助你, 而不使用XML?
只是,
自定义布局(切片):
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; } }
你的活动(例子):
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)); } }
工作示例:
另一个绝对简单的Calculate
函数,你可能会感兴趣..
private Path Calculate(Point A, Point B, Point C) { Path Pencil = new Path(); Pencil.moveTo(Ax, Ay); Pencil.lineTo(Bx, By); Pencil.lineTo(Cx, Cy); return Pencil; }
在这里看到答案: 没有图像的自定义箭头: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>
对于那些想要一个正确的三angular箭头,在这里你去:
第1步:创build一个可绘制的XML文件,将以下XML内容复制并粘贴到您的可绘制XML中。 (请注意,您可以使用任何名称作为您的可绘制XML文件,对于我的情况,我将其命名为“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>
第2步:在您的布局的XML中,创build一个视图,并将其背景绑定到刚刚在步骤1中创build的可绘制XML。 对于我的情况,我绑定v_right_arrow到我的视图的背景属性。
<View android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/v_right_arrow"> </View>
示例输出:
希望这会有所帮助,祝你好运!
<?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>
我从来没有这样做,但从我的理解你可以使用PathShape类: http : //developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html
<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>
我迟到了,我遇到了同样的问题,谷歌把我指向这个StackOverflow线程作为第一个结果。
我尝试使用xml的方式来添加三angular形,并找出一个问题,通过xml方法的三angular形形状是比看起来更多的空间。
请参阅屏幕截图上的布局界限
所以结束了这个自定义的视图类,可以绘制任何以下types的三angular形:
- 指向
- 下指向
- 左指向&
- 正确的指向
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; } }
你可以像这样简单地在xml布局中使用它
<com.hiteshsahu.materialupvote.TriangleShapeView android:layout_width="50dp" android:layout_height="50dp"></com.hiteshsahu.materialupvote.TriangleShapeView>
我知道OP想在XML解决scheme的解决scheme,但正如我指出的XML方法的问题。 我希望这可以帮助别人。
<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>