วิธีการวาดเส้นใน Android


157

ใครสามารถบอกวิธีการวาดเส้นใน Android บางทีด้วยตัวอย่าง?


4
คุณต้องการวาดเส้นเป็นบางสิ่งหรือคุณต้องการวาดเส้นอย่างง่ายในเค้าโครงหรือไม่?
Janusz

คำตอบ:


174

อันนี้วาด 2 บรรทัดซึ่งเป็นรูปกากบาทที่ด้านซ้ายบนของหน้าจอ:

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

}

กิจกรรมที่จะเริ่ม:

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 ฉันจะเพิ่มได้อย่างไร
mohan

1
โครงร่างของกิจกรรมของคุณต้องมีวัตถุมุมมอง - จากนั้นก็ไม่มีปัญหา คุณเพียงแค่ต้องใช้วัตถุมุมมองเพื่อวาด
DonGru

1
ฉันต้องการวาดเส้นตรงฉันจะให้ค่า startx start y stopx stopy ได้อย่างไร
mohan

ในความเป็นจริงคุณสามารถค้นหาได้ในการอ้างอิงนักพัฒนา android, drawLine () มีข้อโต้แย้งดังต่อไปนี้: drawLine (float startX, float startY, float stopX, float stopX, float stopY, Paint paint)
DonGru

ฉันวาดเส้นบนพื้นหลังโดยใช้วิธีนี้ ฉันต้องการลบเส้นที่ลาก ข้อเสนอแนะใด ๆ สำหรับฉัน คุณแนะนำฉันได้ไหม
tientuyen07

240

หากคุณต้องการให้มีเส้นเรียบง่ายในเค้าโครงของคุณเพื่อแยกสองมุมมองคุณสามารถใช้มุมมองทั่วไปที่มีความสูงและความกว้างที่คุณต้องการให้เส้นมีและสีพื้นหลังที่กำหนด

ด้วยวิธีนี้คุณไม่จำเป็นต้องแทนที่มุมมองหรือใช้ Canvas ด้วยตัวคุณเองเพียงแค่ทำความสะอาดและเพิ่มบรรทัดใน xml

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

ตัวอย่างรหัสที่ฉันให้จะสร้างบรรทัดที่เติมหน้าจอให้เต็มความกว้างและมีความสูงหนึ่ง dp

หากคุณมีปัญหากับการวาดเส้นบนหน้าจอขนาดเล็กให้พิจารณาเปลี่ยนความสูงของบรรทัดเป็น px ปัญหาคือบนหน้าจอ ldpi เส้นจะมีความสูง 0.75 พิกเซล บางครั้งสิ่งนี้อาจส่งผลในการปัดเศษที่ทำให้บรรทัดหายไป หากนี่เป็นปัญหาสำหรับเลย์เอาต์ของคุณกำหนดความกว้างของบรรทัดไฟล์ ressource และสร้างไฟล์ ressource แยกต่างหากสำหรับหน้าจอขนาดเล็กที่ตั้งค่าเป็น 1px แทนที่จะเป็น 1dp

วิธีการนี้ใช้งานได้เฉพาะเมื่อคุณต้องการเส้นแนวนอนหรือแนวตั้งที่ใช้ในการแบ่งองค์ประกอบเค้าโครง หากคุณต้องการบรรลุสิ่งที่เป็นรูปกากบาทที่ถูกวาดเข้าไปในรูปภาพแนวทางของฉันจะไม่ทำงาน


จะเพิ่มมุมมองเดียวกันที่รันไทม์ที่เป็นแบบไดนามิกได้อย่างไร
Lakshmanan

Lakshmanan, ให้ id และตั้งค่าการมองเห็นเป็น View.GONE หรือมองเห็นได้ในเวลาทำงาน
Hatim

กากบาทสามารถทำได้ด้วยการแก้ปัญหานี้เพียงแค่เพิ่มแอตทริบิวต์ "การหมุน" ในนั้นตามข้ามที่คุณต้องการและใช้สองมุมมอง
Arpit J.

62

มีสองวิธีหลักที่คุณสามารถวาดเส้นได้โดยใช้Canvasหรือโดยใช้Viewหรือโดยการใช้

วาดเส้นด้วย Canvas

จากเอกสารที่เราเห็นว่าเราจำเป็นต้องใช้วิธีการดังต่อไปนี้:

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

นี่คือภาพ:

canvas.drawLine

Paintวัตถุเพียงแค่บอกว่าCanvasสิ่งที่สีในการวาดเส้นกว้างมันควรจะเป็นและอื่น ๆ

นี่คือตัวอย่างรหัสบางส่วน:

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

การวาดเส้นด้วยมุมมอง

หากคุณต้องการเพียงเส้นแนวนอนหรือแนวตั้งเท่านั้นวิธีที่ง่ายที่สุดคือการใช้ a Viewในไฟล์เลย์เอาต์ xml ของคุณ คุณจะทำสิ่งนี้:

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

นี่คือรูปภาพที่มีสองบรรทัด (หนึ่งแนวนอนและแนวตั้งหนึ่งแนว) เพื่อแสดงว่ามันจะเป็นอย่างไร:

วาดเส้นด้วยมุมมองในรูปแบบ xml

และนี่คือเค้าโครง xml ที่สมบูรณ์สำหรับสิ่งนั้น:

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

คุณเป็นพี่ชายอัจฉริยะ ... ฉันพยายามหาวิธีที่พวกเขาได้รับพิกัดในขณะที่วาดมุมมองโดยใช้สี ... แต่ภาพที่คุณโพสต์ช่วยให้ฉันเข้าใจมันค่อนข้างมาก .... มี เครื่องมือออนไลน์ใด ๆ ในการจำลองกราฟดังกล่าวดังนั้นฉันจะใช้มันในขณะที่เข้ารหัส?

เป็นไปได้หรือไม่ที่จะได้รับการโทรกลับเพื่อทราบว่ามุมมองวาดเสร็จแล้ว

ฉันพยายามวาดเส้นสองเส้นที่แตกต่างกัน เมื่อวาดบรรทัดแรกแล้วฉันต้องวาดบรรทัดที่สอง ...

ทำไมคุณไม่วาดทั้งสองบรรทัดใน onDraw เดียวกัน
Suragch

1
@ tientuyen07 หากคุณใช้งานonDraw()อยู่ให้ล้อมรอบรหัสการวาดของคุณด้วยif (someCondition) { draw... }ทำsomeCondition = falseและเรียกinvalidate()ใช้มุมมองของคุณ มันจะวาดมุมมองใหม่โดยไม่มีบรรทัด
Suragch

22

คุณสามารถวาดเส้นตรงหลายเส้นในมุมมองโดยใช้ตัวอย่างการทาสีนิ้วซึ่งอยู่ใน android นักพัฒนา ลิงก์ตัวอย่าง

เพียงแค่แสดงความคิดเห็น: mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2); คุณจะสามารถวาดเส้นตรง

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
มีคนช่วยฉันฉันจะดูองค์ประกอบ xml ของฉันในมุมมองของฉันซึ่งอยู่ในรูปแบบที่สัมพันธ์กันได้หรือไม่? คุณสามารถผ่านตัวอย่างด้านบนและแนะนำฉัน
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

สำหรับเส้นแนวนอนบนเค้าโครง:

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

สำหรับเส้นแนวตั้งบนเค้าโครง:

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

พวกเขาทั้งคู่เหมือนกัน อะไรทำให้เกิดความแตกต่างระหว่างแนวตั้งและแนวนอน
Burhan ARAS

@ Burhan ARAS - พวกเขาไม่เหมือนกับความกว้างและความสูงถูกเปลี่ยนแปลงในสอง views.it ดึงเฉพาะแนวตั้งและบรรทัด horz
Mohanraj

7

ง่าย ๆ

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

สิ่งนี้จะสร้างเส้นแนวนอนตรงหวังว่าจะช่วยได้!


3

คุณสามารถสร้าง drawable เช่นวงกลม, เส้น, สี่เหลี่ยมผืนผ้า ฯลฯ ผ่านรูปร่างใน xml ดังนี้:

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

รหัสนี้เพิ่มเส้นแนวนอนเป็นเค้าโครงเชิงเส้น

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

ฉันเพิ่มสิ่งนี้ในสไตล์ของฉัน:

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

จากนั้นในรูปแบบของฉันคือรหัสน้อยและอ่านง่ายขึ้น

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

หากคุณต้องการทำระยะห่างบรรทัดแนวนอนแล้วทำข้างต้น


และสำหรับเส้นแนวตั้งระหว่างสอง Views คุณต้องแทนที่ android: พารามิเตอร์ layout_width (attribute) ด้วย android: layout_height


1

อีกวิธีในการวาดเส้นโดยใช้โปรแกรม 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

หากคุณทำงานกับConstraintLayoutคุณต้องกำหนดข้อ จำกัด อย่างน้อย 2 ข้อเพื่อให้บรรทัดปรากฏขึ้น แบบนี้:

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

แม้ว่าฉันจะนิยาม 3 ข้อ จำกัด


-1

หรือถ้าคุณแค่ต้องการเส้น

TextView line = new TextView(this);
            line.setBackgroundResource(android.R.color.holo_red_dark);
            line.setHeight((int) Utility.convertDpToPixel(1,this));
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.