UIKit之App界面Demo

UIKit之App界面Demo

码农世界 2024-06-04 前端 87 次浏览 0个评论

需求

实现简单的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 
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、margin
         contentSize：必须给大小，如果内容很小，必然不能滚动，滚动的本质是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设置icon
            icon的两种状态下图片不同：
         
         默认偏移位置设置：
            使得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属性：

可以理解为滚动到边上，能多加上多少距离。

转载请注明来自码农世界，本文标题：《UIKit之App界面Demo》

百度分享代码，如果开启HTTPS请参考李洋个人博客
37815篇文章 站点 微博
每一天，每一秒，你所做的决定都会改变你的人生！

发表评论

快捷回复：

评论列表 （暂无评论，87人围观）参与讨论

还没有评论，来说两句吧...

Top