最近要做一个仿百度医生的智能分诊界面(首先声明,我不是给百度医生打广告),首先来看看他的效果图
这里我们看到这个效果是,点击一张人体图片上的一个部位,可以出现一个轮廓框,然后当放开时会进入到一个activity里去。简单点说也就是说点击一个图片上的不同位置可以有不同的点击事件。
起初在看到这个效果时,是百思不得其解,这个到底是如何做到的。后来在徐医生还有我同事的提点下,想到一个办法,但我这个办法非常简单粗暴,而且有屏幕适配方面的问题。下面我贴出我的实现方案,如果有更好实现方案的朋友,我们一起来探讨一下。
首先,我解压apk后获得图片资源,这里我先把图片分开给大家看看。
好了,这里只显示了男性正面的一些图片,我的实现方法很简单,就是把这些图片给拼起来。代码如下,
先是布局
<RelativeLayout 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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="@mipmap/man_front"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/man_head"
android:layout_centerHorizontal="true"
android:background="#00000000"
android:src="@mipmap/intelligence_highlight_0100"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/man_neck"
android:layout_centerHorizontal="true"
android:src="@mipmap/intelligence_highlight_0107"
android:layout_marginTop="65dp"
android:background="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/man_arm"
android:layout_centerHorizontal="true"
android:src="@mipmap/intelligence_highlight_0108"
android:layout_below="@id/man_neck"
android:background="#00000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/man_brest"
android:layout_centerHorizontal="true"
android:src="@mipmap/intelligence_highlight_0110