Cómo dibujar una línea en android

158

¿Alguien puede decir cómo dibujar una línea en Android, tal vez con un ejemplo?

mohan
fuente
44
¿Desea dibujar una línea en algo o desea dibujar una línea simple en el diseño?
Janusz el

Respuestas:

175

Este dibuja 2 líneas que forman una cruz en la parte superior izquierda de la pantalla:

DrawView.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class DrawView extends View {
    Paint paint = new Paint();

    private void init() {
        paint.setColor(Color.BLACK);
    }

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

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

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

    @Override
    public void onDraw(Canvas canvas) {
            canvas.drawLine(0, 0, 20, 20, paint);
            canvas.drawLine(20, 0, 0, 20, paint);
    }

}

La actividad para iniciarlo:

StartDraw.java

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

public class StartDraw extends Activity {
    DrawView drawView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        drawView = new DrawView(this);
        drawView.setBackgroundColor(Color.WHITE);
        setContentView(drawView);

    }
}
DonGru
fuente
3
si quiero agregar una línea en alguna otra actividad como R.layout.main ¿Cómo puedo agregar?
mohan
1
El diseño de su actividad debe contener un objeto Ver, entonces no hay problema. Solo necesita un objeto Ver para dibujar
DonGru
1
Quiero dibujar una línea recta, ¿cómo puedo dar el valor startx start y stopx stopy?
mohan
En realidad, puede encontrar que en la referencia del desarrollador de Android, drawLine () tiene los siguientes argumentos: drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
DonGru
Trazo una línea en el fondo usando este método. Quiero borrar una línea dibujada. Cualquier sugerencia para mi. Me puedes sugerir?
tientuyen07
240

Si desea tener una Línea simple en su Diseño para separar dos vistas, puede usar una Vista genérica con la altura y el ancho que desea que tenga la línea y un color de fondo establecido.

Con este enfoque, no necesita anular una vista o usar un lienzo solo, simple y limpio, agregue la línea en xml.

<View
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="@android:color/black" />

El código de ejemplo que proporcioné generará una línea que llena el ancho de la pantalla y tiene una altura de un dp.

Si tiene problemas con el dibujo de la línea en pantallas pequeñas, considere cambiar la altura de la línea a px. El problema es que en una pantalla ldpi la línea tendrá una altura de 0,75 píxeles. Algunas veces esto puede resultar en un redondeo que hace que la línea se desvanezca. Si esto es un problema para su diseño, defina el ancho de la línea como un archivo de recursos y cree un archivo de recursos separado para pantallas pequeñas que establezca el valor en 1px en lugar de 1dp.

Este enfoque solo se puede usar si desea líneas horizontales o verticales que se utilizan para dividir elementos de diseño. Si desea lograr algo como una cruz que se dibuja en una imagen, mi enfoque no funcionará.

Janusz
fuente
¿Cómo puede agregar la misma vista en tiempo de ejecución que es dinámicamente?
Lakshmanan
Lakshmanan, dele una identificación y configure su visibilidad en View.GONE o VISIBLE en tiempo de ejecución
Hatim
También se puede hacer una cruz con esta solución, simplemente agregue el atributo "rotación" según la cruz que desee y use dos vistas.
Arpit J.
62

Hay dos formas principales de dibujar una línea, usando a Canvaso usando a View.

Dibujando una línea con lienzo

De la documentación vemos que necesitamos usar el siguiente método:

drawLine (float startX, float startY, float stopX, float stopY, Paint paint)

Aquí hay una foto:

canvas.drawLine

El Paintobjeto solo dice de Canvasqué color pintar la línea, qué tan ancho debe ser, y así sucesivamente.

Aquí hay un código de muestra:

private Paint paint = new Paint();
....

private void init() {
    paint.setColor(Color.BLACK);
    paint.setStrokeWidth(1f);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    startX = 20;
    startY = 100;
    stopX = 140;
    stopY = 30;

    canvas.drawLine(startX, startY, stopX, stopY, paint);
}

Dibujar una línea con vista

Si solo necesita una línea recta horizontal o vertical, entonces la forma más fácil puede ser simplemente usar una Viewen su archivo de diseño xml. Harías algo como esto:

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/black" />

Aquí hay una imagen con dos líneas (una horizontal y otra vertical) para mostrar cómo se vería:

dibujar una línea con una vista en diseño xml

Y aquí está el diseño completo de xml para eso:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:text="TextView1 in vertical linear layout" />

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/black" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:text="TextView2 in vertical linear layout" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:padding="10dp"
        android:text="TextView3 in horizontal linear layout" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@android:color/black" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:padding="10dp"
        android:text="TextView4 in horizontal linear layout" />
</LinearLayout>

</LinearLayout>
Suragch
fuente
eres un genio hermano ... He estado tratando de descubrir cómo obtienen las coordenadas mientras dibujan una vista usando pintura ... pero la imagen que has publicado me ayudó a entenderlo bastante ... ¿Hay ¿alguna herramienta en línea para simular ese gráfico, así que lo uso mientras codifico?
¿Es posible recibir una devolución de llamada para saber que la vista se ha terminado de dibujar
Estoy tratando de dibujar dos líneas diferentes. Una vez que se haya dibujado la primera línea, tengo que dibujar la segunda ...
¿Por qué no dibujas ambas líneas en el mismo dibujo?
Suragch
1
@ tientuyen07, si está utilizando onDraw(), rodee su código de dibujo con if (someCondition) { draw... }, haga someCondition = false, y luego llame invalidate()a su vista. Redibujará la vista sin la línea.
Suragch
22

Puede dibujar varias líneas rectas a la vista usando el ejemplo de pintura con dedos que se encuentra en el desarrollador de Android. enlace de ejemplo

Solo comente: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); podrá dibujar líneas rectas.

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;

public class JoinPointsActivity extends Activity  {
    /** Called when the activity is first created. */
    Paint mPaint;
    float Mx1,My1;
    float x,y;
    @Override

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       // setContentView(R.layout.main);
        MyView view1 =new MyView(this);
        view1.setBackgroundResource(R.drawable.image_0031_layer_1);
        setContentView(view1);


        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0xFFFF0000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
       // mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(10);

    }

    public class MyView extends View {

        private static final float MINP = 0.25f;
        private static final float MAXP = 0.75f;

      private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
       private Paint   mBitmapPaint;

        public MyView(Context c) {
            super(c);

            mPath = new Path();
          mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        }

        @Override
       protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(0xFFAAAAAA);
           // canvas.drawLine(mX, mY, Mx1, My1, mPaint);
           // canvas.drawLine(mX, mY, x, y, mPaint);
            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
            canvas.drawPath(mPath, mPaint);

        }

        private float mX, mY;
        private static final float TOUCH_TOLERANCE = 4;

        private void touch_start(float x, float y) {
            mPath.reset();
            mPath.moveTo(x, y);
            mX = x;
            mY = y;
        }
        private void touch_move(float x, float y) {
            float dx = Math.abs(x - mX);
            float dy = Math.abs(y - mY);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
               // mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
                mX = x;
                mY = y;
            }
        }
        private void touch_up() {
            mPath.lineTo(mX, mY);
            // commit the path to our offscreen
            mCanvas.drawPath(mPath, mPaint);
            // kill this so we don't double draw
            mPath.reset();
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    touch_start(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_MOVE:
                    touch_move(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    touch_up();
               //   Mx1=(int) event.getX();
                 //  My1= (int) event.getY();
                   invalidate();
                    break;
            }
            return true;
        }
    }

}
Hema
fuente
2
¿Alguien puede ayudarme, cómo puedo ver mis elementos xml en mi vista que están en diseño relativo? puedes seguir el ejemplo anterior y sugerirme.
Hema
9
package com.example.helloandroid;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;

public class HelloAndroid2Activity extends Activity {
    /** Called when the activity is first created. */
DrawView drawView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    drawView = new DrawView(this);
    drawView.setBackgroundColor(Color.WHITE);
    setContentView(drawView);
}
class DrawView extends View {
        Paint paint = new Paint();

        public DrawView(Context context) {
            super(context);
            paint.setColor(Color.BLUE);
        }
        @Override
        public void onDraw(Canvas canvas) {
             super.onDraw(canvas);
                canvas.drawLine(10, 20, 30, 40, paint);
                canvas.drawLine(20, 10, 50, 20, paint);

        }
}
}
vinay
fuente
8

para línea horizontal en el diseño:

 <View
            android:id="@+id/View03"
            android:layout_width="fill_parent"
            android:layout_height="5dip"
            android:background="#0f0" />

para línea vertical en el diseño:

<View
        android:id="@+id/View04"
        android:layout_width="5dip"
        android:layout_height="fill_parent"
        android:background="#0f0" />
Mohanraj
fuente
Ambos son iguales. ¿Qué hace la diferencia entre vertical y horizontal?
Burhan ARAS
@ Burhan ARAS: no son lo mismo que el ancho y la altura se cambian en dos vistas. Dibuja solo líneas verticales y horizontales.
Mohanraj
7

Uno simple

 <TextView
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#c0c0c0"
    android:id="@+id/your_id"
    android:layout_marginTop="160dp" />
shreedhar bhat
fuente
5
canvas.drawLine(10, 10, 90, 10, paint);
canvas.drawLine(10, 20, 90, 20, paint);

Esto creará una línea horizontal recta, ¡espero que ayude!

usuario712051
fuente
3

Puede hacer un dibujo como círculo, línea, rectángulo, etc. a través de formas en xml de la siguiente manera:

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

    <solid android:color="#00000000" />

    <stroke
        android:width="2dp"
        android:color="#808080" />

</shape>
Muhammad Aamir Ali
fuente
3

este código agrega línea horizontal a un diseño lineal

View view = new View(this);
LinearLayout.LayoutParams lpView = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 1); // --> horizontal
view.setLayoutParams(lpView);
view.setBackgroundColor(Color.DKGRAY);

linearLayout.addView(view);
usuario4757345
fuente
2
  final SurfaceView surf = (SurfaceView)findViewById(R.id.surface_home);
                surf.setOnTouchListener( new SurfaceView.OnTouchListener(){
                    private boolean moving = false;//stupid state
                    public boolean onTouch(View v, MotionEvent event) {
                        switch( event.getAction() ){
                        case MotionEvent.ACTION_DOWN:
                            final int x = (int)event.getX();
                            final int y = (int)event.getY();
                            final Rect bounds = mTiles.getBounds();
                            moving = bounds.intersects(x, y, x+1, y+1);
                            return true;
                        case MotionEvent.ACTION_MOVE:
                            if( moving ){
                                final int x_new = (int)event.getX();
                                final int y_new = (int)event.getY();
                                mDrawTiles.draw( new DrawLogic(){
                                    public void draw(Rect _surface) {
                                        mTiles.setBounds(
                                            x_new - mDrawWidth/2,
                                            y_new - mDrawHeight/2,
                                            x_new + mDrawWidth/2,
                                            y_new + mDrawHeight/2);
                                        }
                                    });
Sahil Mahajan Mj
fuente
1

Para mejorar las respuestas proporcionadas por @Janusz

Agregué esto a mis estilos:

<style name="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:background">?android:attr/listDivider</item>
</style>

Luego, en mis diseños hay menos código y es más fácil de leer.

<View style="@style/Divider"/>

si desea hacer un espaciado de línea horizontal, haga lo anterior.


Y para la línea vertical entre dos Vistas, debe reemplazar android: layout_width parámetros (atributos) con android: layout_height

Zar E Ahmer
fuente
1

Otro enfoque para dibujar una línea mediante programación usando ImageView

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.ImageView;

public class Test extends Activity {
  ImageView drawingImageView;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    drawingImageView = (ImageView) this.findViewById(R.id.DrawingImageView);
    Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
        .getDefaultDisplay().getWidth(), (int) getWindowManager()
        .getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawingImageView.setImageBitmap(bitmap);

    // Line
    Paint paint = new Paint();
    paint.setColor(Color.GREEN);
    paint.setStrokeWidth(10);
    int startx = 50;
    int starty = 100;
    int endx = 150;
    int endy = 210;
    canvas.drawLine(startx, starty, endx, endy, paint);

  }
}
Zar E Ahmer
fuente
1

Si está trabajando con ConstraintLayout, necesita definir al menos 2 restricciones para que aparezca la línea. Me gusta esto:

<View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@android:color/black"
        app:layout_constraintEnd_toEndOf="@+id/someView1"
        app:layout_constraintStart_toStartOf="@+id/someView2"
        app:layout_constraintTop_toBottomOf="@+id/someView3" />

Aunque definí 3 restricciones.

Kashif
fuente
-1

o si solo quieres una línea

TextView line = new TextView(this);
            line.setBackgroundResource(android.R.color.holo_red_dark);
            line.setHeight((int) Utility.convertDpToPixel(1,this));
Prajwal Udupa
fuente