Android如何通过用线条指向文本和图像来匹配文本与图像

Question

我正在尝试通过用线指向来创建与适当图像匹配的应用程序。

我想要创建完全相同的app，如下图所示：

任何人都可以给我一个想法吗？

这是我的主要课程：

public class MatchActivity extends Activity {
                    ArrayAdapter<String> listadapter;
                    float x1;
                    float y1;
                    float x2;
                    float y2;
                    @Override
                    public void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.main);
                        String[] s1 = { "smiley1", "smiley2", "smiley3" };
                        ListView lv = (ListView) findViewById(R.id.text_list);
                        ArrayList<String> list = new ArrayList<String>();
                        list.addAll(Arrays.asList(s1));
                        listadapter = new ArrayAdapter<String>(this,R.layout.rowtext, s1); 
                        lv.setAdapter(listadapter);
                        GridView gv = (GridView) findViewById(R.id.image_list);
                        gv.setAdapter(new ImageAdapter(this));
                        lv.setOnItemClickListener(new OnItemClickListener() {
                          public void onItemClick(AdapterView<?> arg0, View v, int arg2,
                                    long arg3){                   
                               x1=v.getX();
                               y1=v.getY();
                               Log.d("list","text positions x1:"+x1+" y1:"+y1);
                           }
                        });

                    gv.setOnItemClickListener(new OnItemClickListener() {
                        public void onItemClick(AdapterView<?> arg0, View v, int arg2,
                            long arg3){
                                  DrawView draw=new DrawView(MatchActivity.this);
                          x2=v.getX();
                          y2=v.getY();
                              draw.position1.add(x1);
                              draw.position1.add(y1);
                          draw.position2.add( x2);
                              draw.position2.add(y2);
                          Log.d("list","image positions x2:"+x2+" y2:"+y2);
                     LinearLayout ll=LinearLayout)findViewById(R.id.draw_line);  
                                    ll.addView(draw);

                               }
                            });

                    }

                        }

这是我绘制线条的绘图类：

 public class DrawView extends View {
                  Paint paint = new Paint();
                  private List<Float> position1=new ArrayList<Float>();
                  private List<Float> position2=new ArrayList<Float>();;

                    public DrawView(Context context) {
                        super(context);
                        invalidate();
                        Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;

                    }

                    @Override
                    public void onDraw(Canvas canvas) {
                         super.onDraw(canvas);
                         Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);
                        assert position1.size() == position2.size();
                    for (int i = 0; i < position1.size(); i += 2) {
                        float x1 = position1.get(i);
                        float y1 = position1.get(i + 1);
                        float x2 = position2.get(i);
                        float y2 = position2.get(i + 1);
                                paint.setColor(Color.BLACK);
                        paint.setStrokeWidth(3);
                                canvas.drawLine(x1,y1, x2,y2, paint);
                        }
                    }

                }

我的布局main.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:gravity="center_horizontal">

    <ListView
        android:id="@+id/text_list"
        android:layout_width="150dp"
        android:layout_height="fill_parent" 
        />

    <LinearLayout
        android:id="@+id/draw_line"
        android:layout_width="150dp"
        android:layout_height="fill_parent"
        android:background="#cccccc" />

    <GridView
        android:id="@+id/image_list"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"
        android:columnWidth="150dp"/>


</LinearLayout>

我的Logcat详细信息：

首次选择文字和图片：

10-19 10:42:23.672: D/Text list(653): Clicking on text co-ordinates are:0.0 ,151.0
10-19 10:42:25.831: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:42:25.861: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

第二次选择文字和图片：

10-19 10:42:58.512: D/Text list(653): Clicking on text co-ordinates are:0.0 ,302.0
10-19 10:43:00.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,0.0
10-19 10:43:00.303: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

第三次选择文字和图片：

10-19 10:43:24.962: D/Text list(653): Clicking on text co-ordinates are:0.0 ,0.0
10-19 10:43:26.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:43:26.261: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

提前致谢。

Answer 1

我可能会在custom component中执行此操作，您还可以在其中渲染图像和文本。检测触摸，并使用简单的算法来检测它们击中的内容（例如，除以每个组件的高度以获得哪条线，并测试触摸触摸的哪一侧（左侧或右侧）。您可能不必费心使用文本和图像边界。将连接的组件存储在列表中，并计算给定连接组件的线的坐标（与检测触摸但反转的线或多或少相同）。

对代码的一些小注释：保留方法中方法本地的变量，Float和float自动转换，并且不使用数组来表示更好地表示为类的对象（p1.getX（）比p1.get（0）更易读。

修改：如果您只想在积分之间划线，可以执行以下操作：

public void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  Log.d("on draw","on draw position1:"+position1+" position2:"+position2);

  assert position1.size() == position2.size();

  for (int i = 0; i < position1.size(); i += 2) {
     float x1=position1.get(i);
     float y1=position1.get(i+1);
     float x2=position2.get(i);
     float y2=position2.get(i+1);
     paint.setColor(Color.BLACK);
     paint.setStrokeWidth(3);
     canvas.drawLine(x1,y1+75, x2+300,y2, paint);
  }
}

但是现在你必须确保用户以正确的顺序点击组件。如果在同一列上单击两次，则会出现问题。您必须在点击处理程序中解决这个问题。我遇到的最大问题是硬编码常量75和300.我没有看到你的布局，所以我不知道你在那里做了什么，但我很确定你最好不要使用一个组件吸取一切。

修改重写

这是MatchActivity的清理版本（虽然未经测试）：

package com.example.mediakey;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

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.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.ListView;

public class MatchActivity extends Activity {
    ArrayAdapter<String> listadapter;
    DrawView draw;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        String[] s1 = { "smiley1", "smiley2", "smiley3" };
        ListView lv = (ListView) findViewById(R.id.text_list);
        ArrayList<String> list = new ArrayList<String>();
        list.addAll(Arrays.asList(s1));
        listadapter = new ArrayAdapter<String>(this, R.layout.rowtext, s1);
        lv.setAdapter(listadapter);
        GridView gv = (GridView) findViewById(R.id.image_list);
        gv.setAdapter(new ImageAdapter(this));

        // This should be done in the layout xml
        // I moved it here to do it only once not for every click
        // I don't know how your layout is defined but it seems as this should
        //   be the parent component of the text and image views and it's not.
        //   If it works like this I don't think you should bother with it.
        //   Otherwise post your layout file.
        LinearLayout ll= (LinearLayout) findViewById(R.id.draw_line);
        draw = new DrawView(this);
        ll.addView(draw);

        lv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
                float x1 = v.getX();
                float y1 = v.getY();
                draw.addSourcePoint(x1, y1);
                Log.d("list","text positions x1:"+x1+" y1:"+y1);
            }
        });

        gv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
                float x2 = v.getX();
                float y2 = v.getY();
                draw.addDestinationPoint(x2, y2);
                Log.d("list","image positions x2:"+x2+" y2:"+y2);
            }
        });

    }
}

这是一个重写的DrawView（也是未经测试的）：

package com.example.mediakey;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

public class DrawView extends View {
    Paint paint = new Paint();
    private List<Float> position1=new ArrayList<Float>();
    private List<Float> position2=new ArrayList<Float>();;

    public DrawView(Context context) {
        super(context);
        invalidate();
        Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);

        assert position1.size() == position2.size();

        for (int i = 0; i < position1.size(); i += 2) {
            float x1 = position1.get(i);
            float y1 = position1.get(i + 1);
            float x2 = position2.get(i);
            float y2 = position2.get(i + 1);
            paint.setColor(Color.BLACK);
            paint.setStrokeWidth(3);
            canvas.drawLine(x1,y1, x2,y2, paint);
        }
    }

    public void addSourcePoint(float x1, float y1) {
        position1.add(x1);
        position1.add(y1);
    }

    public void addDestinationPoint(float x2, float y2) {
        position2.add(x2);
        position2.add(y2);
        invalidate();
    }
}

现在你需要检查哪个add * Points方法最后调用，如果连续调用两次，你需要处理它。你需要自己解决这个问题。