web-dev-qa-db-ja.com

AndroidでXML形状を使用して右向き矢印（シェブロン）を作成する方法は？

Androidこのように？enter image description here

androidxmlandroid-drawableshape
23
Sajal

同様の問題がありました。ここに私がそれを解決した方法があります：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape>
            <solid Android:color="@Android:color/transparent"/>
            <size Android:width="2dp" Android:height="50dp"/>
        </shape>
    </item>

    <item Android:bottom="20dp">
        <rotate
            Android:fromDegrees="-45"
            Android:toDegrees="45">
            <shape Android:shape="rectangle">
                <solid Android:color="@Android:color/black"/>
                <corners
                    Android:radius="1dp"
                    Android:bottomRightRadius="0dp"
                    Android:bottomLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>

    <item Android:top="20dp">
        <rotate
            Android:fromDegrees="45"
            Android:toDegrees="45">
            <shape Android:shape="rectangle">
                <solid Android:color="@Android:color/black"/>
                <corners
                    Android:radius="1dp"
                    Android:topRightRadius="0dp"
                    Android:topLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

最初のアイテムは、ドロアブルを展開する空の図形です。次に、2つの長方形を使用しました。それぞれに2つの側面が丸みを帯びています。

ImageViewを介してこのドロウアブルを使用する必要があります。

<ImageView
    Android:layout_width="60dp"
    Android:layout_height="60dp"
    Android:src="@drawable/arrow"
    Android:contentDescription="@string/arrow_descriptor"/>

結果は次のとおりです。

arrow example

注： AndroidStudioはさまざまなコーナーサイズをレンダリングしませんが、デバイスでは適切に表示されます。

57
Simas

独自のXMLを記述する必要はありません。標準のマテリアルデザインシェブロンがあります。

Android Studioで、File-> New-> Vector Asset、次にアイコン（Androidロゴ）が付いたボタン）をクリックして、[矢印]を検索します。

必要な矢印を選択すると、プロジェクトに追加されます。 XMLファイルを開いて、必要に応じて寸法と色を編集できます。

enter image description here

enter image description here

enter image description here

30
Martin Konicek

Drawable xmlのみを使用してそのような形状を作成することはできません（ ser3249477による回答を参照 ）、このような形状をプログラムで作成する場合は、カスタムのドロアブルまたはビューを作成します。これが、右側の矢印の形状のコードです。 （色と直径は、styleableを使用してxmlで構成できます）

package com.kiriyard.stackoverflow24723040.views;

import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Paint;
import Android.graphics.Path;
import Android.graphics.Path.Direction;
import Android.util.AttributeSet;
import Android.view.View;

public class ArrowView extends View {



    private Paint arrowPaint;
    private Path arrowPath;
    private int arrowColor = 0xFF888888;
    private float density;
    private int diameter = 25, diameter_calc, radius_calc;

    public ArrowView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        stuff();
    }

    public ArrowView(Context context, AttributeSet attrs) {
        super(context, attrs);
        stuff();
    }

    public ArrowView(Context context) {
        super(context);
        stuff();
    }

    private void stuff() {

        //Getting density "dp"
        density = getContext().getResources().getDisplayMetrics().scaledDensity;
        //Calculating actual diameter
        diameter_calc = (int) density * diameter;
        radius_calc = diameter/2;

        //Creating Paint
        arrowPaint = new Paint();
        arrowPaint.setAntiAlias(true);
        arrowPaint.setColor(arrowColor);

        //Initialize path
        arrowPath = new Path();

        this.setWillNotDraw(false);
    }

    private int startX,startY, currentX, currentY;

    protected void onDraw(Canvas c) {

        startX = c.getWidth();
        startY = c.getHeight()/2;

        c.rotate(-45, startX, startY);

        arrowPath.reset();
        currentX = startX;
        currentY = startY;
        //Move to right end side center of the canvas
        arrowPath.moveTo(currentX,currentY);
        //Lets move up
        currentY = radius_calc;
        arrowPath.lineTo(currentX, currentY);
        //Now draw circle
        currentX-=radius_calc;
        arrowPath.addCircle(currentX, radius_calc, radius_calc, Direction.CCW);
        currentX-=radius_calc;

        arrowPath.lineTo(currentX,currentY);
        // Go to inner side center point
        currentX = startX - diameter_calc;
        currentY = startY - diameter_calc;
        arrowPath.lineTo(currentX,currentY);
        // Go left
        currentX = startX - startY + radius_calc;
        arrowPath.lineTo(currentX, currentY);       
        //Draw circle
        currentY+=radius_calc;
        c.drawCircle(currentX, currentY, radius_calc, arrowPaint);
        currentY+=radius_calc;
        arrowPath.lineTo(currentX, currentY);
        //Go to start
        arrowPath.lineTo(startX, startY);

        c.drawPath(arrowPath, arrowPaint);
    }

}

スクリーンショット

Arrow Screenshot

だからこれは方法の一つです！ ... ..描画可能な画像がより簡単な方法です。

5
Apurv Kiri

あなたのファンタジーと次の答えを使用して、あなたはあなたの目標を達成します;）

Androidで三角形と長方形の形状をプログラムで作成する方法

0
axl coder