Come disegnare una linea in Android


158

Qualcuno può dire come disegnare una linea in Android, forse con un esempio?


4
Vuoi disegnare una linea in qualcosa o vuoi disegnare una linea semplice nel layout?
Janusz,

Risposte:


175

Questo disegna 2 linee che formano una croce nella parte superiore sinistra dello schermo:

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

}

L'attività per avviarlo:

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 voglio aggiungere una linea in qualche altra attività come R.layout.main Come posso aggiungere?
Mohan,

1
il layout della tua attività deve contenere un oggetto View - quindi non è un problema. Hai solo bisogno di un oggetto View su cui attingere
DonGru,

1
Voglio disegnare una linea retta come posso dare il valore startx start y stopx stopy?
Mohan,

in realtà puoi trovare che nel riferimento per gli sviluppatori Android, drawLine () ha i seguenti argomenti: drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
DonGru

Traccio una linea sullo sfondo usando questo metodo. Voglio cancellare una linea tracciata. Qualche suggerimento per me. Mi puoi suggerire?
tientuyen07

240

Se si desidera avere una linea semplice nel layout per separare due viste, è possibile utilizzare una vista generica con l'altezza e la larghezza che si desidera avere la linea e un colore di sfondo impostato.

Con questo approccio non è necessario sovrascrivere una vista o utilizzare una tela da soli semplicemente semplice e pulito aggiungere la linea in xml.

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

Il codice di esempio che ho fornito genererà una linea che riempie lo schermo in larghezza e ha un'altezza di un dp.

Se hai problemi con il disegno della linea su piccoli schermi, considera di modificare l'altezza della linea in px. Il problema è che su uno schermo ldpi la linea sarà alta 0,75 pixel. A volte questo può comportare un arrotondamento che fa svanire la linea. Se questo è un problema per il layout, definire la larghezza della linea di un file di risorse e creare un file di risorse separato per schermi di piccole dimensioni che imposta il valore su 1px anziché 1dp.

Questo approccio è utilizzabile solo se si desidera linee orizzontali o verticali utilizzate per dividere gli elementi del layout. Se vuoi ottenere qualcosa come una croce disegnata in un'immagine, il mio approccio non funzionerà.


Come può aggiungere la stessa vista in fase di esecuzione che è dinamicamente?
Lakshmanan,

Lakshmanan, dagli un id e imposta la sua visibilità su View.GONE o VISIBLE in fase di esecuzione
Hatim

Con questa soluzione è anche possibile creare una croce, è sufficiente aggiungere l'attributo "rotazione" in base alla croce desiderata e utilizzare due viste.
Arpit J.

62

Esistono due modi principali per disegnare una linea, usando a Canvaso usando a View.

Tracciare una linea con tela

Dalla documentazione vediamo che dobbiamo usare il seguente metodo:

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

Ecco una foto:

canvas.drawLine

L' Paintoggetto dice solo di Canvasche colore deve dipingere la linea, quanto dovrebbe essere larga e così via.

Ecco un po 'di codice di esempio:

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

Tracciare una linea con vista

Se hai solo bisogno di una linea retta orizzontale o verticale, il modo più semplice potrebbe essere semplicemente quello di utilizzare un Viewnel tuo file di layout XML. Faresti qualcosa del genere:

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

Ecco un'immagine con due linee (una orizzontale e una verticale) per mostrare come sarebbe:

tracciare una linea con una vista nel layout xml

Ed ecco il layout XML completo per questo:

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

sei un genio fratello ... Ho cercato di capire come ottengono le coordinate mentre disegnano una vista usando la vernice ... ma l'immagine che hai pubblicato mi ha aiutato a capirla praticamente ... C'è qualsiasi strumento online per simulare tale grafico, quindi lo uso durante la codifica?

è possibile ottenere un callback per sapere che la vista è stata terminata nel disegno

Sto cercando di disegnare due linee diverse. Una volta se la prima linea è stata tracciata, devo disegnare la seconda ...

Perché non disegnare entrambe le linee nella stessa su Disegno?
Suragch,

1
@ tientuyen07, Se stai usando, onDraw()circonda il tuo codice di disegno con if (someCondition) { draw... }, make someCondition = false, e quindi chiama la invalidate()tua vista. Ridisegnerà la vista senza la linea.
Suragch

22

Puoi disegnare più linee rette in vista usando l'esempio Finger paint che si trova nello sviluppatore Android. link di esempio

Basta commentare: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); sarai in grado di disegnare linee rette.

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
Qualcuno può aiutarmi come posso vedere i miei elementi XML sulla mia vista che sono sul layout relativo ?? puoi semplicemente passare attraverso l'esempio sopra e suggerirmi.
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

per linea orizzontale sul layout:

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

per linea verticale sul layout:

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

sono entrambi uguali. cosa fa la differenza tra verticale e orizzontale?
Burhan ARAS,

@ Burhan ARAS - non sono uguali a larghezza e altezza sono cambiati in due viste. Disegna solo la linea verticale e orizzontale.
Mohanraj,

7

Uno semplice

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

Questo creerà una linea orizzontale diritta, spero che aiuti !.


3

Puoi creare un disegno come cerchio, linea, rettangolo ecc. Attraverso forme in xml come segue:

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

questo codice aggiunge una linea orizzontale a un layout lineare

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

Migliorare le risposte fornite da @Janusz

Ho aggiunto questo ai miei stili:

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

Quindi nei miei layout è meno codice e più semplice da leggere.

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

se vuoi fare una spaziatura orizzontale allora fai quanto sopra.


E per la linea verticale tra due viste devi sostituire i parametri android: layout_width (attributi) con android: layout_height


1

Un altro approccio per disegnare una linea programmaticamente 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);

  }
}

1

Se stai lavorando, ConstraintLayoutdevi definire almeno 2 vincoli per la visualizzazione della linea. Come questo:

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

Sebbene abbia definito 3 vincoli.


-1

o se vuoi solo una linea

TextView line = new TextView(this);
            line.setBackgroundResource(android.R.color.holo_red_dark);
            line.setHeight((int) Utility.convertDpToPixel(1,this));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.