2013-02-05 65 views
0

我需要使这个可点击图像与HTML中的imageMap相似。我还需要在可点击区域上放置一个图标(位于中心,有点像地图标记),但我如何解释图像大小调整?Android中可点击图标的图标

即我的图像可能是800x600,可点击区域可能是由20,20和60,40覆盖的矩形,但这些像素在没有显示时实际上不再指向图像中的相同位置在像素完美的时尚。

编辑:我的图片是从SD卡取出,而不是从绘制文件夹

回答

-1

这是我在这个link

发现,我发现自己需要来显示图像,并且对 用户水龙头导航和执行操作的图像的不同部分。在 勾画出我需要的东西之后,很明显我想要的是 ,就像HTML地图标记,但是在Android视图中。多一点 思考,我决定这将是一个有用的部件,有 可用。

生成的代码:

支持图像的绘制或位图布局允许在XML 区域的标签列表允许使用剪切和粘贴HTML区域标记为 资源XML (即可以采用HTML地图和图像,只需最少的编辑即可使用 )支持平移,如果图像大于 设备屏幕支持捏放大当点击区域 时支持回调。支持表示注释作为气泡文本和提供 回调,如果气泡被轻敲的代码可以在GitHub – Android Image Map

更新2中找到2012年3月:增加一个选项,以总是使用调整 原始图像的比特图像。某些图像在上下调整大小时会丢失 很多图像质量。始终从原始位 调整大小以提供最佳图像,但需要额外的内存。权衡 现在取决于你。

下面是关于实施的一些简要说明,我会做一些 跟进有关一些关键区域的更多细节的帖子。

将地图与img关联的易用性与在HTML中嵌入img标签时易于做到 相同。只需提供在 使用地图的名称布局:

<!--?xml version="1.0" encoding="utf-8"?--> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:ctc="http://schemas.android.com/apk/res/com.ctc.android.widget" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
    <com.ctc.android.widget.ImageMap 
     android:id="@+id/map" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:src="@drawable/usamap" 
     ctc:map="usamap"/> 
</LinearLayout> 

的区域地图在您的项目在RES/XML/map.xml指定一个 区别在HTML地图是每个区域必须有一个ID。我根据这个要求来回 ,并且我可以更改代码以允许 用于没有id的区域。代码将使用名称属性(如果存在),否则它将查找标题或alt。目前的实施 也需要每个区域的名称,虽然这可以很容易地改变 。

<!--?xml version="1.0" encoding="utf-8"?--> 
<maps xmlns:android="http://schemas.android.com/apk/res/android"> 
    <map name="gridmap"> 
     <area id="@+id/area1001" shape="rect" coords="118,124,219,226" /> 
     <area id="@+id/area1002" shape="rect" coords="474,374,574,476" /> 
     <area id="@+id/area1004" shape="rect" coords="710,878,808,980" /> 
     <area id="@+id/area1005" shape="circle" coords="574,214,74" /> 
     <area id="@+id/area1006" shape="poly" coords="250,780,250,951,405,951" /> 
     <area id="@+id/area1007" shape="poly" coords="592,502,592,730,808,730,808,502,709,502,709,603,690,603,690,502" /> 
    </map> 
    <map name="usamap"> 
     <area id="@+id/area1" shape="poly" coords="230,35,294,38,299,57,299,79,228,79" /> 
... 
    </map> 
</maps> 

图像本身被放置在res /抽拉-nodpi使得系统 将不尝试使图像适应基于DPI设备。我们保证,我们的区域坐标将正确地映射到 显示的图像 。

这里是查找在布局视图和一个点击处理增加了

public class ImageMapTestActivity extends Activity { 
    ImageMap mImageMap; 

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

     // find the image map in the view 
     mImageMap = (ImageMap)findViewById(R.id.map); 

     // add a click handler to react when areas are tapped 
     mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() { 
      @Override 
      public void onImageMapClicked(int id) { 
       // when the area is tapped, show the name in a 
       // text bubble 
       mImageMap.showBubble(id); 
      } 

      @Override 
      public void onBubbleClicked(int id) { 
       // react to info bubble for area being tapped 
      } 
     }); 
    } 
} 

希望这将有助于样品的活动。

+0

谢谢,我会尝试,但这并不能给我实际的位置,我应该把图标放在重采样图像上。不过这是一个有趣的解决方案。 – MichelReap

+0

其实我没有使用它,但我认为当你开始实施它时,你会更清楚它的实际工作。 – KDeogharkar

+0

虽然我看到了坐标。 – KDeogharkar