番外篇1：自定义view实现“凸块”效果

立即下载用AI写一个

发布时间：2019-03-21

0人 | 浏览：1499次 | 收藏 |

技术：Android+自定义View

概述

自定义view，实现矩形底边弧线效果

详细

###前言
在Android开发过程中，有着各式各样的“抬头”，其中有种效果比较有“休闲”的感觉，特征是半部分是矩形，但底边是一个弧线，话不多说，先上效果图。
![](/contentImages/image/20190321/nDTCVQBjLFOCuYKtmtX.png)

look，就是上面蓝色块的效果了。这种ui给人一种放松的感觉，不那么严肃(哎，废话我就不多讲了，鬼知道好不好看，主要看实现)。那么今天就来讲讲这种“凸块”抬头效果。

今天涉及的类容有：
1. “弧块”的特征
2. 实现方式猜想
3. 具体实现
4. mainActivity中引用
5. 项目结构图

####一. “弧块”的特征
如效果图，这个蓝色块的特征很明显，一个四条边，其中左，上，右均为直线。而底边是一条凸出的弧线，那么实现这个效果的关键点就是底边如何实现了。

###二. 实现方式猜想
特征和难点已经清楚了，那么下面猜想几种可实现的方式：
- 2.1 直接让UI给个图，然后我们设置为view背景
- 2.2 利用xml中的shape等标签，实现以上蓝块的drawable，然后将drawable设置到view上
- 2.3 自定义view实现
以上几种方式的话，第一种肯定是最快的，当然是可以实现的，第二种的话，我觉得实现的可能性比较大，由于没有实际操作过，这里大家可以发挥想象。我今天要讲的就是第三种：自定义view实现蓝块。

####三. 具体实现
自定义view实现的话，我第一想到的就是利用 region 和 path 来操作，然后通过交集，并集什么的一些逻辑来实现，这里就需要 path来画个椭圆，然后Region设置一个 Rect/RectF,然后椭圆和Region求并集等到蓝块。最后用canvas画出来。但是个人感觉 椭圆和 Region 的位置不好确定，实现起来应该比较麻烦，故暂时放弃。

第二种就是直接用 Path 画直线和弧线，形成一个封闭图形，然后绘制到canvas上，但是这里也有一个难点，就是弧线的起始和终止位置不好控制，下面就来具体讲讲它的实现。

首先我们需要在自定义view(这里，我们给自定义view取名为MyView)的onDraw(Canvas canvas)方法中获取控件宽高：
```
        //初始化
        mWidth=getWidth();
        mHeight=getHeight();
```
注意，这里我们要获取的是控件的宽高，而不是屏幕的宽高，然后在onDraw(Canvas canvas)方法中宽高可以直接用 getWidth()，getHeight()获取的。

接着，我们需要初始化一个画笔Paint：
```
        //设置画笔
        Paint paint=new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);//抗锯齿
```
这里我们需要设置paint的style为Paint.Style.FILL，因为我们需要给封闭图形上色。还有就是要设置抗锯齿，这样能让画出来的弧线更平滑。

具体画弧形方块的话，在demo中的MyView的onDraw(Canvas canvas)方法中有详细解释，这里就不多讲了。
####四。mainActivity中引用
最后是在MainActivity对应的 activity_main.xml中引用控件：

```
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

<com.testdemo.function.MyView
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="120dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
```
####五.项目结构图
![image.png](/contentImages/image/jianshu/6127340-5eac0cf37763f9fd.png)

ok,就讲到这里了，谢谢。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

番外篇1：自定义view实现“凸块”效果

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子