web-dev-qa-db-fra.com

Création de lignes pointillées horizontales et verticales dans android

Je veux dessiner des lignes pointillées horizontales et verticales dans Android en utilisant des formes.

Je veux dessiner comme ça

enter image description here

Pour ligne horizontale

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="line" >

    <stroke
        Android:dashGap="6px"
        Android:dashWidth="6px"
        Android:color="#C7B299" />

</shape>

Pour ligne verticale

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="line" >
<size
     Android:height="400dp"/>
    <stroke
        Android:dashGap="6px"
        Android:dashWidth="6px"
        Android:color="#C7B299" />

</shape>

Mais la ligne pointillée verticale qui n'affiche pas ma sortie montre comme ceci

enter image description here

Comment dessiner une ligne verticale.

androidxmlandroid-layout
31
Prasanth S

J'ai trouvé la solution

<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="90"
    Android:toDegrees="90" >

    <shape Android:shape="line" >
        <stroke
            Android:dashGap="6px"
            Android:dashWidth="6px"
            Android:color="#C7B299" />
    </shape>

</rotate>

OR

<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="90"
    Android:toDegrees="90"
    Android:drawable="@drawable/horizontal_line"/>
43
user2888923

Je pense que j'ai trouvé une solution "plus propre" pour ce problème en créant une vue personnalisée contenant du code spécifique pour dessiner les lignes en pointillés (dans les orientations verticales et horizontales), et un tas d'attributs pour le rendre très facile à utiliser à partir de Dispositions XML. Le principal avantage de cette approche par rapport à la méthode de la "ligne pivotée" est que vous pouvez définir la taille de la vue en pointillés comme vous le feriez normalement, sans avoir à vous soucier du comportement de la vue après la rotation (une fois la la rotation s’applique à l’ensemble de la vue en pointillés et pas seulement à la ligne en cours de tracé).

Voici donc la solution étape par étape:

  1. Créez le fichier "/res/values/attrs.xml" avec le contenu suivant:

    <?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="DividerView">
    <attr name="color" format="color" />
    <attr name="dashLength" format="dimension" />
    <attr name="dashGap" format="dimension" />
    <attr name="dashThickness" format="dimension" />
    <attr name="orientation" format="enum">
        <enum name="horizontal" value="0" />
        <enum name="vertical" value="1" />
    </attr>
</declare-styleable>

</resources>

Cela crée les attributs pour contrôler la vue personnalisée. Remarque: Si le fichier ci-dessus existe déjà dans votre projet, copiez/collez simplement le bloc "declare-stylable" à l'intérieur du bloc "resources" existant.

  1. Créez la classe DividerView et collez le contenu ci-dessous:

    public class DividerView extends View {
static public int ORIENTATION_HORIZONTAL = 0;
static public int ORIENTATION_VERTICAL = 1;
private Paint mPaint;
private int orientation;

public DividerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    int dashGap, dashLength, dashThickness;
    int color;

    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0);

    try {
        dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5);
        dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5);
        dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3);
        color = a.getColor(R.styleable.DividerView_color, 0xff000000);
        orientation = a.getInt(R.styleable.DividerView_orientation, ORIENTATION_HORIZONTAL);
    } finally {
        a.recycle();
    }

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(color);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(dashThickness);
    mPaint.setPathEffect(new DashPathEffect(new float[] { dashLength, dashGap, }, 0));
}

public DividerView(Context context) {
    this(context, null);
}

@Override
protected void onDraw(Canvas canvas) {
    if (orientation == ORIENTATION_HORIZONTAL) {
        float center = getHeight() * .5f; 
        canvas.drawLine(0, center, getWidth(), center, mPaint);
    } else {
        float center = getWidth() * .5f; 
        canvas.drawLine(center, 0, center, getHeight(), mPaint);
    }
}
}

  2. Afin d'utiliser la saisie automatique des attributs sur vos fichiers de disposition, ajoutez la définition d'espace de nom suivante sur le conteneur le plus haut:

    xmlns:custom="http://schemas.Android.com/apk/res/com.example"

Remplacer com.example par le nom de votre colis. Vous pouvez également modifier custom par n'importe quel préfixe mieux adapté à vos besoins. Remarque: vous devrez peut-être redémarrer Eclipse pour que la saisie automatique fonctionne après les modifications apportées au fichier attrs.xml.

  1. Et enfin créez vos lignes pointillées en insérant l'élément suivant sur votre mise en page, comme toute autre vue:

    <com.example.DividerView
    Android:layout_width="1dp"
    Android:layout_height="fill_parent"
    Android:layerType="software" 
    custom:color="@color/grey"
    custom:orientation="vertical"
    custom:dashLength="1dp"
    custom:dashGap="1dp"
    custom:dashThickness="1dp" />

J'espère que ça aide!

35
ulix

Si la vue a une largeur de 1 dp, il ne suffit pas de simplement tourner votre ligne horizontale. La longueur de la ligne verticale sera de 1 dp car elle est d'abord dessinée horizontalement, puis tournée. Voici une astuce pour résoudre ce problème:

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:left="-300dp"
        Android:right="-300dp">
        <rotate
            Android:drawable="@drawable/dash_line_divider_horizontal"
            Android:fromDegrees="90"
            Android:toDegrees="90"/>
    </item>
</layer-list>
26
Sfseyhan

Cela fonctionne pour moi:

vertical_line.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <solid Android:color="@Android:color/transparent"/>
    <stroke
        Android:width="1px"
        Android:color="#60000000"
        Android:dashGap="5px"
        Android:dashWidth="5px" />
</shape>

Dans la mise en page:

<View
        Android:layout_width="1dp"
        Android:layout_height="match_parent"
        Android:layout_centerHorizontal="true"
        Android:background="@drawable/vertical_line" />
14
Simon Thomas

Celui-ci résout bien le problème Créez un dessinable line_dash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:bottom="-1dp"
        Android:left="-1dp"
        Android:right="-1dp"
        Android:top="0dp">

        <shape Android:shape="rectangle">
            <stroke
                Android:width="1dp"
                Android:color="@color/grey_20"
                Android:dashGap="3dp"
                Android:dashWidth="3dp" />

            <solid Android:color="@Android:color/transparent" />

            <padding
                Android:bottom="10dp"
                Android:left="10dp"
                Android:right="10dp"
                Android:top="10dp" />
        </shape>
    </item>
</layer-list>

Utilisez-le comme ceci

 <View
       Android:layout_width="match_parent"
       Android:layout_height="1dp"
       Android:layout_margin="@dimen/spacing_middle"
       Android:background="@drawable/line_dash" />
1
Job M
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:fromDegrees="90"
        Android:toDegrees="90">
    <shape Android:shape="line">
        <stroke
                Android:color="@color/darkGray"
                Android:width="1dp"
                Android:dashGap="4dp"
                Android:dashWidth="2dp"/>
    </shape>
</rotate>

<View
                Android:layerType="software"
                Android:background="@drawable/bg_vertical_dash_gray_1dp"
                Android:layout_width="@dimen/_15sdp"
                Android:layout_height="@dimen/_30sdp"/>

La clé pour que le code ci-dessus fonctionne soit en utilisant Android:layerType="software". Pour plus d'informations, consultez le lien this .

0
Sagar Wankhede

Cette solution fonctionne à 100% et souhaite vous aider:

Créez d'abord un dessin qui dessinera une ligne pointillée horizontale.

Let dashed line drawable name is horizontal_dashed_line.xml

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

     <stroke
      Android:width="3dp"
      Android:color="#80ffffff"
      Android:dashWidth="20dp"
      Android:dashGap="5dp" />
  </shape>

si vous voulez avoir une ligne pointillée verticale, vous devez faire pivoter ce dessin en suivant:

Let drawable name is vertical_dashed_line.xml

  <?xml version="1.0" encoding="utf-8"?>
  <rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:fromDegrees="90"
    Android:toDegrees="90"
    Android:pivotX="50%"
    Android:pivotY="50%"
    Android:drawable="@drawable/horizontal_dashed_line">

  </rotate>

Vous avez maintenant une ligne pointillée horizontale et verticale.

Comment utiliser:

Pour dessiner une ligne horizontale, ajoutez simplement horizontal_dashed_line.xml dans votre mise en page. Par exemple:

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@drawable/horizontal_dashed_line"

    </RelativeLayout>

Mais si vous voulez une ligne verticale, ajoutez simplement vertical_dashed_line.xml au lieu de horizontal_dashed_line.xml.Par exemple:

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@drawable/vertical_dashed_line"

    </RelativeLayout>

Bonne chance!

0
Saiful Islam Sajib