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…
阅读更多...
智享直播（三代）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行组的…
阅读更多...
初级网络工程师之入门到入狱（一）

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

本文是我在学习过程中记录学习的点点滴滴&#xff0c;目的是为了学完之后巩固一下顺便也和大家分享一下&#xff0c;日后忘记了也可以方便快速的复习。 网络工程师从入门到入狱 前言一、交换机二、路由器三、DHCP&#xff08;动态主机配置协议&#xff09;四、路由器配置 DHCP自…
阅读更多...
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
阅读更多...
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;也为华火新能源电燃灶等绿色技术的普及应用提供了有力的支撑。 广东电网统调装机容量的突破&#…
阅读更多...
【 0 基础 Docker 极速入门】镜像、容器、常用命令总结

【 0 基础 Docker 极速入门】镜像、容器、常用命令总结

Docker Images&#xff08;镜像&#xff09;生命周期 Docker 是一个用于创建、部署和运行应用容器的平台。为了更好地理解 Docker 的生命周期&#xff0c;以下是相关概念的介绍&#xff0c;并说明它们如何相互关联&#xff1a; Docker&#xff1a; Docker 是一个开源平台&#…
阅读更多...
重生奇迹mu五大王国

重生奇迹mu五大王国

勇者大陆王国 奇迹大陆的战士&#xff0c;他们因为非常重视剑&#xff0c;而且穿着黑色的衣服&#xff0c;所以叫他们魔剑士。古代勇者大陆王国的魔剑士们都是用铠甲伪装自己的。但是这些个联合国统一成一个帝国之后&#xff0c;勇者大陆王国渐渐成为一个小城市。千年之后的现…
阅读更多...
数据持久化第七课-URL重写与Ajax

数据持久化第七课-URL重写与Ajax

数据持久化第七课-URL重写与Ajax 一.预习笔记 1.URL重写(对网页地址进行保护) 首先编写module,实现对网络地址的处理 其次就是module的配置 最后验证url重写技术 2.Ajax数据交互 编写后端响应数据 处理跨域的配置问题 运行项目得到后端响应数据的地址 编写前端ajax进行数据请…
阅读更多...
AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)

AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)

在AI时代&#xff0c;可能人人都可成为产品经理。 之前我们聊过如何使用kimi协助完成产品需求文档&#xff0c;如何写竞品分析报告&#xff0c;这一篇我们聊聊用户故事&#xff0c;如何使用kimi协助撰写产品需求文档中的用户故事。 在此之前我们先了解下什么是用户故事&#…
阅读更多...
车牌号码智能监测识别摄像机

车牌号码智能监测识别摄像机

车牌号码智能监测识别摄像机是一项革命性的技术&#xff0c;为交通管理和安全提供了全新的解决方案。这种摄像机利用先进的人工智能和图像识别技术&#xff0c;能够实时监测道路上的车辆&#xff0c;并准确识别车辆的车牌号码&#xff0c;为交通管理和安全提供了强有力的支持。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023