Лучшее решение для рисования чувствительных областей на изображении

Question

Мне интересно, что было бы лучшим решением для получения результата, показанного ниже. Вот что я нашел до сих пор:

a ImageView для леса и прозрачной поверхностиView (для обработки касания), на котором я бы рисовал прямоугольники? Or ... Just One SurfaceView с изображением, установленным в качестве фона и прямоугольников, непосредственно нарисованных на ...?

Для этих 2 я уже выбрал RelativeLayout.

Какой из этих 2 был бы самым эффективным и простым в использовании? Или, может быть, есть другой способ, о котором я не думаю.

В любом случае, спасибо за ваши советы, вот что я, как правило, ...

Answer 1

Я реализовал это, помещая изображение в RelativeLayout (FrameLayout будет работать тоже), и затем добавление каждого очерченного представления программно. Если вы знаете происхождение x и y (возможно, как отношение к изображению) и размер для каждой области, вы можете легко раздуть каждый вид/область (с черной рамкой, прозрачным центром), сделать ее кликабельной и установить слушателя, а затем установить его происхождение, отрегулировав его поля. Вы можете выполнить все это после того, как изображение, закончит разбивку:

Я положил это в onActivityCreated моих Fragment, но и другие методы жизненного цикла будут работать слишком ...

ViewTreeObserver vto = image.getViewTreeObserver(); 
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 

     @Override 
     public void onGlobalLayout() { 
      if (image.getMeasuredHeight() > 0) { 
       addHotSpots(); 
       ViewTreeObserver obs = image.getViewTreeObserver(); 
       obs.removeGlobalOnLayoutListener(this); 
      } 
     } 

    }); 

И это, как Я на самом деле место все горячие точки/области:

protected void addHotSpots() { 
    HotSpot[] hotSpots = res.hotspots; 
    for (HotSpot hs : hotSpots) { 
     addHotSpotToImage(hs); 

} 

private void addHotSpotToImage(HotSpot hs) { 

    int height = image.getMeasuredHeight(); 
    int width = image.getMeasuredWidth(); 
    //this piece will probably be different for you 
    //depending on what you know about the area's intended size/position 
    double hsHeightRatio = hs.lr.y - hs.ul.y; 
    double hsWidthRatio = hs.lr.x - hs.ul.x; 
    double leftMargin = hs.ul.x * width; 
    double topMargin = hs.ul.y * height; 
    double hsHeight = height * hsHeightRatio; 
    double hsWidth = width * hsWidthRatio; 
    LayoutInflater vi = (LayoutInflater) image.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
    View newSpot = vi.inflate(R.layout.question_hotspot, null); 

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams((int) hsWidth, (int) hsHeight); 
    newSpot.setTag(hs.key); 
    newSpot.setFocusable(true); 
    newSpot.setClickable(true); 
    newSpot.setFocusableInTouchMode(true); 
    newSpot.setOnTouchListener(this); 

    params.topMargin = (int) topMargin; 
    params.leftMargin = (int) leftMargin; 
    image.addView(newSpot, params); 

}