web-dev-qa-db-fra.com

Comment créer une flèche orientée vers la droite (chevron) en utilisant des formes XML dans Android?

Comment créer une flèche orientée vers la droite en utilisant des formes xml dans Android comme ça ??enter image description here

androidxmlandroid-drawableshape
23
Sajal

J'ai eu un problème similaire. Voici comment je l'ai résolu:

<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>

Le premier élément est une forme vide pour agrandir le dessinable. Ensuite, j'ai utilisé 2 rectangles. Chacun d'eux a 2 côtés arrondis.

Vous devez utiliser ce drawable via un ImageView:

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

Voici le résultat:

arrow example

Remarque: AndroidStudio ne rend pas les différentes tailles de coin, mais il s'affiche correctement sur les appareils.

57
Simas

Pas besoin d'écrire votre propre XML, il y a un chevron de conception de matériau standard.

Dans Android Studio, cliquez sur File -> New -> Vector Asset, puis cliquez sur l'icône (bouton avec Android) et recherchez "Flèche".

Sélectionnez la flèche que vous souhaitez, elle sera ajoutée à votre projet. Vous pouvez ouvrir le fichier XML et modifier les dimensions et la couleur si nécessaire.

enter image description here

enter image description here

enter image description here

30
Martin Konicek

Il n'est pas possible de créer une telle forme en utilisant uniquement du XML dessinable( Voir la réponse de user3249477 ), si vous souhaitez créer une telle forme par programme, vous pouvez créer un dessin ou une vue personnalisée. Voici le code de la forme de la flèche de droite. (La couleur et le diamètre peuvent être configurés en xml en utilisant styleable)

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);
    }

}

Capture d'écran

Arrow Screenshot

C'est donc l'un des moyens! ... .. image dessinable est un moyen plus facile.

5
Apurv Kiri

En utilisant votre fantaisie et la réponse suivante, vous atteindrez votre objectif;)

Android comment créer un triangle et un rectangle par programme?

0
axl coder