在android中创建水平和垂直虚线

Question

我想在android中使用形状绘制水平和垂直虚线.

我想这样画

对于水平线

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

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

</shape>

对于垂直线

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

但不显示我的输出的垂直虚线显示如下

如何绘制垂直线.

Answer 1

我找到了解决方案

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

要么

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

Answer 2

我想通过创建一个包含特定代码的自定义视图来绘制虚线(在垂直和水平方向上)以及一系列属性使我很容易从这个问题中找到一个"更清洁"的解决方案. 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"块.

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

我希望它有所帮助!

Answer 3

如果视图的宽度为1dp,则仅旋转水平线是不够的.垂直线的长度将是1dp,因为它首先水平绘制,然后旋转.这是一个解决这个问题的技巧:

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

Answer 4

这对我有用:

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

Answer 5

为此，您应该创建 2 个不同的 drawable，

1.水平线： 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. 垂直可绘制： 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>

现在，您需要做的就是将上述垂直 XML 应用到视图中，

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

完整代码：

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