仿百度智能导诊页面

最新推荐文章于 2024-08-31 16:20:51 发布

泡在网上的日子

最新推荐文章于 2024-08-31 16:20:51 发布

阅读量3.3k

点赞数

分类专栏： UI 交互文章标签：百度

本文链接：https://blog.csdn.net/ignacey/article/details/51768760

版权

本文介绍了一种实现方式，用于在点击人体部位时触发微交互并进行页面跳转。功能覆盖男人、女人和小孩，涵盖前身、后背及头部放大等9种情况，通过自定义BodyView来实现。在View中处理用户触摸事件，运用算法判断触摸点是否在预设的矩阵区域内，从而实现精准的交互反馈。

摘要由CSDN通过智能技术生成

首先介绍一下功能：点击人体部位实现微交互，并进行页面跳转。

此功能共有三类人，男人女人和小孩，同时又结合了前身，后背，及头部放大，故有3*3种情况，这里我们使用自定义View去解决。

首先我们自定义一个BodyView继承于View。

<ol><li><span style="font-family:Microsoft YaHei;font-size:12px;">    public BodyView(Context context) {</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">        this(context, null);</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">    }</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">
</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">    public BodyView(Context context, AttributeSet paramAttributeSet) {</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">        this(context, paramAttributeSet, 0);</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">    }</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">
</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">    public BodyView(Context context, AttributeSet paramAttributeSet, int paramInt) {</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">        super(context, paramAttributeSet, paramInt);</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">        this.mContext = context;</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">        init();</span></li><li><span style="font-family:Microsoft YaHei;font-size:12px;">    }</span></li></ol>

一、首先我们在init()方法中做一些初始化

<ol><li><span style="font-family: 'Microsoft YaHei';">	</span><span style="font-family: 'Microsoft YaHei';">private void init() {</span></li><li><span style="font-family: 'Microsoft YaHei';">        float density = getResources().getDisplayMetrics().density;</span></li><li><span style="font-family: 'Microsoft YaHei';">        BitmapFactory.Options localOptions = new BitmapFactory.Options();</span></li><li><span style="font-family: 'Microsoft YaHei';">        localOptions.inJustDecodeBounds = true;</span></li><li><span style="font-family: 'Microsoft YaHei';">        BitmapFactory.decodeResource(getResources(), R.mipmap.man_front, localOptions);</span></li><li><span style="font-family: 'Microsoft YaHei';">        mManFrontWidth = ((int) (density * localOptions.outWidth / 2.0F));</span></li><li><span style="font-family: 'Microsoft YaHei';">        mManFrontHeight = ((int) (density * localOptions.outHeight / 2.0F));</span></li><li><span style="font-family: 'Microsoft YaHei';">        BitmapFactory.decodeResource(getResources(), R.mipmap.man_bigface, localOptions);</span></li><li><span style="font-family: 'Microsoft YaHei';">        mHeadWidth = ((int) (density * localOptions.outWidth / 2.0F));</span></li><li><span style="font-family: 'Microsoft YaHei';">        mHeadHeight = ((int) (density * localOptions.outHeight / 2.0F));</span></li><li><span style="font-family: 'Microsoft YaHei';">        mPaint = new Paint();</span></li><li><span style="font-family: 'Microsoft YaHei';">        mPaint.setAntiAlias(true);</span></li><li><span style="font-family: 'Microsoft YaHei';">        mPaint.setColor(Color.WHITE);</span></li><li><span style="font-family: 'Microsoft YaHei';">        mPaint.setStrokeWidth(5.0F);</span></li><li><span style="font-family: 'Microsoft YaHei';">        mInitAreaRunnable = new InitAreaRunnable(this);</span></li><li><span style="font-family: 'Microsoft YaHei';">    }</span></li></ol>

我们做的是drawBitmap，这里是对