2012-10-11 39 views
2

我想創建應用程序,通過用線指向與適當的圖像相匹配的文本。Android如何通過用文本和圖像指向文字與圖像匹配

我想創建的應用程序完全相同,其下面的圖像所示:

I created List of text views and a grid view of images in between I have linear layout. When I click on text view I will get (x1,y1) points of text view and when I click on image I will get (x2,y2) positions of image view. I am passing this values to Drawing class to draw a line. But every time its drawing only one line.

任何一個可以請給我一個想法?

這是我的主類:

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詳情:

F文本和圖像的IRST時間選擇:文字和圖片的

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] 

在此先感謝。

+0

嗨Tobias Ritzau,感謝您的快速回復。我創建了文本視圖列表和網格視圖之間的圖像我有線性佈局。當我點擊文本視圖時,我將得到文本視圖的(x1,y1)點,當我點擊圖像時,我將得到圖像視圖的(x2,y2)位置。我將這個值傳遞給Drawing類來繪製一條線。但是每次只繪製一條線。我附上我的代碼。 – Shirisha

回答

1

我可能會在custom component中做到這一點,在那裏你也渲染圖像和文本。檢測觸摸,並使用一個簡單的算法來檢測它們所擊中的內容(例如,除以每個組件的高度以獲得哪條線,並測試觸摸哪一側(左側或右側)命中。您可能不必打擾將文本和圖像邊界存儲在一起,將連接的組件存儲在一個列表中,並計算給定連接組件的線的座標(或多或少與用於檢測觸摸但是反轉相同)

對您的代碼的一些小評論:Keep方法中方法的局部變量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方法最後調用,如果同一行在連續調用兩次,您需要處理這一點。你需要解決這個問題。

+0

感謝您的回覆Tobias,我並沒有完全明白你指的是什麼。對於這個新手來說,一些代碼對我來說有助於推進並實現這一點。我希望用戶在運行時將文本與圖像進行匹配,用戶單擊文本,然後在圖像上應該在他點擊的視圖之間繪製一條線。在我的代碼畫布中,完全按照我想要的方式畫出一條線。但它僅適用於單個選定的文本和圖像。第二次它沒有畫任何線。 :-( – Shirisha

+0

感謝您的代碼,但在這裏我的問題是我將文本和圖像位置的座標傳遞給DrawView類,我將它存儲在position1和position2中,對於每個選擇的文本和圖像,它調用DrawView構造函數並更改值每次onDraw()都會爲繪製線和onDraw()繪製第一個選擇點。第一次選擇後值不會改變。請幫助我,否則有其他方法可以實現這一點。 – Shirisha

+0

因爲DrawView有一個引用到第一個列表。不要在onClick中創建新的列表並且繼續玩。我試圖給你另一個提議。我仍然建議,但是爲了讓你去也許最好是讓你的代碼更多的功能 –