Saltar al contenido

Cómo dibujar una línea en Android

Solución:

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 usted mismo, simplemente agregue la línea en xml de manera simple y limpia.

<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 la pantalla de ancho 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. A veces, esto puede resultar en un redondeo que hace que la línea desaparezca. Si esto es un problema para su diseño, defina el ancho de la línea en un archivo de recursos y cree un archivo de recursos por separado para pantallas pequeñas que establezca el valor en 1px en lugar de 1dp.

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

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

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

    }
}

Hay dos formas principales de trazar una línea, utilizando un Canvas o usando un View.

Dibujar 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 imagen:

canvas.drawLine

los Paint el objeto solo dice Canvas de qué color pintar la línea, qué tan ancha debe ser, etc.

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 View en 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 xml completo 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>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *