[Android] How to create an arrow shape xml

CSDN：https://blog.csdn.net/ws10052797/article/details/80013134

一、思路

通过layer-list中添加item，每个item代表箭头的一条边，每条边通过设置形状，然后通过旋转45度，形成一个直角箭头的形状。

二、实现

1. xml实现一个黑色的向右的箭头

其中第一个是用来限制下面两个的范围，是一条竖直的直线；
第二个逆时针旋转45度，对应了箭头的上半部分，是一条直线；
第三个顺时针旋转45度，对应了箭头的下半部分，也是一条直线；
为了使得两根直接相交并形成一个对角，对第二个也就是上半部分设置属性android:bottom=20dp，对第三个也就是下半部分设置属性android:top=20dp，这样就会发现出现了直角，但是贴合的不是非常严谨，所以微调一下旋转的角度，我选择把第三个改成了44.5度。

效果图

2. 引用shape

设置固定的宽高

三、知识点

用于填充形状的纯色。
属性：

android:color
颜色。应用于形状的颜色，以十六进制值或颜色资源表示。

为形状产生圆角。仅当形状为矩形时适用。
属性：
android:radius
尺寸。所有角的半径，以尺寸值或尺寸资源表示。对于每个角，这会被以下属性覆盖。
android:topLeftRadius
尺寸。左上角的半径，以尺寸值或尺寸资源表示。
android:topRightRadius
尺寸。右上角的半径，以尺寸值或尺寸资源表示。
android:bottomLeftRadius
尺寸。左下角的半径，以尺寸值或尺寸资源表示。
android:bottomRightRadius
尺寸。右下角的半径，以尺寸值或尺寸资源表示。
注：（最初）必须为每个角提供大于 1 的角半径，否则无法产生圆角。如果希望特定角不要倒圆角，解决方法是使用 android:radius 设置大于 1 的默认角半径，然后使用实际所需的值替换每个角，为不希望倒圆角的角提供零（“0dp”）。

android:top
整型。顶部偏移（像素）。
android:bottom
整型。底部偏移（像素）。

android:fromDegrees
Float. Starting angular position, in degrees.
浮点型。开始的角度位置，以度数为单位。

四、学习资料

1. 学习Layer List图层列表

首先学习layer-list的用法，根据Layer List的官方指南，知道是根元素，是子元素。绘制的逻辑是：

Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.
Each drawable is represented by an element inside a single element.
列表中的每个可绘制对象按照列表的顺序绘制，列表中的最后一个可绘制对象绘于顶部。每个可绘制对象由单一元素内的元素表示

的说明和属性也可以在指南中查阅，其中需要理解的一句话：

All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate.
默认情况下，所有可绘制项都会缩放以适应包括视图的大小。因此，将图像放在图层列表中的不同位置可能会增大视图的大小，并且有些图像会相应地缩放。

指南中提到避免缩放的方法，用+对不需要缩放的项目（例如"center"）定义重力。

2. 学习Shape Drawable形状可绘制对象

官方指南Shape Drawable，可以查阅到这个元素的各种属性。

3. 学习Animation Resources中的元素

官方指南Tween animation中可以查阅的属性。

五、总结

一顿操作学习了一些知识，然并卵，终极解决方案或许是切个图。

六、延伸

• DrawerArrowDrawable Android经典的抽屉菜单变成返回图形
• 除了dp px sp 还有其他Dimens
• 思考了一下，如果需要扩展向上向下的箭头，那么第一个就应该是一条水平的直线了
• 参考资料中的答案提到了 vector asset，需要继续看 Vector Drawables Overview，SVG 取代PNG等内容
• 参考资料中的答案同时提到了自定义View ArrowView，有时间自己也可以实现一下
• 参考资料同时提到了PathDrawable，官方也有一个PathShape，还有RoundRectShape，还可以看一下Drawable Overview，甚至，都可以去学一下Displaying Graphics with OpenGL ES，毕竟Images and Graphics指南有很多很多还没看。不得不说，这个参考资料每个答案都是精华。

---

参考资料

[1]: how to create a right facing arrow (chevron) using XML shapes in android?

---

有任何问题，欢迎留言反馈与建议。