Android:使用 xml 定义制作三角形按钮(可绘制)
Android: Make a button with triangle shape using xml definitions (drawable)
我想使用 XML 定义的按钮 (TextView) 创建这个:
在 Activity 的布局中,我有:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_arrow" <!-- I NEED IMPLEMENT THIS -->
android:clickable="true"
android:drawablePadding="7dp"
android:gravity="center"
android:drawableLeft="@drawable/music_cloud"
android:onClick="exportSong"
android:padding="20dp"
android:text="@string/export_upload"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@color/dark_yellow_text_color"
android:textStyle="bold" />
我创建了几个帖子:
making-a-triangle-shape-using-xml-definitions
Android triangle (arrow) defined as an XML shape
或Android - make an arrow shape with xml
我尝试修改了几个 XML 定义,但都没有什么好处。有没有一些简单的方法来实现这个形状?它也应该有一个透明的背景。
<item>
<inset android:insetBottom="2dp" >
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke
android:width="1dip"
android:color="#5e7974" />
<gradient
android:angle="-90"
android:centerColor="#ECEFF1"
android:endColor="#FFAB00"
android:startColor="#FFAB00" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke
android:width="1dip"
android:color="#5e7974" />
<gradient
android:angle="-90"
android:centerColor="#ECEFF1"
android:endColor="#FFAB00"
android:startColor="#FFAB00" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke
android:width="1dip"
android:color="#5e7974" />
<gradient
android:angle="-90"
android:centerColor="#ECEFF1"
android:endColor="#FFD600"
android:startColor="#FFD600" />
</shape>
</item>
</selector>
</inset>
</item>
<item
android:bottom="65dp"
android:right="-129dp"
android:top="-40dp">
<rotate android:fromDegrees="50" >
<shape android:shape="rectangle" >
<solid android:color="@color/background_color_light_yellow" />
</shape>
</rotate>
</item>
<item
android:bottom="-40dp"
android:right="-129dp"
android:top="65dp">
<rotate android:fromDegrees="-50" >
<shape android:shape="rectangle" >
<solid android:color="@color/background_color_light_yellow" />
</shape>
</rotate>
</item>
如果有人对此仍有疑问:
xml:
<item android:top="45dp"> <shape> <size android:height="100dp" android:width="90dp"/> <solid android:color="@android:color/holo_orange_light" /> </shape> </item> <item android:top="36dp" android:left="11dp"> <rotate android:fromDegrees="45" android:toDegrees="0" android:pivotX="80%" android:pivotY="20%" > <shape> <size android:width="40dp" android:height="30dp"/> <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/> <solid android:color="@android:color/holo_orange_light" /> </shape> </rotate> </item> </layer-list>
覆盖 TextView 并在您的布局中使用它:
public class CustomTextView extends TextView { private int mWidth; private int mHeight; public CustomTextView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint mPaint = new Paint(); int color = getResources().getColor(R.color.YourColor); mPaint.setColor(color); Path mPath = new Path(); mPath.moveTo(.0f, this.getHeight()); mPath.lineTo(0.8f * this.getWidth(), this.getHeight()); mPath.lineTo(this.getWidth(), 0.5f * this.getHeight()); mPath.lineTo(0.8f * this.getWidth(), .0f); mPath.lineTo(.0f, .0f); mPath.lineTo(.0f, this.getHeight()); canvas.clipPath(mPath); canvas.drawPath(mPath,mPaint); } }
关于 xml 示例:有两个矩形 overlapping.You 必须经常使用这些值,这使得它很难在不同的视图上使用。我认为在这种情况下使用自定义视图是最好的解决方案。
您也可以使用 Material 组件库中包含的 MaterialButton
来实现它。
然后在您的布局中添加 MaterialButton
:
- 使用
app:icon
属性在左侧添加图标 - 应用图书馆提供的style
Widget.MaterialComponents.Button.Icon
- 使用
app:shapeAppearanceOverlay
属性定义自定义形状(需要 v.1.1.0)
类似于:
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/ic_add_24px"
android:text="..."
app:shapeAppearanceOverlay="@style/CustomShapeAppearanceOverlay.Button"
.../>
其中 shapeAppearanceOverlay
在您的 styles.xml
中定义:
<style name="CustomShapeAppearanceOverlay.Button" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeTopRight">18dp</item>
<item name="cornerSizeBottomRight">18dp</item>
</style>
最终结果: