web-dev-qa-db-fra.com

Dessin de la bordure supérieure d'une forme sous Android

Je crée une barre de progression personnalisée (placée sous une WebView) et ce que je voudrais tracer est une ligne large de 1dp entre la WebView et la ProgressBar. Je modifie le dessin existant, à savoir progress_horizontal.xml, et j'ai essayé quelque chose comme ceci:

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

  (...)

  <item>
    <shape Android:shape="line">
      <stroke Android:width="1dp" Android:color="#FF000000" />
    </shape>
  </item>

</layer-list>

Cette ligne est cependant centrée verticalement mais je veux qu’elle soit tracée au-dessus du dessinable. La seule idée que je pourrais proposer est d'utiliser ce dégradé "hacky" ci-dessous:

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

  (...)

  <item>
    <shape>
      <gradient
          Android:startColor="#FF000000"
          Android:centerColor="#00000000"
          Android:centerY="0.01"
          Android:endColor="#00000000"
          Android:angle="270"
      />
    </shape>
  </item>

</layer-list>

Avez-vous de meilleures idées pour dessiner une forme de ligne simple alignée en haut du dessin que l'on peut définir avec layer-list?

androidprogress-barlinebordershape
17
Marek Stój

J'ai passé un moment à essayer de comprendre cela aussi. J'espère qu'il y a une meilleure façon de le faire, mais voici la méthode que j'ai utilisée, qui est aussi un peu bidon, mais au cas où cela aiderait quelqu'un, je pensais que je partagerais.

Le premier élément de votre liste de calques doit être un solide de la couleur de votre choix. Après cela, vous voudrez avoir la bordure, avec le rembourrage de n'importe quel côté de la bordure.

Par exemple:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="rectangle">
            <solid Android:color="YOUR BORDER COLOR" />
        </shape>
    </item>
    <item Android:top="YOUR TOP BORDER THICKNESS">
        THE THING YOU WANT A BORDER ON
    </item>
</layer-list>

L'idée est que le rembourrage de l'article révèle la forme solide derrière lui, donnant l'aspect de la bordure. Vous pouvez ajouter un rembourrage à n’importe quel côté pour ajouter une bordure. J'imagine que vous pourriez devenir plus compliqué et avoir des bordures de couleurs différentes de cette façon aussi.

On dirait un hack mais ça a fonctionné pour moi.

EDIT: J'ai dit "padding" mais dans les listes de couches, c'est plus un décalage.

47
cottonBallPaws

je parcourais tous les sujets liés mais personne ne pouvait résoudre mon problème. Mais certains d'entre eux ont été très utiles pour comprendre le fonctionnement des paramètres de liste de couches ou de forme.

Mon problème était de définir un bouton avec un dégradé linéaire et de tracer une ligne supérieure et une ligne inférieure de différentes couleurs. Après tout, j'ai piraté cette solution. J'ai sauvegardé le fichier unter res/drawable/blue_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
   <item Android:state_pressed="true" >        
        <shape Android:shape="rectangle">
            <solid Android:color="@color/blue_end" />
            <padding 
                   Android:left="10dp"
                Android:top="10dp"
                Android:right="10dp"
                Android:bottom="10dp" />
            <stroke   
                Android:width="1dp"
                Android:color="@color/bottomline_btn" />                        
        </shape>    
    </item>
    <item>
        <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
           <item>
                <shape Android:shape="rectangle">
                    <solid Android:color="@color/blue" />
                    <gradient
                        Android:startColor="@color/blue"
                        Android:endColor="@color/blue_end"
                        Android:angle="270" />
                </shape>
            </item>
            <item Android:top="0dp" Android:bottom="-1dp" Android:left="-1dp" Android:right="-1dp">
                <shape Android:shape="rectangle">
                    <stroke   
                        Android:width="1dp"
                        Android:color="@color/topline_btn" />                       
                    <solid Android:color="#00000000" />
                    <corners Android:radius="0dp" />
                </shape>
            </item>
            <item Android:top="-1dp" Android:bottom="0dp" Android:left="-1dp" Android:right="-1dp">
                <shape Android:shape="rectangle">
                    <stroke   
                        Android:width="1dp"
                        Android:color="@color/bottomline_btn" />                        
                    <solid Android:color="#00000000" />
                    <corners Android:radius="0dp" />
                </shape>
            </item>         
        </layer-list>
    </item>  
</selector>


<color name="topline_btn">#31ffffff</color>
<color name="bottomline_btn">#31000000</color>

<color name="blue">#449def</color>
<color name="blue_end">#2f6699</color>
12
Şükriye

Avez-vous essayé de compenser par quelque chose comme ça

http://Android.amberfog.com/?p=9

1
Bo.

Ma solution est d'ajouter 9-patch comme dernier élément de la couche:

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item>
        <shape>
            <solid Android:color="@color/tab_button_active_layer2" />
        </shape>
    </item>
    <item Android:bottom="@dimen/tab_button_active_bottom_bar_width">
        <shape>
            <solid Android:color="@color/tab_button_active_layer1" />
        </shape>
    </item>
    <!-- 9-patch drawable -->
    <item Android:drawable="@drawable/tab_button_border_top"/>
</layer-list>
0
Mickey Tin