Android'de bir çizgi nasıl çizilir


158

Belki bir örnekle Android'de nasıl bir çizgi çizileceğini söyleyebilir mi?


4
Bir şeye çizgi çizmek mi istiyorsunuz yoksa mizanpajda basit bir çizgi mi çizmek istiyorsunuz?
Janusz

Yanıtlar:


175

Bu, ekranın sol üst köşesinde bir çarpı işareti oluşturan 2 çizgi çizer:

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

}

Başlamak için aktivite:

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
R.layout.main gibi başka bir etkinliğe satır eklemek isterseniz nasıl ekleyebilirim?
mohan

1
etkinliğinizin düzeninde bir View nesnesi bulunmalıdır; bu sorun olmaz. Sadece çizmek için bir View nesnesine ihtiyacınız var
DonGru

1
Düz bir çizgi çizmek istiyorum nasıl startx start y stopx stopy değerini verebilirim?
mohan

aslında android geliştirici referansında drawLine () aşağıdaki bağımsız değişkenlere sahip olduğunu bulabilirsiniz: drawLine (float startX, float startY, float stopX, float stopY, Paint paint)
DonGru

Bu yöntemi kullanarak arka plan üzerine çizgi çiziyorum. Çizilmiş bir çizgiyi silmek istiyorum. Benim için herhangi bir öneri. Bana önerebilir misin?
tientuyen07

240

İki görünümü ayırmak için Mizanpajınızda basit bir Çizgi olmasını istiyorsanız, çizginin sahip olmasını istediğiniz yükseklik ve genişliğe ve arka plan rengine sahip genel bir Görünüm kullanabilirsiniz.

Bu yaklaşımla, bir Görünümü geçersiz kılmanıza veya bir Tuval'i kendiniz kullanmanıza gerek yoktur, sadece xml'ye satır ekleyin.

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

Sağladığım örnek kod, ekranı genişliği dolduran ve yüksekliği bir dp olan bir çizgi oluşturacaktır.

Çizginin küçük ekranlarda çizilmesinde sorun yaşıyorsanız, çizginin yüksekliğini px olarak değiştirmeyi düşünün. Sorun ldpi ekranda çizginin 0.75 piksel yüksekliğinde olmasıdır. Bazen bu, çizgiyi yok eden bir yuvarlamaya neden olabilir. Bu, mizanpajınız için bir sorunsa, bir ressource dosyasının satır genişliğini tanımlayın ve değeri 1dp yerine 1px olarak ayarlayan küçük ekranlar için ayrı bir ressource dosyası oluşturun.

Bu yaklaşım yalnızca mizanpaj öğelerini bölmek için kullanılan yatay veya dikey çizgiler istiyorsanız kullanılabilir. Bir görüntüye çizilen bir haç gibi bir şey elde etmek istiyorsanız, yaklaşımım işe yaramaz.


Çalışma zamanında dinamik olarak aynı görünümü nasıl ekleyebilirim?
Lakshmanan

Lakshmanan, bir kimlik verin ve görünürlüğünü çalışma zamanında View.GONE veya VISIBLE olarak ayarlayın
Hatim

Bu çözümle bir çarpı da yapılabilir, sadece istediğiniz çarpıya "rotasyon" özelliğini ekleyin ve iki görünüm kullanın.
Arpit J.

62

A Canvasveya a kullanarak bir çizgi çizmenin iki ana yolu vardır View.

Tuval ile Çizgi Çizme

Gönderen belgelerine biz aşağıdaki yöntemi kullanmak gerekir görüyoruz:

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

Burada bir resim var:

canvas.drawLine

PaintNesne sadece söyler Canvasrenk çizgisini, olması gerektiği kadar geniş ve bu kadar boyamak ne.

İşte bazı örnek kod:

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

Manzaralı Çizgi Çizme

Yalnızca düz yatay veya dikey bir çizgiye ihtiyacınız varsa, en kolay yol Viewxml mizanpaj dosyasında yalnızca a kullanmak olabilir . Böyle bir şey yapardınız:

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

İşte neye benzeyeceğini göstermek için iki çizgi (bir yatay ve bir dikey) içeren bir resim:

xml düzeninde manzaralı bir çizgi çizme

Ve işte bunun için komple xml düzeni:

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

Sen bir dahisin ... Boya kullanarak bir görünüm çizerken koordinatları nasıl aldıklarını anlamaya çalışıyorum ... ama gönderdiğin resim onu ​​anlamamda bana yardımcı oldu .... kodlama sırasında kullanmak bu tür bir grafik benzetmek için herhangi bir çevrimiçi araç?

görünümün çizim bittiğini bilmek için bir geri arama almak mümkün

İki farklı çizgi çizmeye çalışıyorum. Bir kez ilk çizgi çizilirse, ben ikinci çizmek zorunda ...

Neden her iki satırı aynı onDraw'da çizmiyorsunuz?
Suragch

1
@ tientuyen07, kullanıyorsanız onDraw(), çizim kodunuzu çevreleyin if (someCondition) { draw... }, yapın someCondition = falseve invalidate()görünümünüzü arayın . Görünümü satır olmadan yeniden çizecektir.
Suragch

22

Developer android'de bulunan Finger paint örneğini kullanarak görünümde birden fazla düz çizgi çizebilirsiniz. örnek bağlantı

Sadece yorum: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); Düz çizgiler çizebileceksiniz.

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
Birisi bana göreceli düzeni olan benim görünümde xml öğeleri nasıl görebilir miyim? u sadece yukarıdaki örnek üzerinden gidip bana önerebilir.
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

düzende yatay çizgi için:

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

düzende dikey çizgi için:

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

ikisi de aynı. dikey ve yatay arasındaki fark nedir?
Burhan ARAS

@ Burhan ARAS-genişlik ve yükseklik olarak aynı değil iki görünümde değiştirilir. Sadece dikey ve yatay çizgi çizer.
Mohanraj

7

Basit olan

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

Bu düz bir yatay çizgi oluşturacak, yardımcı olacağını umuyoruz !.


3

Aşağıdaki gibi xml'deki şekiller aracılığıyla daire, çizgi, dikdörtgen vb.

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

bu kod doğrusal bir düzene yatay çizgi ekler

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

@ Janusz tarafından verilen cevapları geliştirmek

Bunu stillerime ekledim:

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

Sonra benim düzenleri daha az kod ve okumak daha basit.

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

yatay satır aralığı yapmak istiyorsanız yukarıdakileri yapın.


İki Görünüm arasındaki dikey çizgi için android: layout_width parametrelerini (öznitelikleri) android ile değiştirmeniz gerekir : layout_height


1

ImageView kullanarak programlı bir çizgi çizmek için başka bir yaklaşım

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

Birlikte çalışıyorsanız ConstraintLayout, çizginin görünmesi için en az 2 kısıtlama tanımlamanız gerekir. Bunun gibi:

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

Gerçi 3 kısıt tanımladım.


-1

ya da sadece bir çizgi istiyorsanız

TextView line = new TextView(this);
            line.setBackgroundResource(android.R.color.holo_red_dark);
            line.setHeight((int) Utility.convertDpToPixel(1,this));
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.