web-dev-qa-db-ja.com

Android：xml定義を使用して三角形のボタンを作成します（描画可能）

XML定義を使用してボタン（TextView）を使用してこれを作成したい：

my image

私が持っているアクティビティのレイアウトでは：

    <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

XML形状として定義されたAndroidの三角形（矢印）

または Android-xmlで矢印の形を作る

いくつかのXML定義を変更しようとしましたが、何も良くありませんでした。この形状を実装する簡単な方法はありますか？また、背景が透明である必要があります。

androidxmltextviewandroid-drawableandroid-button
10
Pepa Zapletal

誰かがまだこれに問題がある場合：

  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の例について：2つの長方形が重なっています。値を何度も試す必要があるため、異なるビューで使用するのが難しくなります。この場合、カスタムビューを使用するのが最善の解決策だと思います。

8
Hanelore Ianoseck

マテリアルコンポーネントライブラリに含まれている MaterialButton を使用してこれを実現することもできます。

次に、レイアウトにMaterialButtonを追加します。

  • app:icon属性を使用して、左側にアイコンを追加します
  • ライブラリによって提供される styleWidget.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>

最終結果：

enter image description here

1
Gabriele Mariotti
<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>
0
Ajay Adkar