iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >IOS自定义UIButton九宫格效果
  • 840
分享到

IOS自定义UIButton九宫格效果

IOS九宫格 2022-05-28 06:05:02 840人浏览 八月长安
摘要

此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少。因此,主要利用UIButton阐述的; 实列不复杂,就两三个步骤完成: 一、定义宽度与高度(self.vie

此篇文章给大家描写如何写自定义九宫格,因为在开发中,这种需求也是常见不少。因此,主要利用UIButton阐述的;

实列不复杂,就两三个步骤完成:

一、定义宽度与高度(self.view)


#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

#define JHRGB(r,g,b) [UIColor colorWithRed:(r/255.0) green:(g/255.0) blue:(b/255.0) alpha:1.0]
#define JHRandomColor JHRGB(arc4random_unifORM(255), arc4random_uniform(255), arc4random_uniform(255))

二、定义九宫格的文字与图片


@property (nonatomic, strong) NSArray * titlesArr;

@property (nonatomic, strong) UILabel * numberLab;

@property (nonatomic, strong) NSArray * titleimg;

-(NSArray *)titlesArr{
 if (!_titlesArr) {
 _titlesArr = @[@"首页",@"采购",@"文章",@"社区",@"服务",@"扫描",@"定位",@"售后",@"订单"];
 }
 return _titlesArr;
}
-(NSArray *)titleimg{
 if (!_titleimg) {
 _titleimg = @[@"me",@"msg",@"meg",@"1",@"2",@"3",@"me",@"2",@"3"];
 }
 return _titleimg;
}

三、循环出9个UIBtton数据,以及相关样式动态调整


-(void)setButton{
 NSInteger totalLoc = 3;//一列三个数
 CGFloat W = 50;//宽度
 CGFloat H = W;//高度
 CGFloat margin=(self.view.frame.size.width-totalLoc * W)/(totalLoc+1);
 
 for (NSInteger i = 0; i < self.titlesArr.count; i++) {//循环体
 
 UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];//button的定义
 btn.frame = CGRectMake(100, 100, 80, 80);//button大小
 
 [btn setTitle:self.titlesArr[i] forState:UIControlStateNormal];//动态设置button文本
 [btn setBackgroundImage:[UIImage imageNamed:self.titleimg[i]] forState:UIControlStateNormal];//动态设置图片
 [btn setTitleColor:[UIColor darkGrayColor] forState:0];//文本的颜色
 [btn setImageEdgeInsets:UIEdgeInsetsMake(5, 25, 45, 25)];//图片的大小
 [btn setTitleEdgeInsets:UIEdgeInsetsMake(80, 0, 5, 0)];//文本的位置
 //btn.backgroundColor = [UIColor blueColor];
 
 
 NSInteger row = i / totalLoc;//行号
 NSInteger loc = i % totalLoc;//列号
 //0/3=0,1/3=0,2/3=0,3/3=1;
 //0%3=0,1%3=1,2%3=2,3%3=0;
 CGFloat X= margin + (margin + W) * loc;
 CGFloat Y= margin + (margin + H) * row;
 btn.frame = CGRectMake(X, Y, W, H);
 
 //设置tag值(这里的tag,只是为了让button的每次点击都有不同的动画效果)
 btn.tag = i;
 
 [btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
 
 [self.lgView.imgview addSubview:btn];
 }
}

四、点击按钮的事件监听


-(void)clickBtn:(UIButton *)btn{
 
 NSString *stringInt = [NSString stringWithFormat:@"%ld",(long)btn.tag];
 
 btn.layer.transform = CATransform3DMakeScale(0.5*arc4random_uniform([stringInt floatValue]), 0.5*arc4random_uniform([stringInt floatValue]), 1);
 
 self.numberLab.text = btn.titleLabel.text;
 NSLog(@"%@wo dian ji l:",stringInt);
 [UIView animateWithDuration:0.5 animations:^{
 
 btn.layer.transform = CATransform3DMakeScale(1, 1, 1);
 
 }];
}

总结:

如下逻辑分析:

上面用的是masonry布局,所以我的view容器就没用宽度,高度(写在我的view层里了)。 2.先定义一个View容器 3.在容器里,循环体里面定义button,设置button的属性等。 4.定义相关的数组,如:(文本,图片) 5.点击按钮事件触发函数;

就以上信息需要理解的逻辑,把上面的复制粘贴就可以,项目亲测可以的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: IOS自定义UIButton九宫格效果

本文链接: https://www.lsjlt.com/news/30416.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义九宫格输入框
    本文实例为大家分享了Android自定义九宫格输入框的具体代码,供大家参考,具体内容如下 效果 实现 绘制宫格分割线 这里我们用一个RectF类型的数组来装载数据。在onSizeC...
    99+
    2024-04-02
  • Android自定义控件实现九宫格解锁
    关于九宫格解锁,我看了不少博客,但是都感觉很复杂,可能我的功夫还不到,所以很多东西我不了解,但是我还是打算写一个自己的九宫格。我相信我的九宫格大家都能很快的理解,当然如果需要实现更复...
    99+
    2024-04-02
  • Android RecyclerView实现九宫格效果
    RecyclerView更加优化的复用机制和方便实现UI效果,几乎替代Listview和GridView的使用。但是分割线的实现,需要自己继承ItemDecoration来绘制。 效...
    99+
    2024-04-02
  • iOS自定义滑杆效果
    本文实例为大家分享了iOS自定义滑杆的具体代码,供大家参考,具体内容如下 先让我们看看效果: 主要实现的代码: UIImage *thumbWithLevel(float aLev...
    99+
    2024-04-02
  • JavaScript实现九宫格拖拽效果
    本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码,供大家参考,具体内容如下 关于一些拼图游戏什么的,见人家效果做的不错,参考下别人写的代码,我也尝试着做了个。 &...
    99+
    2024-04-02
  • Android自定义ViewGroup实现朋友圈九宫格控件
    目录一、简介 1.1、效果图如下1.2、主要功能如下二、使用 2.1、自定义属性如下2.2、布局中使用自定义NineImageLayout2.3、Adapter方式绑定数据和UI2....
    99+
    2024-04-02
  • Android自定义控件实现九宫格解锁功能
    最终Android九宫格解锁效果如下进行定义实体point点public class Point { private float x; private float y; //正常模式 public static final int NORM...
    99+
    2023-05-31
    android 九宫格 解锁
  • Android自定义view实现滑动解锁九宫格控件
    目录前言需求效果图前言 上一篇文章用贝塞尔曲线画了一个看起来不错的小红点功能,技术上没什么难度,主要就是数学上的计算。这篇文章也差不多,模仿了一个常用的滑动解锁的九宫格控件。 需求 ...
    99+
    2023-02-09
    Android滑动解锁九宫格 Android滑动解锁 Android九宫格控件
  • JavaScript canvas实现九宫格切图效果
    本文实例为大家分享了canvas实现九宫格切图效果的具体代码,供大家参考,具体内容如下 首先页面展示 直接上代码 <!DOCTYPE html> <html ...
    99+
    2024-04-02
  • ios怎么自定义滑杆效果
    本篇内容介绍了“ios怎么自定义滑杆效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!先让我们看看效果:主要实现的代码:UIImage&nb...
    99+
    2023-06-30
  • JavaScript实现九宫格点击变色效果
    本文实例为大家分享了JavaScript实现九宫格点击变色效果的具体代码,供大家参考,具体内容如下 完成九宫格布局,实现点击任意格子之后改变该格子自身背景颜色。 首先使用表格完成九...
    99+
    2024-04-02
  • Android自定义View实现九宫格图形解锁(Kotlin版)
    本文实例为大家分享了Android自定义View实现九宫格图形解锁的具体代码,供大家参考,具体内容如下 效果: 代码: package com.example.kotlin_t...
    99+
    2024-04-02
  • Android如何自定义ViewGroup实现朋友圈九宫格控件
    本篇内容介绍了“Android如何自定义ViewGroup实现朋友圈九宫格控件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!目录一、简介1、...
    99+
    2023-06-20
  • JavaScript如何实现九宫格拖拽效果
    这篇文章主要介绍“JavaScript如何实现九宫格拖拽效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript如何实现九宫格拖拽效果”文章能帮助大家解决问题。代码如下:<!DO...
    99+
    2023-07-02
  • 微信小程序实现九宫格效果
    本文实例为大家分享了微信小程序实现九宫格效果的具体代码,供大家参考,具体内容如下 1.九宫格实现示例图: Tips: 说明: 使用 display: -webkit-flex;对...
    99+
    2024-04-02
  • React Native中ListView如何实现九宫格效果
    这篇文章将为大家详细讲解有关React Native中ListView如何实现九宫格效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ListView是基于ScrollV...
    99+
    2024-04-02
  • 原生JS怎样实现九宫格抽奖效果
    小编给大家分享一下原生JS怎样实现九宫格抽奖效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:代码如下:<!DOCTYPE html> <html>...
    99+
    2024-04-02
  • iOS UISegmentControl如何实现自定义分栏效果
    小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下iOS 自带的...
    99+
    2023-06-29
  • 小程序怎么实现九宫格心形拼图效果
    这篇文章主要介绍了小程序怎么实现九宫格心形拼图效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇小程序怎么实现九宫格心形拼图效果文章都会有所收获,下面我们一起来看看吧。实现小程序的思路有两个 canvas,一个...
    99+
    2023-06-26
  • JavaScript自定义日历效果
    本文实例为大家分享了JavaScript自定义日历效果的具体代码,供大家参考,具体内容如下 实现思路:获取每个月的第一天是星期几,然后把前面的天数填充为空,在获取每个月有多少天,循环...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作