Как сделать пунктирную / пунктирную линию в 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 ) );
Мне нужно что-то вроде этого, но пунктирной, а не сплошной. Я хотел бы избежать создания сотен макетов, чередующихся между прозрачным макетом и сплошным макетом.
14 ответов:
без кода 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="#C7B299" android:dashWidth="10px" android:dashGap="10px" android:width="1dp"/> </shape>вид.XML-код:
<ImageView android:layout_width="match_parent" android:layout_height="5dp" android:src="@drawable/dotted" android:layerType="software" />
эффект пути устанавливается на объект paint
Paint fgPaintSel = new Paint(); fgPaintSel.setARGB(255, 0, 0,0); fgPaintSel.setStyle(Style.STROKE); fgPaintSel.setPathEffect(new DashPathEffect(new float[] {10,20}, 0));вы можете создавать всевозможные пунктирные узоры, предоставляя больше чисел в массиве int [], который определяет отношения тире и зазора. Это простая, одинаково пунктирная линия.
Это поможет вам. Создание пунктирной линии с помощью XML. Создайте xml в папке drawable и дайте этот фон элементу, для которого вы хотите установить пунктирную границу.
- - - - > создание 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"/>
создать xml (view_line_dotted.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" />
что я сделал, когда я хотел нарисовать пунктирную линию, чтобы определить drawable 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" />
У меня есть пользовательский пунктир, который поддерживает горизонтальную и вертикальную пунктирную линию . код ниже:
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); } } }
С помощью этого класса вы можете применить эффект "пунктир и подчеркивание" к нескольким строкам текста. чтобы использовать DashPathEffect, вам нужно отключить hardwareAccelerated вашего TextView (хотя метод DashPathEffect имеет проблему с длинным текстом). вы можете найти мой пример проекта здесь: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); } } }результат:
я использовал ниже в качестве фона для макета:
<?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>
используйте ShapeDrawable вместо LinearLayout и играйте с dashWidth и dashGap
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
лучшее решение для точечного фона работает идеально
<?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>
Если вы ищете вертикальную линию, используйте этот drawable.
<?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" />
Я не знаю, почему, но проголосовали ответы не работают для меня. Я пишу это так и работает хорошо.
Определите пользовательский вид: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"/>
единственное, что сработало для меня, и я думаю, что это самый простой способ-использовать путь с объектом 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);

Comments