• 使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button


    通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的需求;

    本文为解决这样的按钮问题:

    wKioL1TJj0rhkOpBAABwkNoAuzk068.jpg

    如下图:使用CAShapeLayer和UIBezierPath画了一个button,这个按钮由一个半圆弧和三角形构成,现在我们需要点击黄颜色区域时,响应按钮点击事件,弹出对话框,其他白色区域,不响应点击事件;

    wKiom1TJjmmyQUdAAACSQujt7tc635.jpg

    第一步:

    如下图,自定义一个类,CustomButton,继承于UIControl;本人觉得,如果要写一个自定义按钮,不需要button中的其他控件时,继承于UIControl比较好,如果按钮布局同系统UIButton,那么继承于UIButton比较好;

    wKioL1TJkX3ybxJ_AABkVpYx7QU716.jpg

    第二步:

    在CustomButton.m文件中,对CustomButton类添加一个延展,声明三个成员变量;CAShapeLayer、id

    、SEL;

    wKiom1TJkJ6wGlF6AACOI8oO77M787.jpg

    第三步:

    在 CustomButton.m文件中,做好自定义配置;其中,centerPoint为半圆弧中心点,bottomPoint为三角形顶尖 点,endPoint为圆弧起点和三角型左侧相连的点,这个点可以去掉,去掉之后,图形还是一样的,只是没有左侧那条红色的闭区间线条;

    wKioL1TJkYqjtIh7AAT6z_XcPM4998.jpg

    注意:[_target performSelectorOnMainThread:_action withObject:nil waitUntilDone:NO];调用者为_target,不是self;不然会crash,原因为定义的按钮无法识别响应事件;

    最后:在ViewController中,使用CustomButton定义一个按钮,并调用相应的点击事件;即可得到文章开始的效果

    wKiom1TJkKrz0uipAALE8-7nG24406.jpg

  • 相关阅读:
    浅谈欧拉定理的证明
    10-8 王小呆的校内互坑赛题解
    10-8 王小呆的校内互坑赛题面
    线段树 洛谷P3932 浮游大陆的68号岛
    BFS+最小生成树+倍增+LCA【bzoj】4242 水壶
    洛谷P1119 灾后重建
    border-radius:50%和100%的区别
    react-native Android release打包失败
    关于react理解的文章
    atom常用快捷键-mac亲测
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4947069.html
Copyright © 2020-2023  润新知