Cara menggambar garis di android

158

Adakah yang bisa tahu cara menggambar di Android, mungkin dengan contoh?

mohan
sumber
4
Apakah Anda ingin menggambar garis menjadi sesuatu atau Anda ingin menggambar garis sederhana di tata letak?
Janusz

Jawaban:

175

Yang ini menggambar 2 garis yang membentuk tanda silang di kiri atas layar:

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

}

Aktivitas untuk memulainya:

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
sumber
3
jika saya ingin menambahkan baris dalam beberapa aktivitas lain seperti R.layout.main Bagaimana saya bisa menambahkan?
mohan
1
tata letak aktivitas Anda harus mengandung objek View - maka tidak masalah. Anda hanya perlu objek View untuk menggambar
DonGru
1
Saya ingin menggambar garis lurus bagaimana saya bisa memberikan nilai startx start y stopx stopy?
mohan
sebenarnya Anda dapat menemukan bahwa dalam referensi pengembang android, drawLine () memiliki argumen berikut: drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
DonGru
Saya menggambar garis di latar belakang menggunakan metode ini. Saya ingin menghapus garis yang ditarik. Ada saran untuk saya. Bisakah Anda menyarankan saya?
tientuyen07
240

Jika Anda ingin memiliki Garis sederhana di Tata Letak Anda untuk memisahkan dua tampilan, Anda dapat menggunakan Tampilan generik dengan tinggi dan lebar yang Anda inginkan memiliki garis dan warna latar yang ditetapkan.

Dengan pendekatan ini Anda tidak perlu mengesampingkan Tampilan atau menggunakan Kanvas sendiri hanya dengan sederhana dan bersih tambahkan baris dalam xml.

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

Contoh kode yang saya berikan akan menghasilkan garis yang mengisi lebar layar dan memiliki ketinggian satu dp.

Jika Anda memiliki masalah dengan gambar garis pada layar kecil pertimbangkan untuk mengubah ketinggian garis ke px. Masalahnya adalah bahwa pada layar ldpi garisnya akan setinggi 0,75 piksel. Terkadang ini dapat menghasilkan pembulatan yang membuat garis menghilang. Jika ini merupakan masalah untuk tata letak Anda, tentukan lebar baris file ressource dan buat file ressource terpisah untuk layar kecil yang menetapkan nilainya menjadi 1px, bukan 1dp.

Pendekatan ini hanya dapat digunakan jika Anda ingin garis horizontal atau vertikal yang digunakan untuk membagi elemen tata letak. Jika Anda ingin mencapai sesuatu seperti salib yang ditarik ke dalam gambar, pendekatan saya tidak akan berhasil.

Janusz
sumber
Bagaimana cara menambahkan tampilan yang sama saat runtime yang dinamis?
Lakshmanan
Lakshmanan, berikan id, dan atur visibilitasnya ke View.GONE atau VISIBLE saat run-time
Hatim
Salib juga dapat dibuat dengan solusi ini, cukup tambahkan atribut "rotasi" di dalamnya sesuai salib yang Anda inginkan dan gunakan dua tampilan.
Arpit J.
62

Ada dua cara utama Anda bisa menggambar garis, dengan menggunakan Canvasatau dengan menggunakan View.

Menggambar Garis dengan Kanvas

Dari dokumentasi kita melihat bahwa kita perlu menggunakan metode berikut:

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

Ini gambarnya:

canvas.drawLine

The Paintobjek hanya memberitahuCanvas apa warna cat garis, seberapa luas itu harus, dan sebagainya.

Berikut ini beberapa contoh kode:

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

Menggambar Garis dengan Tampilan

Jika Anda hanya membutuhkan garis horizontal atau vertikal lurus, maka cara termudah adalah dengan menggunakan Viewfile tata letak xml Anda. Anda akan melakukan sesuatu seperti ini:

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

Berikut adalah gambar dengan dua garis (satu horisontal dan satu vertikal) untuk menunjukkan seperti apa tampilannya:

menggambar garis dengan tampilan dalam tata letak xml

Dan di sini adalah tata letak xml lengkap untuk itu:

<?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
sumber
Anda adalah seorang jenius bro ... Saya telah mencoba mencari tahu bagaimana mereka mendapatkan koordinat saat menggambar menggunakan cat ... tapi gambar yang Anda posting membantu saya untuk memahaminya cukup banyak .... Apakah ada ada alat online untuk mensimulasikan grafik seperti itu jadi saya menggunakannya saat coding?
apakah mungkin untuk mendapatkan panggilan balik untuk mengetahui bahwa tampilan telah selesai menggambar
Saya mencoba menggambar dua garis yang berbeda. Sekali jika garis pertama telah ditarik, saya harus menggambar yang kedua ...
Mengapa Anda tidak menggambar kedua garis di onDraw yang sama?
Suragch
1
@ tientuyen07, Jika Anda menggunakan onDraw()kemudian mengelilingi kode gambar Anda dengan if (someCondition) { draw... }, buat someCondition = false, dan panggil invalidate()pandangan Anda. Ini akan menggambar ulang tampilan tanpa garis.
Suragch
22

Anda dapat menggambar beberapa garis lurus pada tampilan menggunakan contoh Cat jari yang ada di Developer android. contoh tautan

Hanya komentar: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); Anda akan dapat menggambar garis lurus.

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
sumber
2
Dapatkah Seseorang membantu saya bagaimana saya bisa melihat elemen xml saya pada tampilan saya yang berada di tata letak relatif ?? kamu bisa pergi melalui contoh di atas dan menyarankan saya.
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
sumber
8

untuk garis horizontal pada tata letak:

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

untuk garis vertikal pada tata letak:

<View
        android:id="@+id/View04"
        android:layout_width="5dip"
        android:layout_height="fill_parent"
        android:background="#0f0" />
Mohanraj
sumber
keduanya sama. apa yang membuat perbedaan antara vertikal dan horizontal?
Burhan ARAS
@ Burhan ARAS-mereka tidak sama dengan lebar dan tinggi diubah dalam dua tampilan. Itu hanya menarik garis vertikal dan horz.
Mohanraj
7

Sederhana

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

Ini akan membuat garis horizontal lurus, semoga membantu !.

pengguna712051
sumber
3

Anda dapat membuat drawable seperti lingkaran, garis, persegi panjang dll melalui bentuk dalam xml sebagai berikut:

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

kode ini menambahkan garis horizontal ke tata letak linier

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);
pengguna4757345
sumber
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
sumber
1

Untuk memperbaiki jawaban yang diberikan oleh @Jususz

Saya menambahkan ini ke gaya saya:

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

Kemudian di layout saya kurang kode dan lebih mudah dibaca.

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

jika Anda ingin melakukan spasi garis horizontal maka lakukan hal di atas.


Dan untuk garis vertikal antara dua Tampilan Anda harus mengganti android: parameter layout_width (atribut) dengan android: layout_height

Zar E Ahmer
sumber
1

Pendekatan lain untuk menggambar garis secara terprogram menggunakan 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
sumber
1

Jika Anda bekerja dengan ConstraintLayoutAnda, Anda perlu mendefinisikan setidaknya 2 kendala agar baris tersebut muncul. Seperti ini:

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

Padahal saya mendefinisikan 3 kendala.

Kashif
sumber
-1

atau jika Anda hanya ingin garis

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