Создание горизонтальных и вертикальных пунктирных линий в Android

Если вид имеет ширину 1 дп, то простого поворота горизонтальной линии недостаточно. Длина вертикальной линии будет равна 1 dp, поскольку она сначала рисуется горизонтально, а затем поворачивается. Вот хитрость, чтобы решить эту проблему:

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

Я думаю, что я нашел «более чистое» решение этой проблемы, создав собственный вид, содержащий определенный код для рисования пунктирных линий (как в вертикальной, так и горизонтальной ориентации), и набор атрибутов, чтобы было очень легко использовать его из макетов XML. Основное преимущество этого подхода перед методом «повернутой линии» состоит в том, что вы можете установить размер представления пунктирной линии, как обычно, без необходимости беспокоиться о том, как представление будет вести себя после поворота (как только вращение применяется ко всему пунктирному виду линии, а не только к рисуемой линии).

Итак, пошаговое решение:

1. Создайте файл «/res/values/attrs.xml» со ​​следующим содержимым:

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

Это создает атрибуты для управления пользовательским представлением. Примечание. Если указанный выше файл уже существует в вашем проекте, просто скопируйте / вставьте блок «Declare-Stylable» внутри существующего блока «Resources».

2. Создайте класс DividerView и вставьте содержимое ниже:

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

3. Чтобы использовать автоматическое заполнение атрибутов в файлах макета, добавьте следующее определение пространства имен в самом верхнем контейнере:

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

Замените com.example именем вашего пакета. Вы также можете изменить custom на любой префикс, который лучше соответствует вашим потребностям. Примечание. Может потребоваться перезапустить Eclipse, чтобы автоматически завершить работу после изменений в файле attrs.xml.

4. И, наконец, создайте свои пунктирные линии, вставив следующий элемент в макет, как и любой другой вид:

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

Надеюсь, это поможет!

Это работает для меня:

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>

В макете:

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

Для вертикальной линии:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape
        android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ff00ff"
            android:dashWidth="8dp"
            android:dashGap="5dp" />
        <size android:width="120dp" />
    </shape>
</rotate>

Для горизонтальной линии:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android">
    <shape
        android:shape="line">
        <stroke
            android:width="2dp"
            android:color="@color/accent_color"
            android:dashWidth="3dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

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

Ключом для работы приведенного выше кода является использование android:layerType="software". Для получения дополнительной информации, проверьте эту ссылку.

Это хорошо решает проблему. Создайте Drawable 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>

Используйте это так

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