UIKit之App界面Demo

需求

实现简单的APP界面
在这里插入图片描述

功能：

  1. 实现滚动
  2. 实现上层、下层横栏滚动时穿透效果（永远浮在表面，不跟着滚动）。暂用UIView代替，还没学Bar。

分析：

知识点：

  1. 实现鼠标拖动的上下滚动：当把各个带背景图的子控件添加到UIScrollView中时，就能。
  2. 上下导航栏没有参与滚动：它们并不属于UIScrollView的子控件。
    本质是和UIScrollView同层的视图，且有不透明度。
    其中的文字，通过UILabel设置，其它API的原理也一样，都是要通过添加内容到视图上的方式来设置。
  1. 需要掌握USIScrollView三个属性的应用：
    1> 可滚动：设置contentSize。若宽度为屏幕宽度则横向不能滚动，如果高度大于屏幕，则实现滚动。
    2> 初始显示偏移：如下，要让橙色别盖住下面，但是顶层topBar又不是scrollView的子视图。
    要设置偏移量。需要偏移UIView大小加上margintop大小。
    设置contentInsetOffset：CGPointMake(0, -100)。注意偏移量是负数
    3> 但是拖动后，又会恢复原来被覆盖的样子，希望永远不回去，还需要设置内边距，所以是第三个属性：contentInset，参数为（上,左,下,右）。
    请添加图片描述

实现

自定义类：

声明需要的全部组件

关于weak和strong的简单选用：当前类是否拥有它。

#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interface UIScrollViewHimalayanTest : UIView
// 1. 声明组件：几个按钮：（因为可点击）
/*weak或strong选取：当前类拥有它，则声明为strong，否则为weak*/
@property(nonatomic, strong) UIScrollView* scrollveiw;
@property(nonatomic, strong) UIView* topbar;
@property(nonatomic, strong) UIView* bottombar;@property(nonatomic, strong) UIButton* l1;
@property(nonatomic, strong) UIButton* l2;
@property(nonatomic, strong) UIButton* l3;
@property(nonatomic, strong) UIButton* r1;
@property(nonatomic, strong) UIButton* r2;
@property(nonatomic, strong) UIButton* r3;
@property(nonatomic, strong) UIButton* bottom1;@end

实现：

仅仅是scrollView加其它UI的创建和初始化

//
//  UIScrollViewHimalayanTest.m
//  OCUI_Learn
//
//  Created by AAA on 2024/6/3.
//#import "UIScrollViewHimalayanTest.h"@implementation UIScrollViewHimalayanTest-(instancetype) initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if(self){/*创建滚动组件、按钮:w、h、margincontentSize：必须给大小，如果内容很小，必然不能滚动，滚动的本质是UIScrollView的contentSize很大。宽度设置为屏幕宽度即可，这样横向就不能滚动*/CGFloat w = (self.frame.size.width - 30) /2;CGFloat h = w;CGFloat marginleft = 10;CGFloat margintop = 10;CGRect screenBounds = [[UIScreen mainScreen] bounds];_scrollveiw = [[UIScrollView alloc] initWithFrame:screenBounds];_l1 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft, 0, w, h)];_l2 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft, margintop+h, w, h)];_l3 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft, margintop*2+h*2, w, h)];_r1 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft*2+w, 0, w, h)];_r2 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft*2+w, margintop+h, w, h)];_r3 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft*2+w, margintop*2+h*2, w, h)];_bottom1 = [[UIButton alloc] initWithFrame:CGRectMake(marginleft, margintop*3+h*3, 2*w+marginleft, h/2.5)];# pragma mark -- bar设置：bar的位置_topbar =  [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 120)];_bottombar = [[UIView alloc] initWithFrame:CGRectMake(0, margintop*6+h*4, self.frame.size.width, 100)];// 高度为屏幕大一点，这样才能滚动，因为滚动本质是内容大于内含实际大小_scrollveiw.contentSize = CGSizeMake(screenBounds.size.width, screenBounds.size.height * 1.05);// 增加背景图[_l1 setBackgroundImage:[UIImage imageNamed:@"finditem_ad.png"] forState:UIControlStateNormal];[_l2 setBackgroundImage:[UIImage imageNamed:@"finditem_newsound.png"] forState:UIControlStateNormal];[_l3 setBackgroundImage:[UIImage imageNamed:@"finditem_hotpeople.png"] forState:UIControlStateNormal];[_r1 setBackgroundImage:[UIImage imageNamed:@"finditem_wallspoint.png"] forState:UIControlStateNormal];[_r2 setBackgroundImage:[UIImage imageNamed:@"finditem_newpeople.png"] forState:UIControlStateNormal];[_r3 setBackgroundImage:[UIImage imageNamed:@"finditem_ad.png"] forState:UIControlStateNormal];[_bottom1 setBackgroundImage:[UIImage imageNamed:@"finditem_iwannabehere.png"] forState:UIControlStateNormal];# pragma mark -- bar设置：涉及 scrollview 两个属性 ↑ 和移量和内边距/*当前TopBar视图的不透明度设置底色为白色才会有灰色且透明的效果设置把顶部占满:需要调整文字的位置、且底部应该调整icon1的位置，首页的位置，底部大小现在合适。上下bar的信息设置通过Label设置信息通过Button设置iconicon的两种状态下图片不同：默认偏移位置设置：使得topBar内容不要压住下面的内容：UIScrollView第二个属性 设置偏移量且拖动后回去仍然不压住：UIScrollView第三个属性：设置内边距设置bottomBar：同TopBar误区：bottom btn1：y偏移量应该为0，因为它添加在bottombar视图里面。*/[_topbar setBackgroundColor:[UIColor whiteColor]];_topbar.alpha = 0.6;UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(self.bounds.size.width/2-50, 50, self.frame.size.width, 60)];UIButton *iconbtn = [[UIButton alloc] initWithFrame:CGRectMake(self.bounds.size.width/2+55, 0, 70, 70)];[iconbtn setImage:[UIImage imageNamed:@"find_setting_n.png"] forState:UIControlStateNormal];[iconbtn setImage:[UIImage imageNamed:@"find_setting_h.png"] forState:UIControlStateHighlighted];label1.text = @"喜马拉雅电台";_scrollveiw.contentOffset = CGPointMake(0, -70);_scrollveiw.contentInset = UIEdgeInsetsMake(70, 0, 0, 0);[_bottombar setBackgroundColor:[UIColor whiteColor]];_bottombar.alpha = 0.6;UIButton *bottomBtn1 = [[UIButton alloc] initWithFrame:CGRectMake(10, 0, 50, 50)];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_n.png.png"] forState:UIControlStateNormal];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_h.png.png"] forState:UIControlStateHighlighted];UIButton *bottomBtn2 = [[UIButton alloc] initWithFrame:CGRectMake(10, 0, 50, 50)];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_n.png.png"] forState:UIControlStateNormal];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_h.png.png"] forState:UIControlStateHighlighted];UIButton *bottomBtn3 = [[UIButton alloc] initWithFrame:CGRectMake(10, 0, 50, 50)];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_n.png.png"] forState:UIControlStateNormal];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_h.png.png"] forState:UIControlStateHighlighted];UIButton *bottomBtn4 = [[UIButton alloc] initWithFrame:CGRectMake(10, 0, 50, 50)];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_n.png.png"] forState:UIControlStateNormal];[bottomBtn1 setImage:[UIImage imageNamed:@"tab_home_h.png.png"] forState:UIControlStateHighlighted];self.backgroundColor = [UIColor grayColor];/*添加到当前视图上下的bar：先添加topbar和bottombar*/[self addSubview:_scrollveiw];[_topbar addSubview:label1];[_topbar addSubview:iconbtn];[_bottombar addSubview:bottomBtn1];//[_bottombar addSubview:label2];[_scrollveiw addSubview:_l1];[_scrollveiw addSubview:_l2];[_scrollveiw addSubview:_l3];[_scrollveiw addSubview:_r1];[_scrollveiw addSubview:_r2];[_scrollveiw addSubview:_r3];[_scrollveiw addSubview:_bottom1];[self addSubview:_topbar];[self addSubview:_bottombar];}return self;
}@end

发现问题：

发现整个界面灰蒙蒙一片，我以为是视图添加顺序出错，使得不透明的上下作为Bar的ViewBar在顶层使得整体灰蒙蒙，仔细检查是因为我设置不透明度时，应该对Bar设置，而不是对self设置。且添加父视图顺序，一般不会影响到别的样式内容。

发现设置了按钮的高亮和普通状态，点击后按钮icon不会变红。
仔细检查，它的父视图（UITopViewBar）没有包住它。

关于UIScrollView：

· 设置按钮事件：
当点击按钮后可以使得内部画面做滚动。且滚到超出边界，应该让内容滚回到边界上，代码按钮设置contenOffset过于生硬。将重新设置框体放到动画函数block中即可。
· 隐藏滚动显示器也可以，设置属性，self.scrollView.showsHorizontalScrollIndicator = NO;。
· contentInset属性：
可以理解为滚动到边上，能多加上多少距离。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/22115.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小红书前端2轮面试期望22K，全程问低代码设计

小红书前端2轮面试期望22K，全程问低代码设计

一面&#xff08;通过&#xff09; 1、好&#xff0c;那我们开始把&#xff0c;先简单介绍一下自己的一个经历&#xff0c;以及自己有亮点的项目&#xff1f;balabala 2、你可以这样介绍&#xff1a;在这里边主要负责哪几个项目&#xff0c;哪些项目是比较有亮点的&#xff0…
阅读更多...
python用PyPDF2函数库方法对pdf文件切割

python用PyPDF2函数库方法对pdf文件切割

烦透了那些软件动不动就要收费&#xff0c;于是自己尝试码程序处理pdf分割。 由于PyPDF2更新到了3.0之后&#xff0c;之前网上的旧代码无法使用&#xff0c;查了半天没出准谱&#xff0c;结果百度AI生成了代码&#xff0c;一试&#xff0c;成了&#xff01; 果然&#xff0c;…
阅读更多...
代码随想录-算法训练营day60【单调栈03：柱状图中最大的矩形】

代码随想录-算法训练营day60【单调栈03：柱状图中最大的矩形】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第十章 单调栈part03有了之前单调栈的铺垫，这道题目就不难了。 ● 84.柱状图中最大的矩形https://programmercarl.com/0084.%E6%9F%B1%E7%8A%B6%E5%9B%BE%E4%B8%AD%E6%9C%80%E5%A4%A7%E7%9A%84%E7%9F%A9%E5%BD%A2.htm…
阅读更多...
智享直播（三代）2024年：打造24/7实景无人直播，引领年轻资产创业新纪元！

智享直播（三代）2024年：打造24/7实景无人直播，引领年轻资产创业新纪元！

在21世纪的数字化浪潮中&#xff0c;直播行业以其独特的魅力和无限的可能性&#xff0c;正在全球范围内掀起一场前所未有的( keJ0277 )创业革命。而在这场革命中&#xff0c;智享直播&#xff08;三代&#xff09;以其创新的技术理念和前瞻的战略布局&#xff0c;立志于2024年打…
阅读更多...
怎么用电脑录制视频？小白也能快速上手

怎么用电脑录制视频？小白也能快速上手

随着网络技术的发展&#xff0c;电脑录制视频已经成为了许多人的日常需求&#xff0c;无论是游戏玩家想录制自己的精彩操作&#xff0c;还是上班族需要录制屏幕演示&#xff0c;一款好用的录屏软件变得尤为重要。可是你知道怎么用电脑录制视频吗&#xff1f;本文将介绍两种电脑…
阅读更多...
I2C通信协议

I2C通信协议

I2C通信协议 项目要求是&#xff0c;通过通信线&#xff0c;是实现单片机读写外挂模块寄存器的功能&#xff0c;至少实现&#xff0c;在指定位置写寄存器和在指定位置读寄存器&#xff0c;实现了读写寄存器&#xff0c;就实现对模块的控制。 MPU6050&#xff0c;OLED&#xf…
阅读更多...
【ARM】Fusa Compiler 6.16 LTS的安全认证报告获取

【ARM】Fusa Compiler 6.16 LTS的安全认证报告获取

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 了解ARM的Arm Compiler for Embedded FuSa 6.16 LTS的安全认证证书和报告的获取 2、 问题场景 对于使用了ARM DS Gold/Platinum、MDK pro或者Arm Compiler for Embedded FuSa 6.16 LTS产品的客户。在对于最终的产品…
阅读更多...
生产问题排查：springboot项目启动时注册nacos失败或运行时从nacos闪退

生产问题排查：springboot项目启动时注册nacos失败或运行时从nacos闪退

文章目录 一、引出问题二、解决方案1、使用actuator健康检查2、项目启动时判断nacos是否正常连接3、k8s设置探针 一、引出问题 生产项目是用k8s部署的&#xff0c;最近经常遇到启动时注册不到nacos&#xff08;查找nacos的host地址找不到&#xff09;&#xff0c;或者运行的好…
阅读更多...
有文字转语音真人发声吗？这5个配音工具堪比真人配音

有文字转语音真人发声吗？这5个配音工具堪比真人配音

青春是一首永不老去的歌&#xff0c;它镌刻在生命的唱片上&#xff0c;永不退色。 每当我们听到那些熟悉的旋律&#xff0c;心中总会涌起一股暖流&#xff0c;仿佛回到了那个充满活力和梦想的年代。借助现代科技的力量&#xff0c;我们可以通过文字转语音软件&#xff0c;让这…
阅读更多...
.NET集成DeveloperSharp实现图片的裁剪、缩放、与加水印

.NET集成DeveloperSharp实现图片的裁剪、缩放、与加水印

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…
阅读更多...
Apache Doris 基础 -- 数据表设计（表索引）

Apache Doris 基础 -- 数据表设计（表索引）

1、索引概述 索引用于帮助快速过滤或搜索数据。目前&#xff0c;Doris支持两种类型的索引:内置智能索引和用户创建的二级索引。 内置智能索引 排序键和前缀索引:Apache Doris基于排序键以有序的方式存储数据。它为每1024行数据创建一个前缀索引。索引中的键是当前1024行组的…
阅读更多...
github搭建个人博客

github搭建个人博客

准备工作 windows安装nodejs windows安装git windows安装hexo 拥有gitee个人账户 配置信息 通过gitee创建博客仓库 登录gitee平台&#xff0c;进入主界面&#xff0c;右侧加号&#xff0c;新建仓库&#xff0c;注意&#xff1a;仓库名称和gitee用户名称一致 生成/添加 SSH 公…
阅读更多...
初级网络工程师之入门到入狱（一）

初级网络工程师之入门到入狱（一）

本文是我在学习过程中记录学习的点点滴滴&#xff0c;目的是为了学完之后巩固一下顺便也和大家分享一下&#xff0c;日后忘记了也可以方便快速的复习。 网络工程师从入门到入狱 前言一、交换机二、路由器三、DHCP&#xff08;动态主机配置协议&#xff09;四、路由器配置 DHCP自…
阅读更多...
【golang】go语言读取Excel表格中的数据

【golang】go语言读取Excel表格中的数据

导入库基本用法封装 在Go语言中&#xff0c;可以使用第三方库来读取Excel文件。 常用的库是github.com/tealeg/xlsx&#xff0c;提供了处理Excel文件的功能。 导入库 首先&#xff0c;安装"github.com/tealeg/xlsx"库。可以通过以下命令在终端中安装&#xff1a; g…
阅读更多...
Transformer系列：Greedy Search贪婪搜索解码流程原理解析

Transformer系列：Greedy Search贪婪搜索解码流程原理解析

解码器预测流程简述 Encoder-Decoder这类框架需要在解码器中分别拿到前文已经翻译的输入&#xff0c;以及编码器的输出这两个输入&#xff0c;一起预测出下一个翻译的单词。在训练阶段&#xff0c;一个句子通过右移一位的方式转化为从第二个词到最后一个词的逐位预测任务&…
阅读更多...
Springboot vue elementui 前后端分离 事故灾害案例管理系统

Springboot vue elementui 前后端分离 事故灾害案例管理系统

源码链接 系统演示:https://pan.baidu.com/s/1hZQ25cpI-B4keFsZdlzimg?pwdgw48
阅读更多...
【Golang】go语言写入数据并保存Excel表格

【Golang】go语言写入数据并保存Excel表格

导入包创建文件添加表格添加行添加单元格保存文件封装 导入包 首先&#xff0c;安装github.com/tealeg/xlsx库。可以通过以下命令在终端中安装&#xff1a; go get github.com/tealeg/xlsx创建文件 指定好文件的名字 fileName : "D:\\a.xlsx"再判断文件是否存在&…
阅读更多...
Java集合概述

Java集合概述

分类 分为两大类&#xff1a;Collection接口类和Map接口类 这两个接口都继承自一个共同的接口&#xff1a;Iterable接口&#xff0c;意为可迭代的 Iterable接口当中有一个Iterator迭代器接口对象&#xff0c;作为接口的变量&#xff08;public static final修饰&#xff09;…
阅读更多...
Win10字体模糊？记好这5个方法，解决问题很简单！

Win10字体模糊？记好这5个方法，解决问题很简单！

“我的电脑是win10的&#xff0c;不知道是什么原因&#xff0c;电脑字体总是很模糊&#xff0c;大家有什么方法可以解决这个问题吗&#xff1f;” 在数字时代的浪潮中&#xff0c;Win10以其出色的性能和丰富的功能赢得了广大用户的青睐。然而&#xff0c;就像任何一款操作系统一…
阅读更多...
广东电网突破2亿千瓦，华火新能源电燃灶引领绿色烹饪“灶”未来

广东电网突破2亿千瓦，华火新能源电燃灶引领绿色烹饪“灶”未来

近日&#xff0c;广东电网统调装机容量历史性突破2亿千瓦&#xff0c;标志着广东省在电力发展上迈出了坚实的步伐。这一重大成就不仅彰显了广东在能源领域的强劲实力&#xff0c;也为华火新能源电燃灶等绿色技术的普及应用提供了有力的支撑。 广东电网统调装机容量的突破&#…
阅读更多...
最新文章

Copyright @ 2022~2023