Question

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

我想像这样画画

enter image description here

对于水平线

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

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

enter image description here

如何绘制垂直线。

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>

OR

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

Answer 2

我认为通过创建一个包含特定代码的自定义视图来绘制虚线（在垂直和水平方向上），以及一系列属性使我很容易找到这个问题的“更清洁”的解决方案。从XML布局中使用它。这种方法相对于“旋转线”方法的主要优点是，您可以按照通常的方式设置虚线视图的大小，而不必担心视图在旋转后的行为（一旦旋转适用于整个虚线视图，而不仅适用于正在绘制的线。）

所以这是一步一步的解决方案：

使用以下内容创建文件“/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”块。

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

要在布局文件中使用属性的自动完成，请添加以下名称最顶层容器上的空间定义：
```
xmlns:custom="http://schemas.android.com/apk/res/com.example"
```

将com.example替换为您的包名称。您还可以通过任何更符合您需求的前缀更改custom。注意：您可能需要重新启动Eclipse以在更改attrs.xml文件后使自动完成工作。

最后通过插入以下内容来创建虚线布局上的元素，与任何其他视图一样：

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

Answer 6

这很好地解决了问题创建可绘制的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" />

Answer 7

<?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"。有关更多信息，请检查this链接。

Answer 8

此解决方案正在100％正常运行，希望对您有所帮助：

首先创建一个可绘制对象，该对象将绘制一条水平虚线。

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>

如果要使用垂直虚线，则必须按照以下步骤旋转此可绘制对象：

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>

现在您已经有了水平和垂直虚线。

使用方法：

要绘制水平线，只需在布局中添加horizontal_dashed_line.xml。例如：

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

    </RelativeLayout>

但是，如果要垂直线，只需添加vertical_dashed_line.xml而不是horizontal_dashed_line.xml。例如：

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

    </RelativeLayout>

祝你好运！

Answer 9

对于垂直线：

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

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

9 个答案: