Erstellen horizontaler und vertikaler gepunkteter Linien in Android

Question 1

Ich möchte horizontale und vertikale gepunktete Linien in Android mit Formen zeichnen.

Ich möchte so zeichnen

Für horizontale Linie

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

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

</shape>

Für vertikale Linie

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

Aber die vertikale gepunktete Linie, die meine Ausgabe nicht anzeigt, wird so angezeigt

So zeichnen Sie eine vertikale Linie.

Question 2

Ich habe die Lösung gefunden

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

ODER

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

Question 3

Wenn die Ansicht eine Breite von 1 dp hat, reicht es nicht aus, nur Ihre horizontale Linie zu drehen. Die Länge der vertikalen Linie beträgt 1 dp, da sie zuerst horizontal gezeichnet und dann gedreht wird. Hier ist ein Trick, um dieses Problem zu lösen:

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

Question 4

Ich glaube, ich habe eine “sauberere” Lösung für dieses Problem gefunden, indem ich eine benutzerdefinierte Ansicht erstellt habe, die einen bestimmten Code zum Zeichnen der gestrichelten Linien (sowohl in vertikaler als auch in horizontaler Ausrichtung) und eine Reihe von Attributen enthält, um die Verwendung sehr einfach zu machen XML-Layouts. Der Hauptvorteil dieses Ansatzes gegenüber der Methode der “gedrehten Linie” besteht darin, dass Sie die Größe der gestrichelten Linienansicht so einstellen können, wie Sie es normalerweise tun würden, ohne sich Gedanken darüber machen zu müssen, wie sich die Ansicht nach der Drehung verhalten wird (sobald die Drehung gilt für die gesamte gestrichelte Linienansicht und nicht nur für die gezeichnete Linie).

Hier also die Schritt-für-Schritt-Lösung:

Erstellen Sie die Datei „/res/values/attrs.xml“ mit folgendem Inhalt:

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

Dadurch werden die Attribute zum Steuern der benutzerdefinierten Ansicht erstellt. Hinweis: Wenn die obige Datei bereits in Ihrem Projekt vorhanden ist, kopieren Sie einfach den Block „declare-styling“ und fügen Sie ihn in den vorhandenen Block „resources“ ein.

Erstellen Sie die Klasse DividerView und fügen Sie den folgenden Inhalt ein:

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

Um die automatische Vervollständigung von Attributen für Ihre Layoutdateien zu verwenden, fügen Sie die folgende Namensraumdefinition zum obersten Container hinzu:
```
xmlns:custom="http://schemas.android.com/apk/res/com.example"
```

Ersetzen com.example nach dem Namen Ihres Pakets. Sie können sich auch ändern custom durch ein beliebiges Präfix, das Ihren Anforderungen besser entspricht. Hinweis: Möglicherweise müssen Sie Eclipse neu starten, damit die automatische Vervollständigung nach Änderungen an der Datei attrs.xml funktioniert.

Erstellen Sie schließlich Ihre gestrichelten Linien, indem Sie das folgende Element wie jede andere Ansicht in Ihr Layout einfügen:

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

Ich hoffe, es hilft!

Question 5

Um dies zu erreichen, sollten Sie 2 verschiedene drawable erstellen,

1. Horizontale Linie: res/drawable/bg_horizontal_dotted_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="0.8dp"
    android:color="@color/text_grey"
    android:dashWidth="4dp"
    android:dashGap="3dp" />
</shape>

2. Vertikal ziehbar: res/drawable/bg_dotted_line_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:left="-600dp"
    android:right="-600dp">
    <rotate
      android:drawable="@drawable/bg_horizontal_dotted_line"
      android:fromDegrees="90"
      android:visible="true" />
  </item>
</layer-list>

Jetzt müssen Sie nur noch das obige vertikale XML auf die Ansicht anwenden.

<View
            android:id="@+id/imageView7"
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:background="@drawable/bg_dotted_line_vertical"
            android:layerType="software"/>

Vollständiger Code:

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/ll_task_expanded"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:orientation="vertical"
      app:canExpand="false"
      app:expanded="true">


      <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView3"
        app:srcCompat="@drawable/ic_circle" />

      <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/imageView5"
        app:layout_constraintStart_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        app:srcCompat="@drawable/ic_circle" />

      <View
        android:id="@+id/imageView7"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:background="@drawable/bg_dotted_line_vertical"
        android:layerType="software"
        app:layout_constraintBottom_toTopOf="@+id/imageView6"
        app:layout_constraintEnd_toEndOf="@+id/imageView5"
        app:layout_constraintStart_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toBottomOf="@+id/imageView5" />

      <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="parent" />

      <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
    </androidx.constraintlayout.widget.ConstraintLayout>

Question 6

Das funktioniert bei mir:

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

Im Layout:

<View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="@drawable/vertical_line" />

Question 7

Damit löst man das Problem schön Drawable erstellen 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>

Verwenden Sie es so

 <View
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:layout_margin="@dimen/spacing_middle"
       android:background="@drawable/line_dash" />

Question 8

<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%">
    <shape android:shape="line">
            <stroke
                android:width="20dp"
                android:color="@color/blue"
                android:dashWidth="20dp"
                android:dashGap="20dp" />
    </shape>