我如何做一个点/虚线在Android?

我要画一条虚线。我现在用这个来画实线:

LinearLayout divider = new LinearLayout( this );
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.FILL_PARENT, 2 );
divider.setLayoutParams( params );
divider.setBackgroundColor( getResources().getColor( R.color.grey ) );

我需要这样的东西，但不是实心的，而是虚线的。我想避免在透明布局和固体布局之间交替制作数百个布局。

261071 次浏览
小开

使用ShapeDrawable代替LinearLayout，使用dashWidth和dashGap

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

小开

路径效果设置在绘制对象上

Paint fgPaintSel = new Paint();
fgPaintSel.setARGB(255, 0, 0,0);
fgPaintSel.setStyle(Style.STROKE);
fgPaintSel.setPathEffect(new DashPathEffect(new float[] {10f,20f}, 0f));

你可以通过在int[]数组中提供更多的数字来创建各种各样的点状图案，它指定了破折号和缺口的比例。这是一条简单的虚线。

小开
最佳答案

无需java代码:

drawable/dotted.xml:

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


<stroke
android:color="#FF00FF"
android:dashWidth="10px"
android:dashGap="10px"
android:width="1dp"/>
</shape>

view.xml:

<ImageView
android:layout_width="match_parent"
android:layout_height="5dp"
android:src="@drawable/dotted"
android:layerType="software" />
< p >效应: enter image description here < / p >
小开

使用XML创建虚线 在drawable文件夹中创建xml，并将该背景设置为你想设置虚线边框的项目

创建XML背景"dashed_border":

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#ffffff" />
<stroke
android:dashGap="5dp"
android:dashWidth="5dp"
android:width="1dp"
android:color="#0000FF" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
</layer-list>

添加背景到项目:

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/dashed_border"/>
小开

我自定义了一个虚线，支持水平& &;垂直虚线。下面的代码:

public class DashedLineView extends View
{
private float density;
private Paint paint;
private Path path;
private PathEffect effects;


public DashedLineView(Context context)
{
super(context);
init(context);
}


public DashedLineView(Context context, AttributeSet attrs)
{
super(context, attrs);
init(context);
}


public DashedLineView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
init(context);
}


private void init(Context context)
{
density = DisplayUtil.getDisplayDensity(context);
paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(density * 4);
//set your own color
paint.setColor(context.getResources().getColor(R.color.XXX));
path = new Path();
//array is ON and OFF distances in px (4px line then 2px space)
effects = new DashPathEffect(new float[] { 4, 2, 4, 2 }, 0);


}


@Override
protected void onDraw(Canvas canvas)
{
// TODO Auto-generated method stub
super.onDraw(canvas);
paint.setPathEffect(effects);
int measuredHeight = getMeasuredHeight();
int measuredWidth = getMeasuredWidth();
if (measuredHeight <= measuredWidth)
{
// horizontal
path.moveTo(0, 0);
path.lineTo(measuredWidth, 0);
canvas.drawPath(path, paint);
}
else
{
// vertical
path.moveTo(0, 0);
path.lineTo(0, measuredHeight);
canvas.drawPath(path, paint);
}


}
}
小开

我使用下面的作为布局的背景:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"
android:color="android:@color/black"
/>
</shape>
小开

创建xml (view_line_dot .xml):

<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="#ffff0017"
android:dashGap="3dp"
android:dashWidth="1dp" />


<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:background="@drawable/view_line_dotted" />
小开

当我想要绘制虚线时，我所做的是定义一个可绘制的dash_line.xml:

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

然后在布局中定义一个带有背景的视图dash_line。注意要包括android: layerType = "软件"，否则它将不起作用。

<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@drawable/dash_line"
android:layerType="software" />
小开

通过使用这个类，您可以对多行文本应用“虚线和下划线”效果。使用dashpatheeffect你必须关闭你的TextView的hardwareAccelerated(虽然dashpatheeffect方法有一个长文本的问题)。你可以在这里找到我的示例项目:https://github.com/jintoga/Dashed-Underlined-TextView/blob/master/Untitled.png。

public class DashedUnderlineSpan implements LineBackgroundSpan, LineHeightSpan {


private Paint paint;
private TextView textView;
private float offsetY;
private float spacingExtra;


public DashedUnderlineSpan(TextView textView, int color, float thickness, float dashPath,
float offsetY, float spacingExtra) {
this.paint = new Paint();
this.paint.setColor(color);
this.paint.setStyle(Paint.Style.STROKE);
this.paint.setPathEffect(new DashPathEffect(new float[] { dashPath, dashPath }, 0));
this.paint.setStrokeWidth(thickness);
this.textView = textView;
this.offsetY = offsetY;
this.spacingExtra = spacingExtra;
}


@Override
public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int v,
Paint.FontMetricsInt fm) {
fm.ascent -= spacingExtra;
fm.top -= spacingExtra;
fm.descent += spacingExtra;
fm.bottom += spacingExtra;
}


@Override
public void drawBackground(Canvas canvas, Paint p, int left, int right, int top, int baseline,
int bottom, CharSequence text, int start, int end, int lnum) {
int lineNum = textView.getLineCount();
for (int i = 0; i < lineNum; i++) {
Layout layout = textView.getLayout();
canvas.drawLine(layout.getLineLeft(i), layout.getLineBottom(i) - spacingExtra + offsetY,
layout.getLineRight(i), layout.getLineBottom(i) - spacingExtra + offsetY,
this.paint);
}
}
}

结果:

破线下划线

小开

我不知道为什么，但投票的答案不适合我。我这样写，效果不错。
定义一个自定义视图:

public class XDashedLineView extends View {


private Paint   mPaint;
private Path    mPath;
private int     vWidth;
private int     vHeight;


public XDashedLineView(Context context) {
super(context);
init();
}


public XDashedLineView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}


public XDashedLineView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}


private void init() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#3F577C"));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setPathEffect(new DashPathEffect(new float[] {10,10}, 0));
mPath = new Path();
}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
this.vWidth = getMeasuredWidth();
this.vHeight = getMeasuredHeight();
mPath.moveTo(0, this.vHeight / 2);
mPath.quadTo(this.vWidth / 2, this.vHeight / 2, this.vWidth, this.vHeight / 2);
}


@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
}

然后你可以在你的xml中使用它:

        <com.YOUR_PACKAGE_NAME.XDashedLineView
android:layout_width="690dp"
android:layout_height="1dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="620dp"/>
小开

我已经创建了一个带有自定义视图的库来解决这个问题，它使用起来应该非常简单。更多信息请参见https://github.com/Comcast/DahDit。你可以像这样添加虚线:

<com.xfinity.dahdit.DashedLine
android:layout_width="250dp"
android:layout_height="wrap_content"
app:dashHeight="4dp"
app:dashLength="8dp"
app:minimumDashGap="3dp"
app:layout_constraintRight_toRightOf="parent"
android:id="@+id/horizontal_dashes"/>
小开

唯一对我有用的方法，我认为这是最简单的方法，就是使用Path和一个paint对象，就像这样:

    Paint paintDash = new Paint();
paintDash.setARGB(255, 0, 0, 0);
paintDash.setStyle(Paint.Style.STROKE);
paintDash.setPathEffect(new DashPathEffect(new float[]{10f,10f}, 0));
paintDash.setStrokeWidth(2);
Path pathDashLine = new Path();

然后onDraw():(重要调用重置，如果你改变这些点之间的onDraw调用，导致路径保存所有的移动)

    pathDashLine.reset();
pathDashLine.moveTo(porigenX, porigenY);
pathDashLine.lineTo(cursorX,cursorY);
c.drawPath(pathDashLine, paintDash);
小开

如果你正在寻找一条垂直线使用这个绘图。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-8dp"
android:bottom="-8dp"
android:left="-8dp">
<shape>
<solid android:color="@android:color/transparent"/>
<stroke
android:width="4dp"
android:color="#ffffff"
android:dashGap="4dp"
android:dashWidth="4dp"/>
</shape>
</item>
</layer-list>

顶部、底部和左侧的负值删除形状不需要的边，只留下一条虚线。

在视图中使用它。

<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="@drawable/dash_line_vertical"
android:layerType="software" />
小开

最佳解决方案的虚线背景工作完美

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:dashGap="3dp"
android:dashWidth="2dp"
android:width="1dp"
android:color="@color/colorBlack" />
</shape>
小开
我已经为EditText创建了虚线。给你。 创建新的xml。代码:

.xml 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000000"
android:dashGap="3dp"
android:dashWidth="1dp" />


<solid android:color="#00FFFFFF" />


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

并使用您的新xml文件在您的EditText例如:

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/dashed_border"/>

干杯!：）

小开

与tier777类似，这里有一个水平线的解决方案:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-1dp">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#111"
android:dashWidth="8dp"
android:dashGap="2dp"
/>
<solid android:color="@android:color/transparent" />
</shape>
</item>
</layer-list>

线索是<item android:top="-1dp">。

为了在旧设备(<= API 21)上显示虚线，你应该用android:layerType="software"创建一个视图(参见Android虚线可绘制潜在的ICS错误):

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@drawable/dashed_line"
android:layerType="software"
/>

此外，你也可以将没有android:layerType="software"的相同视图添加到layout-v23以获得更好的性能，但我不确定它是否适用于所有使用API 23的设备。

小开

我喜欢来自Ruidge的解决方案，但我需要来自XML的更多控制。所以我把它改为Kotlin并添加了属性。

1)复制Kotlin类:

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View


class DashedDividerView : View {
constructor(context: Context) : this(context, null, 0)
constructor(context: Context, attributeSet: AttributeSet) : this(context, attributeSet, 0)


companion object {
const val DIRECTION_VERTICAL = 0
const val DIRECTION_HORIZONTAL = 1
}


private var dGap = 5.25f
private var dWidth = 5.25f
private var dColor = Color.parseColor("#EE0606")
private var direction = DIRECTION_HORIZONTAL
private val paint = Paint()
private val path = Path()


constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
) {
val typedArray = context.obtainStyledAttributes(
attrs,
R.styleable.DashedDividerView,
defStyleAttr,
R.style.DashedDividerDefault
)


dGap = typedArray.getDimension(R.styleable.DashedDividerView_dividerDashGap, dGap)
dWidth = typedArray.getDimension(R.styleable.DashedDividerView_dividerDashWidth, dWidth)
dColor = typedArray.getColor(R.styleable.DashedDividerView_dividerDashColor, dColor)
direction =
typedArray.getInt(R.styleable.DashedDividerView_dividerDirection, DIRECTION_HORIZONTAL)


paint.color = dColor
paint.style = Paint.Style.STROKE
paint.pathEffect = DashPathEffect(floatArrayOf(dWidth, dGap), 0f)
paint.strokeWidth = dWidth


typedArray.recycle()
}


override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
path.moveTo(0f, 0f)


if (direction == DIRECTION_HORIZONTAL) {
path.lineTo(measuredWidth.toFloat(), 0f)
} else {
path.lineTo(0f, measuredHeight.toFloat())
}
canvas.drawPath(path, paint)
}


}

2)在< em > / res < / em >目录中创建一个< em > attr < / em >文件并添加它

 <declare-styleable name="DashedDividerView">
<attr name="dividerDashGap" format="dimension" />
<attr name="dividerDashWidth" format="dimension" />
<attr name="dividerDashColor" format="reference|color" />
<attr name="dividerDirection" format="enum">
<enum name="vertical" value="0" />
<enum name="horizontal" value="1" />
</attr>
</declare-styleable>

3)给< em > < / em >风格文件添加一个样式

 <style name="DashedDividerDefault">
<item name="dividerDashGap">2dp</item>
<item name="dividerDashWidth">2dp</item>
<!-- or any color -->
<item name="dividerDashColor">#EE0606</item>
<item name="dividerDirection">horizontal</item>
</style>

4)现在你可以使用默认样式了

<!-- here will be your path to the class -->
<com.your.package.app.DashedDividerView
android:layout_width="match_parent"
android:layout_height="2dp"
/>

或者在XML中设置属性

<com.your.package.app.DashedDividerView
android:layout_width="match_parent"
android:layout_height="2dp"
app:dividerDirection="horizontal"
app:dividerDashGap="2dp"
app:dividerDashWidth="2dp"
app:dividerDashColor="@color/light_gray"/>
小开

这些答案对我都没用。大多数答案都给出了一个半透明的边框。为了避免这种情况，您需要再次用另一个具有您喜欢的颜色的容器包装您的容器。这里有一个例子:

这就是它的样子

dashed_border_layout.xml

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/black"
android:background="@drawable/dashed_border_out">
<LinearLayout
android:layout_width="150dp"
android:layout_height="50dp"
android:padding="5dp"
android:background="@drawable/dashed_border_in"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is&#10;Dashed Container"
android:textSize="16sp" />
</LinearLayout>

dashed_border_in.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<corners android:radius="10dp" />
<solid android:color="#ffffff" />
<stroke
android:dashGap="5dp"
android:dashWidth="5dp"
android:width="3dp"
android:color="#0000FF" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>

dashed_border_out.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<corners android:radius="12dp" />
</shape>
</item>

小开

对于画布上的点状效果，将此属性设置为paint对象:

paint.setPathEffect(new DashPathEffect(new float[] {0,30}, 0));

并根据你的渲染效果改变值30:它代表每个点之间的“距离”。

enter image description here


提交答案