我正在尝试创建应用程序，该应用程序通过用线指向来匹配文本和适当的图像。
我要创建完全相同的应用程序，如下图所示：
有人可以给我一个主意吗？
这是我的主要课程：
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]
提前致谢 。
最佳答案
我可能会在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方法，如果连续两次调用相同的方法，则需要处理该方法。您需要自己解决这个问题。