web-dev-qa-db-fra.com

Android: dessiner des formes personnalisées

Je veux dessiner une forme personnalisée comme celle-ci-Custom Shape.

Une option consiste à créer chaque forme dans Photoshop individuellement, puis à l'utiliser dans le codage, mais je veux savoir s'il est possible de dessiner cela en utilisant XML.

Comment dessiner la forme comme ça? Ne vous attendez pas à un code complet, donnez-moi simplement une idée ou dirigez-moi dans la bonne direction.

androidandroid-shapedrawable
18
Rohan Kandwal

Essayez le format XML dessinable suivant:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

<!-- Colored rectangle-->
<item>
    <shape Android:shape="rectangle">
        <size 
            Android:width="100dp"
            Android:height="40dp" />
        <solid Android:color="#FAD55C" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's -->
<item
    Android:right="90dp"
    Android:left="-30dp">
    <rotate
        Android:fromDegrees="45">
        <shape Android:shape="rectangle">
            <solid Android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- These rectangles for the right side -->
<!-- Their color should be the same as layout's -->
<item
    Android:top="-40dp"
    Android:bottom="63dp"
    Android:right="-25dp">
    <rotate
        Android:fromDegrees="45">
        <shape Android:shape="rectangle">
            <solid Android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<item
    Android:top="63dp"
    Android:bottom="-40dp"
    Android:right="-25dp">
    <rotate
        Android:fromDegrees="-45">
        <shape Android:shape="rectangle">
            <solid Android:color="#ffffff" />
        </shape>
    </rotate>
</item>
</layer-list>

Voilà à quoi ça ressemble sur un fond blanc:

enter image description here

Voici plus d'informations sur Shape Drawables .

MODIFIER:

Ce qui suit est une petite explication de la façon dont cela est fait.

  1. Nous plaçons un rectangle jaune de 100 x 40 dp. Désormais ce rectangle peut être traité comme un contenant pour le reste des formes. Les pensionnaires du conteneur sont considérés comme les origines des pensionnaires de formes que nous allons placer dans le conteneur. À savoir, définir top, bottom, right and left les attributs de la balise de forme size signifie la distance entre les bords de la forme et top, bottom, right and left bords du conteneur (rectangle jaune).

Par exemple, si nous voulons placer un petit rectangle à l'intérieur du jaune avec un 10dp espace de chaque bord du rectangle jaune, nous avons défini le top, bottom, right and left attributs égaux à 10dp pour le nouveau rectangle (intérieur).

  1. Afin d'obtenir une forme de flèche pour le côté droit du rectangle jaune, nous utilisons deux rectangles blancs correctement déplacés vers la droite et tournés. Remarquez que les valeurs de l'attribut size peuvent être négatives, ce qui signifie que le bord correspondant de la forme apparaît en dehors du conteneur. Dans l'exemple précédent, si vous définissez, par exemple, l'attribut left sur 100 dp ou plus, le rectangle intérieur ne s'affichera pas, car il sera derrière le pensionnaire droit du jaune.

En ce qui concerne la rotation, elle va dans le sens horaire pour les valeurs positives et dans le sens antihoraire sinon.

  1. Pour la forme du côté gauche, il suffit d'utiliser un seul rectangle déplacé vers la gauche (partiellement à l'extérieur du conteneur) et tourné à 45 degrés.

J'espère que cela ne vous a pas dérouté.

45
Onik