仿百度医生的智能分诊界面

最近要做一个仿百度医生的智能分诊界面（首先声明，我不是给百度医生打广告），首先来看看他的效果图

这里我们看到这个效果是，点击一张人体图片上的一个部位，可以出现一个轮廓框，然后当放开时会进入到一个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"><RelativeLayoutandroid:layout_centerInParent="true"android:layout_width="wrap_content"android:layout_height="wrap_content"><ImageViewandroid:src="@mipmap/man_front"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid: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" /><ImageViewandroid:id="@+id/man_brest"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0110"android:layout_marginTop="4dp"android:layout_below="@id/man_neck"android:background="#00000000"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/man_abdomen"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0111"android:layout_marginTop="-10dp"android:layout_below="@id/man_brest"android:background="#00000000"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/man_hand"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0109"android:layout_marginTop="-5dp"android:layout_below="@id/man_arm"android:background="#00000000"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/man_briefs"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0115"android:layout_below="@id/man_abdomen"android:background="#00000000"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/man_legs"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0116"android:layout_below="@id/man_briefs"android:background="#00000000"android:layout_marginTop="-20dp"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/man_foot"android:layout_centerHorizontal="true"android:src="@mipmap/intelligence_highlight_0117"android:layout_below="@id/man_legs"android:background="#00000000"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RelativeLayout></RelativeLayout>

这里的布局使用RelativeLayout，先是定下背景，也就是男子正面的那张图，然后从头部开始往下拼，根据屏幕显示效果来调整两个图片间的距离，具体实现可以看代码。需要注意的是手臂是一张正方形的图片，他的中间部分是透明的，但如果我们先放胸和腹部再放手臂，那么在点击事件时胸和腹部会被手臂所覆盖住，从而点不到胸和腹部，显示出的结果都是手臂。所以这里的顺序要注意。（其实用过ps的都会明白，我这个做法也是做美工的同事提醒的）

下面是activity

public class MainActivity extends ActionBarActivity implements View.OnTouchListener{private ImageView man_head,man_neck,man_brest,man_abdomen,man_arm,man_hand,man_briefs,man_legs,man_foot;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {man_head = (ImageView) findViewById(R.id.man_head);man_neck = (ImageView) findViewById(R.id.man_neck);man_brest = (ImageView) findViewById(R.id.man_brest);man_abdomen = (ImageView) findViewById(R.id.man_abdomen);man_arm = (ImageView) findViewById(R.id.man_arm);man_hand = (ImageView) findViewById(R.id.man_hand);man_briefs = (ImageView) findViewById(R.id.man_briefs);man_legs = (ImageView) findViewById(R.id.man_legs);man_foot = (ImageView) findViewById(R.id.man_foot);man_head.setAlpha(0);man_neck.setAlpha(0);man_brest.setAlpha(0);man_abdomen.setAlpha(0);man_arm.setAlpha(0);man_hand.setAlpha(0);man_briefs.setAlpha(0);man_legs.setAlpha(0);man_foot.setAlpha(0);man_head.setOnTouchListener(this);man_neck.setOnTouchListener(this);man_brest.setOnTouchListener(this);man_abdomen.setOnTouchListener(this);man_arm.setOnTouchListener(this);man_hand.setOnTouchListener(this);man_briefs.setOnTouchListener(this);man_legs.setOnTouchListener(this);man_foot.setOnTouchListener(this);}@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (v.getId()){case R.id.man_head:if (event.getAction() == MotionEvent.ACTION_DOWN){man_head.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_head.setAlpha(0);Toast.makeText(MainActivity.this, "我组成头部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_neck:if (event.getAction() == MotionEvent.ACTION_DOWN){man_neck.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_neck.setAlpha(0);Toast.makeText(MainActivity.this, "我组成颈部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_brest:if (event.getAction() == MotionEvent.ACTION_DOWN){man_brest.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_brest.setAlpha(0);Toast.makeText(MainActivity.this, "我组成胸部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_abdomen:if (event.getAction() == MotionEvent.ACTION_DOWN){man_abdomen.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_abdomen.setAlpha(0);Toast.makeText(MainActivity.this, "我组成腹部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_arm:if (event.getAction() == MotionEvent.ACTION_DOWN){man_arm.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_arm.setAlpha(0);Toast.makeText(MainActivity.this, "我组成手臂", Toast.LENGTH_SHORT).show();}return true;case R.id.man_hand:if (event.getAction() == MotionEvent.ACTION_DOWN){man_hand.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_hand.setAlpha(0);Toast.makeText(MainActivity.this, "我组成手部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_briefs:if (event.getAction() == MotionEvent.ACTION_DOWN){man_briefs.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_briefs.setAlpha(0);Toast.makeText(MainActivity.this, "我组成裆部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_legs:if (event.getAction() == MotionEvent.ACTION_DOWN){man_legs.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP) {man_legs.setAlpha(0);Toast.makeText(MainActivity.this, "我组成腿部", Toast.LENGTH_SHORT).show();}return true;case R.id.man_foot:if (event.getAction() == MotionEvent.ACTION_DOWN){man_foot.setAlpha(0xFF);} else if (event.getAction() == MotionEvent.ACTION_UP){man_foot.setAlpha(0);Toast.makeText(MainActivity.this, "我组成脚部", Toast.LENGTH_SHORT).show();}return true;default:return true;}}
}

这里实现就比较简单，首先将放好的ImageView透明度设置为透明，然后在写onTouch事件，按下时设置透明度为不透明，然后放开时再设置为透密，并触发事件显示toast。

先来看看我写的这个的效果

这里可以看到点击效果是差不多的，点击后可以显示不同的toast，说明点击不同部位是可以有不同的点击事件，那么这样是可以做出效果来的。但问题来了，这是使用RelativeLayout布局的，里面的图片间距离调整是只针对一个屏幕的，对于更多大小的屏幕这个适配问题不好解决，现在想到的方案就是针对不同的屏幕大小写不同的布局。

这里仅仅是个demo，还有切换男性，女性，儿童，以及正面，背面和头部具体显示这些操作，我已经做完了，全部都是拼图片完成，然后点击就是设置layout的visibility属性来切换显示的布局。在测试手机上显示效果还可以，由于只有一个手机测试，适配的问题还没有开始解决。

如果有更好的实现方法，请告知，谢谢。

转载请注明出处：http://blog.csdn.net/jiang89125/article/details/49622853

demo地址：http://download.csdn.net/detail/jiang89125/9238595

仿百度医生的智能分诊界面相关推荐

duilib仿百度网盘界面
duilib仿百度网盘界面这一篇我们介绍使用DuiEditor做一个百度网盘的demo界面. 这一个版本中做了重大更新,设计界面使用了窗口分割,分别为设计.代码.上下分割.左右分割.并且设计和代码实 ...
百度媒体云智能编码技术实践
随着视频行业的蓬勃发展,提升视频质量,降低带宽成本成为各平台的首要挑战目标.本文来自百度云资深工程师邢怀飞在LiveVideoStackCon 2018大会的精彩分享.在分享中其对百度云智能编码技术进 ...
thinkphp仿百度文库网站源码
简介: thinkphp仿百度文库网站源码,php+MySQL进行开发的免费文库网站源码. 界面仿百度文库,可实现文档上传下载及在线预览,用户可以对自己需求的文档进行. 本系统采用thinkphp作为 ...
国产化硬件适配能力再升级，百度天工AIoT智能边缘助力提升边缘AI算力可控能力
伴随AI+IoT技术的发展,其应用场景在不断细化,对AI芯片及硬件产品的个性化需求也在增加,这让众多边缘硬件厂商看到了新的机遇.一时间涌现众多边缘硬件厂商,进一步衍生出种类繁多的AI芯片及硬件产品线, ...
互联网日报 | 1月12日星期二 | 百度宣布组建智能汽车公司；京东成立京东科技子集团；QQ兴趣部落即将全面停运下线...
今日看点 ✦ 京东宣布成立京东科技子集团:将云与AI业务与京东数科整合 ✦ 百度宣布组建智能汽车公司,吉利控股集团为战略合作伙伴 ✦ 腾讯QQ"兴趣部落"宣布将于2月26日全面停止 ...
高仿知乎的php源码,高仿百度知乎问答系统
一款类似百度知道系统的问题解答系统,问题页面自动生成静态网页. 高仿百度知乎问答系统特色: 本系统结合了仿百度知道程序和仿新浪爱问程序的共同优点,设计更加合理问题页面实时生成静态页面,减少系统开销, ...
ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
互联网+智慧医疗：基于Python打造智慧医院项目之智能分诊
智慧医疗英文简称WIT120,是最近兴起的专有医疗名词,通过打造健康档案区域医疗信息平台,利用最先进的物联网技术,实现患者与医务人员.医疗机构.医疗设备之间的互动,逐步达到信息化. 随着计算机科学技术 ...
NLP项目实战—京东健康智能分诊文本分类项目
文章目录引言一.项目的描述与目标二.项目框架三.文本预处理与特征工程 1. 文本预处理 2. 特征工程 2.1 基于词向量的特征工程 2.2 基于人工定义的特征四.三个任务 1.projec ...

仿百度医生的智能分诊界面

仿百度医生的智能分诊界面相关推荐

最新文章

热门文章