Comment dessiner une ligne dans Android

158

Quelqu'un peut-il dire comment tracer une ligne dans Android, peut-être avec un exemple?

Mohan
la source
4
Voulez-vous dessiner une ligne dans quelque chose ou voulez-vous dessiner une ligne simple dans la mise en page?
Janusz

Réponses:

175

Celui-ci trace 2 lignes qui forment une croix en haut à gauche de l'écran:

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'activité pour le démarrer:

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
la source
3
si je veux ajouter une ligne dans une autre activité comme R.layout.main Comment puis-je ajouter?
mohan
1
la mise en page de votre activité doit contenir un objet View - alors ce n'est pas un problème. Vous avez juste besoin d'un objet View sur
lequel
1
Je veux tracer une ligne droite, comment puis-je donner la valeur startx start y stopx stopy?
mohan
en fait, vous pouvez trouver que dans la référence du développeur Android, drawLine () a les arguments suivants: drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
DonGru
Je trace une ligne sur le fond en utilisant cette méthode. Je veux effacer une ligne dessinée. Toutes suggestions pour moi. Pouvez-vous me suggérer?
tientuyen07
240

Si vous souhaitez avoir une simple ligne dans votre mise en page pour séparer deux vues, vous pouvez utiliser une vue générique avec la hauteur et la largeur souhaitées pour la ligne et une couleur d'arrière-plan définie.

Avec cette approche, vous n'avez pas besoin de remplacer une vue ou d'utiliser vous-même un canevas, simplement et ajoutez la ligne en xml.

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

L'exemple de code que j'ai fourni générera une ligne qui remplit l'écran en largeur et a une hauteur d'un dp.

Si vous rencontrez des problèmes avec le tracé de la ligne sur de petits écrans, envisagez de changer la hauteur de la ligne en px. Le problème est que sur un écran ldpi, la ligne aura une hauteur de 0,75 pixel. Parfois, cela peut entraîner un arrondi qui fait disparaître la ligne. Si cela pose un problème pour votre mise en page, définissez la largeur de la ligne dans un fichier de ressources et créez un fichier de ressources séparé pour les petits écrans qui définit la valeur à 1px au lieu de 1dp.

Cette approche n'est utilisable que si vous souhaitez des lignes horizontales ou verticales utilisées pour diviser les éléments de mise en page. Si vous voulez réaliser quelque chose comme une croix qui est dessinée dans une image, mon approche ne fonctionnera pas.

Janusz
la source
Comment ajouter la même vue au moment de l'exécution de manière dynamique?
Lakshmanan
Lakshmanan, donnez-lui un identifiant et définissez sa visibilité sur View.GONE ou VISIBLE au moment de l'exécution
Hatim
Une croix peut également être faite avec cette solution, ajoutez simplement l'attribut "rotation" en elle selon la croix que vous voulez et utilisez deux vues.
Arpit J.
62

Il existe deux manières principales de tracer une ligne, en utilisant a Canvasou en utilisant a View.

Dessiner une ligne avec un canevas

D'après la documentation, nous voyons que nous devons utiliser la méthode suivante:

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

Voici une image:

canvas.drawLine

L' Paintobjet indique simplement de Canvasquelle couleur peindre la ligne, quelle doit être sa largeur, etc.

Voici un exemple de code:

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

Tracer une ligne avec vue

Si vous n'avez besoin que d'une ligne droite horizontale ou verticale, le moyen le plus simple peut être d'utiliser simplement un Viewdans votre fichier de mise en page xml. Vous feriez quelque chose comme ceci:

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

Voici une image avec deux lignes (une horizontale et une verticale) pour montrer à quoi cela ressemblerait:

dessiner une ligne avec une vue en format XML

Et voici la mise en page XML complète pour cela:

<?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
la source
vous êtes un frère de génie ... J'ai essayé de comprendre comment ils obtiennent les coordonnées tout en dessinant une vue à l'aide de peinture ... mais l'image que vous avez postée m'a aidé à le comprendre à peu près ... un outil en ligne pour simuler un tel graphique afin que je l'utilise pendant le codage?
est-il possible d'obtenir un rappel pour savoir que la vue a été terminée dessin
J'essaye de dessiner deux lignes différentes. Une fois que si la première ligne a été dessinée, je dois dessiner la seconde ...
Pourquoi ne dessinez-vous pas les deux lignes dans le même onDraw?
Suragch
1
@ tientuyen07, Si vous utilisez, onDraw()entourez votre code de dessin avec if (someCondition) { draw... }, créez someCondition = false, puis appelez invalidate()votre vue. Il redessine la vue sans la ligne.
Suragch
22

Vous pouvez dessiner plusieurs lignes droites sur la vue en utilisant l'exemple de peinture Finger qui se trouve dans Developer Android. lien d'exemple

Juste un commentaire: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); vous pourrez tracer des lignes droites.

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
la source
2
Quelqu'un peut-il m'aider comment puis-je voir mes éléments XML sur ma vue qui sont sur une mise en page relative ?? Vous pouvez simplement passer par l'exemple ci-dessus et me suggérer.
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
la source
8

pour la ligne horizontale sur la mise en page:

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

pour la ligne verticale sur la mise en page:

<View
        android:id="@+id/View04"
        android:layout_width="5dip"
        android:layout_height="fill_parent"
        android:background="#0f0" />
Mohanraj
la source
ils sont tous les deux identiques. qu'est-ce qui fait la différence entre vertical et horizontal?
Burhan ARAS
@ Burhan ARAS-ils ne sont pas les mêmes que la largeur et la hauteur sont modifiées dans deux vues.il ne dessine que des lignes verticales et horz.
Mohanraj
7

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
la source
5
canvas.drawLine(10, 10, 90, 10, paint);
canvas.drawLine(10, 20, 90, 20, paint);

Cela créera une ligne horizontale droite, espérons que cela aidera !.

user712051
la source
3

Vous pouvez créer un dessin comme un cercle, une ligne, un rectangle, etc. à travers des formes en XML comme suit:

<?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
la source
3

ce code ajoute une ligne horizontale à une disposition linéaire

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);
user4757345
la source
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
la source
1

Pour améliorer les réponses apportées par @Janusz

J'ai ajouté ceci à mes styles:

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

Ensuite, dans mes mises en page, il y a moins de code et plus simple à lire.

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

si vous voulez faire un interligne horizontal, procédez comme suit.


Et pour la ligne verticale entre deux vues, vous devez remplacer android: paramètres (attributs) layout_width par android: layout_height

Zar E Ahmer
la source
1

Une autre approche pour tracer une ligne par programme en utilisant 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
la source
1

Si vous travaillez avec, ConstraintLayoutvous devez définir au moins 2 contraintes pour que la ligne apparaisse. Comme ça:

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

Bien que j'aie défini 3 contraintes.

Kashif
la source
-1

ou si vous voulez juste une ligne

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