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>

如果有人对此仍有疑问:

  1. 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>
    
  2. 覆盖 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>

最终结果: