在两个视图之间用手指画线(ImageViews)

时间:2013-11-16 05:07:16

标签: android line android-canvas ontouchlistener ondraw

我在SO中使用了(看过)很多例子,我需要的是在布局上的两个图像视图之间划一条线:

enter image description here

我见过的所有示例或示例,只是使用视图扩展了类,并且将该类设置为ContentView As,

public class DrawView extends View {
Paint paint = new Paint();

public DrawView(Context context) {
    super(context);
    paint.setColor(Color.BLACK);
}

@Override
public void onDraw(Canvas canvas) {
        canvas.drawLine(0, 50, 350, 50, paint);
}

}

和,...

 @Override
public void onCreate(final Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    DrawView drawView = new DrawView(this);
    setContentView(drawView);
}

实际上,这是一个很好的方法但是如何将这些图像添加到画布(或)如何加载我的布局(XML文件)以在它们之间绘制线条。

任何一种小推动也对我的工作有很大帮助。谢谢。

1 个答案:

答案 0 :(得分:5)

我实施了这样的应用程序。 我发布了我的代码,可能这可以帮到你。

MainActivity.java类:

public class MainActivity extends Activity {

public TableLayout t1;
public TableRow tr1;
public TableRow tr2;
public TableRow tr3;
public ImageButton i11;
public ImageButton i21;
public ImageButton i12;
public ImageButton i22;
public ImageButton i31;
public ImageButton i32;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    t1 = (TableLayout) findViewById(R.id.tableLayout1);
    tr1 = (TableRow) findViewById(R.id.tableRow1);
    tr2 = (TableRow) findViewById(R.id.tableRow2);
    tr3 = (TableRow) findViewById(R.id.tableRow3);
    i11 = (ImageButton) findViewById(R.id.ibACol1);
    i12 = (ImageButton) findViewById(R.id.ibCCol3);
    i21 = (ImageButton) findViewById(R.id.ibBCol1);
    i22 = (ImageButton) findViewById(R.id.ibACol3);
    i31 = (ImageButton) findViewById(R.id.ibCCol1);
    i32 = (ImageButton) findViewById(R.id.ibBCol3);

    RelativeLayout rl = (RelativeLayout) findViewById(R.id.RelativeLayout1);
    DrawPanel drawingPanel = new DrawPanel(getApplicationContext());
    rl.addView(drawingPanel);

}

public class DrawPanel extends View {
    private Paint paint;
    private Paint paint1;
    private Paint paint2;
    // Canvas c;
    MainActivity m1 = new MainActivity();
    int count = 0;
    int ans = 0, ansPrev;
    int temp1, temp2;
    int color = 0;
    String str = "";
    public boolean tmp;
    @SuppressWarnings("rawtypes")
    private ArrayList points;

    @SuppressWarnings("rawtypes")
    private ArrayList strokes;

    @SuppressWarnings("rawtypes")
    public DrawPanel(Context context) {
        super(context);

        points = new ArrayList();
        // points1 = new ArrayList();
        // points2 = new ArrayList();
        strokes = new ArrayList();
        paint = createPaint(Color.BLUE, 11);
        paint1 = createPaint(Color.GREEN, 11);
        paint2 = createPaint(Color.RED, 11);

    }

    @SuppressWarnings("rawtypes")
    public void onDraw(Canvas c) {
        super.onDraw(c);

        // this.setBackgroundColor(Color.WHITE);
        for (Object obj : strokes) {
            drawStroke((ArrayList) obj, c, color);
        }

        drawStroke(points, c, color);
        color = 0;

    }

    @SuppressWarnings({ "unchecked", "rawtypes" })
    @Override
    public boolean onTouchEvent(MotionEvent event) {


        if (event.getActionMasked() == MotionEvent.ACTION_MOVE) {
            points.add(new Point((int) event.getX(), (int) event.getY()));
            color = getColor();
            invalidate();
        }

        if (event.getActionMasked() == MotionEvent.ACTION_UP) {


            try {
                ansPrev = ans;
                for (int r = 0; r < t1.getChildCount(); r++) {
                    int y = (int) t1.getChildAt(r).getY();
                    if ((int) event.getY() >= y
                            && (int) event.getY() < (y + t1.getChildAt(r)
                                    .getHeight())) {
                        // View v = t1.getChildAt(r);
                        for (int i = 0; i < ((TableRow) t1.getChildAt(r))
                                .getChildCount(); i += 2) {
                            int x1 = (int) tr1.getChildAt(i).getX();
                            if ((int) event.getX() >= x1
                                    && (int) event.getX() < (x1 + tr1
                                            .getChildAt(i).getWidth())) {
                                // Toast.makeText(getApplicationContext(),
                                // "Row "+(r+1)+", Column "+(i+1)+"Selected.",
                                // Toast.LENGTH_SHORT).show();
                                if (count == 1) {
                                    // str =
                                    // (String)((ImageButton)((TableRow)t1.getChildAt(r)).getChildAt(i)).getContentDescription();

                                    int len1 = (int) ((ImageButton) ((TableRow) t1
                                            .getChildAt(temp1))
                                            .getChildAt(temp2))
                                            .getContentDescription()
                                            .length();
                                    int len2 = (int) ((ImageButton) ((TableRow) t1
                                            .getChildAt(r)).getChildAt(i))
                                            .getContentDescription()
                                            .length();
                                    String str1 = (String) ((ImageButton) ((TableRow) t1
                                            .getChildAt(r)).getChildAt(i))
                                            .getContentDescription()
                                            .subSequence(0, 1);
                                    if (str1.equals(str) && len1 != len2) {
                                        ans = ans + 1;
                                        tmp = true;
                                        color = 1;
                                        // drawStroke(points, c, color);
                                        ((ImageButton) ((TableRow) t1
                                                .getChildAt(temp1))
                                                .getChildAt(temp2))
                                                .setSelected(false);
                                        Toast.makeText(
                                                getApplicationContext(),
                                                "Answer Matched. \n Your score is: "
                                                        + ans,
                                                Toast.LENGTH_SHORT).show();
                                        count = 0;

                                    } else {
                                        ans = ans - 1;
                                        tmp = false;
                                        color = 2;
                                        // drawStroke(points, c, color);
                                        ((ImageButton) ((TableRow) t1
                                                .getChildAt(temp1))
                                                .getChildAt(temp2))
                                                .setSelected(false);
                                        Toast.makeText(
                                                getApplicationContext(),
                                                "Answer not Matched. \n Your score is: "
                                                        + ans,
                                                Toast.LENGTH_SHORT).show();
                                        count = 0;

                                    }

                                    // Toast.makeText(getApplicationContext(),
                                    // "Image "+(i+r+1)+" : "+str+((ImageButton)((TableRow)t1.getChildAt(r)).getChildAt(i)).isSelected(),
                                    // Toast.LENGTH_SHORT).show();
                                    // count=0;

                                }
                            }
                        }
                    }
                    // Toast.makeText(getApplicationContext(),
                    // "Color: "+color, Toast.LENGTH_SHORT).show();
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
            // points2.clear();
            // points = new ArrayList();
            // invalidate();
            this.strokes.add(points);
            points = new ArrayList();
            invalidate();
        }

        return true;
    }

    public int getColor() {
        return color;
    }

    private void drawStroke(@SuppressWarnings("rawtypes") ArrayList stroke,
            Canvas c, int i1) {

        if (stroke.size() > 0 && i1 == 0) {
            Point p0 = (Point) stroke.get(0);
            for (int i = 1; i < stroke.size(); i++) {
                Point p1 = (Point) stroke.get(i);
                c.drawLine(p0.x, p0.y, p1.x, p1.y, paint);
                p0 = p1;
            }
        } else if (stroke.size() > 0 && i1 == 1) {
            Point p0 = (Point) stroke.get(0);
            for (int i = 1; i < stroke.size(); i++) {
                Point p1 = (Point) stroke.get(i);
                c.drawLine(p0.x, p0.y, p1.x, p1.y, paint1);
                p0 = p1;
            }
        } else if (stroke.size() > 0 && i1 == 2) {
            Point p0 = (Point) stroke.get(0);
            for (int i = 1; i < stroke.size(); i++) {
                Point p1 = (Point) stroke.get(i);
                c.drawLine(p0.x, p0.y, p1.x, p1.y, paint2);
                p0 = p1;
            }
        }

    }


    private Paint createPaint(int color, float width) {
        Paint temp = new Paint();
        temp.setStyle(Paint.Style.STROKE);
        temp.setAntiAlias(true);
        temp.setColor(color);
        temp.setStrokeWidth(width);
        temp.setStrokeCap(Cap.ROUND);

        return temp;
    }

}

}

main.xml布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TableLayout
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

      <TableRow
    android:id="@+id/tableRow1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp" >

    <ImageButton
        android:id="@+id/ibACol1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu1"
        android:contentDescription="@string/A" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="" />

    <ImageButton
        android:id="@+id/ibCCol3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu3"
        android:contentDescription="@string/Cat" />

</TableRow>
 <TableRow
    android:id="@+id/tableRow2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp" >

    <ImageButton
        android:id="@+id/ibBCol1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu2"
        android:contentDescription="@string/B" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="" />

    <ImageButton
        android:id="@+id/ibACol3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu1"
        android:contentDescription="@string/Apple" />

</TableRow>
 <TableRow
    android:id="@+id/tableRow3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp" >

    <ImageButton
        android:id="@+id/ibCCol1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu3"
        android:contentDescription="@string/C" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="" />

    <ImageButton
        android:id="@+id/ibBCol3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/edu2"
        android:contentDescription="@string/Bee" />

</TableRow>


</TableLayout>

您需要为drawable文件夹添加图像,这适用于api-level 11及以后版本。