Como desenhar uma linha no android


157

Alguém pode dizer como desenhar uma linha no Android, talvez com um exemplo?


4
Deseja desenhar uma linha em algo ou deseja desenhar uma linha simples no layout?
Janusz

Respostas:


174

Este desenha 2 linhas que formam uma cruz no canto superior esquerdo da tela:

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

}

A atividade para iniciá-lo:

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

    }
}

3
se eu quiser adicionar uma linha em alguma outra atividade como R.layout.main Como posso adicionar?
mohan 01/09/10

1
o layout da sua atividade deve conter um objeto de visualização - não há problema. Você só precisa de um objeto View para desenhar
DonGru

1
Quero desenhar uma linha reta, como posso dar o valor startx start y stopx stopy?
mohan 6/09/10

na verdade, você pode achar que na referência desenvolvedor android, drawLine () tem os seguintes argumentos: drawLine (float STARTX, flutuar starty, flutuar stopX, flutuar stopy, Pintura pintura)
DonGru

Eu desenho uma linha no fundo usando este método. Eu quero apagar uma linha desenhada. Alguma sugestão para mim. Você pode me sugerir?
Tientuyen07 6/05/19

240

Se você deseja ter uma linha simples em seu layout para separar duas vistas, você pode usar uma vista genérica com a altura e largura que deseja que a linha tenha e uma cor de fundo definida.

Com essa abordagem, você não precisa substituir uma Visualização ou usar uma Tela, basta adicionar a linha no xml.

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

O código de exemplo que forneci irá gerar uma linha que preenche a tela em largura e tem uma altura de um dp.

Se você tiver problemas com o desenho da linha em telas pequenas, considere alterar a altura da linha para px. O problema é que, em uma tela ldpi, a linha terá 0,75 pixel de altura. Às vezes, isso pode resultar em um arredondamento que faz a linha desaparecer. Se isso for um problema para o seu layout, defina a largura da linha de um arquivo de recursos e crie um arquivo de recursos separado para telas pequenas que definem o valor como 1px em vez de 1dp.

Essa abordagem só pode ser usada se você desejar linhas horizontais ou verticais usadas para dividir elementos de layout. Se você deseja obter algo como uma cruz que é desenhada em uma imagem, minha abordagem não funcionará.


Como adicionar a mesma exibição em tempo de execução dinamicamente?
precisa

Lakshmanan, forneça um ID e defina sua visibilidade como View.GONE ou VISIBLE em tempo de execução
Hatim

Uma cruz também pode ser feita com esta solução, basta adicionar o atributo "rotação", conforme a cruz desejada, e usar duas visualizações.
Arpit J.

62

Há duas maneiras principais de desenhar uma linha, usando a Canvasou usando a View.

Desenhando uma linha com tela

A partir da documentação , vemos que precisamos usar o seguinte método:

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

Aqui está uma foto:

canvas.drawLine

O Paintobjeto apenas diz Canvasqual cor pintar a linha, qual deve ser a largura e assim por diante.

Aqui está um código de exemplo:

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

Desenhando uma linha com vista

Se você precisar apenas de uma linha reta horizontal ou vertical, a maneira mais fácil talvez seja usar um Viewno seu arquivo de layout xml. Você faria algo assim:

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

Aqui está uma imagem com duas linhas (uma horizontal e outra vertical) para mostrar como seria:

desenhando uma linha com uma vista no layout xml

E aqui está o layout xml completo para isso:

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

você é um gênio mano ... Eu tenho tentado descobrir como elas obtêm as coordenadas enquanto desenha uma vista usando tinta ... mas a imagem que você postou me ajudou a entender muito bem ... Existe qualquer ferramenta on-line para simular esse gráfico, então eu o uso durante a codificação?

é possível obter um retorno de chamada para saber que a visualização foi finalizada, desenho #

Estou tentando desenhar duas linhas diferentes. Uma vez que se a primeira linha foi desenhada, eu tenho que chamar a segunda ...

Por que você não desenha as duas linhas no mesmo onDraw?
21816 Suragch

1
@ tientuyen07, Se você estiver usando, envolva onDraw()seu código de desenho com if (someCondition) { draw... }, make someCondition = falsee, em seguida , acesse invalidate()sua visualização. Redesenhará a visualização sem a linha.
Suragch

22

Você pode desenhar várias linhas retas no modo de exibição usando o exemplo de pintura com dedos, que está no desenvolvedor Android. link de exemplo

Basta comentar: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); você será capaz de desenhar linhas retas.

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

}

2
Alguém pode me ajudar como posso ver meus elementos xml no meu ponto de vista que estão no layout relativo? você pode simplesmente seguir o exemplo acima e me sugerir.
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);

        }
}
}

8

para linha horizontal no layout:

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

para linha vertical no layout:

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

ambos são iguais. o que faz a diferença entre vertical e horizontal?
Burhan ARAS

@ Burhan ARAS - eles não são iguais à largura e altura são alteradas em duas vistas. Ele desenha apenas linhas verticais e horz.
Mohanraj 24/07

7

Simples

 <TextView
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#c0c0c0"
    android:id="@+id/your_id"
    android:layout_marginTop="160dp" />

5
canvas.drawLine(10, 10, 90, 10, paint);
canvas.drawLine(10, 20, 90, 20, paint);

Isso criará uma linha horizontal reta, espero que ajude !.


3

Você pode criar um desenho como círculo, linha, retângulo etc. através de formas em xml da seguinte maneira:

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

3

esse código adiciona linha horizontal a um layout linear

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

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

1

Para melhorar as respostas fornecidas por @Janusz

Adicionei isso aos meus 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>

Então, em meus layouts, é menos código e mais simples de ler.

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

se você quiser fazer o espaçamento horizontal entre linhas, faça o acima.


E para a linha vertical entre duas Views, você deve substituir o android: layout_width parameters (attribute) pelo android: layout_height


1

Outra abordagem para desenhar uma linha programaticamente usando o 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);

  }
}

1

Se você estiver trabalhando, ConstraintLayoutprecisará definir pelo menos duas restrições para a linha aparecer. Como isso:

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

Embora eu tenha definido três restrições.


-1

ou se você só quer uma linha

TextView line = new TextView(this);
            line.setBackgroundResource(android.R.color.holo_red_dark);
            line.setHeight((int) Utility.convertDpToPixel(1,this));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.