logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

IOS App常用界面结构解析，让开发更简单

 BOBD1997 2019-03-23

https://blog.csdn.net/shenjie12345678/article/details/51254849

移动APP现在发展的如火如荼，各大应用商店都涌现了一大批优秀的app产品，但是作为一名app的消费者，以及app开发工程师，我觉得今天有必要在这里和大家一起来探讨一下如何实现一个简单的app开发过程，或者说一个app的结构该大致怎么实现。

在市面上，我们所使用的大部分工具应用类型的app都是有一定的界面结构的（类似淘宝，QQ, 微信）,其中最主要的界面结构归纳起来就是使用 “导航栏(navigationBar) + 主视图(mainView)+工具栏（tabBar）”来实现，如图所示：

           

今天，就来讲一下，如何实现一个简单的应用型app最主要的界面UI框架。在这里我把这个框架拆分为几个部分，这样既有利于大家的理解也体现低耦合的特性(因为本身这几个自定义控件都是独立的，交互都通过接口来实现)。

如上图所示，这个界面包含了NavigationBar ,  UIViewController,  以及tabBarController;导航栏navigationbar顾名思义，当然是为了满足用户跳转与返回的操作；UIViewController的作用即是用于呈现给用户所需要看的内容；tabBarController的作用是用于管理多个控制器，轻松的完成视图之间的切换。

我们来简单的了解一下它的view层级图：

第一层是我自定义的一个导航栏CustomNavigationController继承自UINavigationController;我们通常把它作为整个程序的rootViewController,在AppDelegate中的applicationDidFinishLaunching函数中设置为根视图。

第二层视图CustomTabBarController（继承自UIViewController）是在CustomNavigationController初始化时，通过初始化API函数initWithRootViewController附加在导航栏上的，其作用是添加tabBar控件以及其他的UiviewController用于显示。

第三层视图CustomTabBar,继承自UIView; 是我们自定义的UITabBar控件，上面显示的每一个tabItem都对应着一个viewController;tabItem是自定义的按钮继承自UIButton,在下面的讲解中，我会主要介绍这些控件该如何实现。

创建自定义的CustomTabBarController

1.设置CustomTabBar控件的frame大小以及显示内容页面的frame大小

CustomTabBarController中声明了两个变量，一个是CustomTabBar对象(自定义的UITabBar),另一个是UIView对象，在界面进入viewWillAppear的时候初始化这个

两个控件，代码如下：

  1. - (void)setTabBarHidden:(BOOL)hidden animated:(BOOL)animated{
  2.     _tabBarHidden = hidden;
  4.     __weak CustomTabBarController *weakSelf = self;
  6.     void (^block)() = ^{
  7.         CGSize viewSize = weakSelf.view.frame.size;
  8.         CGFloat tabBarStartingY = viewSize.height;
  9.         CGFloat contentViewHeight = viewSize.height;
  10.         CGFloat tabBarHeight = CGRectGetHeight([[weakSelf tabBar] frame]);
  12.         if (!tabBarHeight) {
  13.             tabBarHeight = 55;
  14.         }
  16.         if (![weakSelf parentViewController]) {
  17.             if (UIInterfaceOrientationIsLandscape([weakSelf interfaceOrientation])) {
  18.                 viewSize = CGSizeMake(viewSize.height, viewSize.width);
  19.             }
  20.         }
  22.         if (!hidden) {
  23.             tabBarStartingY = viewSize.height - tabBarHeight;
  24. //            if (![[weakSelf tabBar] isTranslucent]) {
  25.                 contentViewHeight -= ([[weakSelf tabBar] minimumContentHeight] ?: tabBarHeight);
  26. //            }
  27.             [[weakSelf tabBar] setHidden:NO];
  28.         }
  30.         [[weakSelf tabBar] setFrame:CGRectMake(0, tabBarStartingY, viewSize.width, tabBarHeight)];
  31.         [[weakSelf contentView] setFrame:CGRectMake(0, 0, viewSize.width, contentViewHeight)];
  32.     };
  34.     void (^completion)(BOOL) = ^(BOOL finished){
  35.         if (hidden) {
  36.             [[weakSelf tabBar] setHidden:YES];
  37.         }
  38.     };
  40.     if (animated) {
  41.         [UIView animateWithDuration:0.24 animations:block completion:completion];
  42.     } else {
  43.         block();
  44.         completion(YES);
  45.     }
  46. }

2.设置每个tabBarItem对应的UIViewController

在XCode工程中我新建了四个UIViewController对象，分别是FirstViewController, SecondViewController, ThirdViewController, 以及FourthViewController。这四个视图对象想分别与四个tabBarItem对应，我们调用函数setShowViewController来实现，代码如下：

  1. - (void)setShowViewControllers:(NSMutableArray *)mviewControllers{
  2.     self.viewControllers = mviewControllers;
  3.     if (mviewControllers && [mviewControllers isKindOfClass:[NSArray class]]) {
  4.         self.viewControllers = mviewControllers;
  6.         NSMutableArray *tabBarItems = [[NSMutableArray alloc] init];
  8.         for (UIViewController *viewController in mviewControllers) {
  9.             CustomTabBarItem *tabBarItem = [[CustomTabBarItem alloc] init];
  11.             [tabBarItem setTitle:viewController.title forState:UIControlStateNormal];
  12.             [tabBarItems addObject:tabBarItem];
  13.         }
  15.         [self.tabBar setTabBarItems:tabBarItems];
  16.     } else {
  17. //        for (UIViewController *viewController in _viewControllers) {
  18. //            [viewController Custom_setTabBarController:nil];
  19. //        }
  20.         self.viewControllers = nil;
  21.     }
  22. }


3.设置当前要显示的页面

承接上面的功能，既然我们的tabBarItem每一个都对应一个UIViewController，那如何实现让每一次的点击按钮过后，我们的界面就能跳转显示为正确的呢，设置的代码如下：

  1. //设置当前显示的页面
  2. - (void)setContentViewIndex:(NSInteger)index{
  3.     self.selectedIndex = index;
  5.     if(index >= self.viewControllers.count){
  6.         return;
  7.     }
  9.     if([self selectedViewController]){
  10.         [[self selectedViewController] willMoveToParentViewController:nil];
  11.         [[[self selectedViewController] view] removeFromSuperview];
  12.         [[self selectedViewController] removeFromParentViewController];
  13.     }
  15.     [[self tabBar] setSelectedItem:[[self tabBar] items][self.selectedIndex]];
  17.     [self setSelectedViewController:[[self viewControllers] objectAtIndex:self.selectedIndex]];
  18.     [self addChildViewController:[self selectedViewController]];
  19.     [[[self selectedViewController] view] setFrame:[[self contentView] bounds]];
  20.     [[self contentView] addSubview:[[self selectedViewController] view]];
  21.     [[self selectedViewController] didMoveToParentViewController:self];
  22. }

创建自定义的CustomTabBar

TabBar在app中可谓是个非常重要的常客，为什么说他重要呢，因为它相当于是打开一个app里面所有功能的钥匙；tabBar中的每一个tabBarItem都对应

一个viewController, 通过触发按钮事件我们可以切换不同的页面。

1.设置tabBarItems

tabBar可不能没有tabBarItem, 通过头文件中提供的接口setTabBarItems，可以将app所需要的tabBarItem对象设置好，代码如下：

  1. - (void)setTabBarItems:(NSArray *)m_array{
  3.     for (CustomTabBarItem *item in m_array) {
  4.         [item removeFromSuperview];
  5.     }
  7.     self.items = m_array;
  8.     for (CustomTabBarItem *item in m_array) {
  9.         NSLog(@"%@", item);
  11.         [item addTarget:self action:@selector(tabBarItemWasSelected:) forControlEvents:UIControlEventTouchDown];
  12.         [self addSubview:item];
  13.     }
  14. }

2．设置界面切换代理 

我们将显示当前所需界面的函数写在了CustomTabBarController这个类中，而我们的点击事件则是在CustomTabBar中，那如何才能调用到设置当前页面的函数呢！

我们这边就采用了代理delegate的模式，代码如下：

  1. @protocol CustomTabBarDelegate <NSObject>
  3. - (BOOL)tabBar:(CustomTabBar *)tabBar shouldSelectItemAtIndex:(NSInteger)index;
  4. - (void)tabBar:(CustomTabBar *)tabBar didSelectItemAtIndex:(NSInteger)index;
  6. @end

3.设置tabBarItem点击事件

因为我们的tabBarItem是继承自UIButton，所以这边用addtarget的方式为每一个item都添加了事件响应机制。代码如下：

  1. - (void)tabBarItemWasSelected:(id)sender {
  2.     if ([[self delegate] respondsToSelector:@selector(tabBar:shouldSelectItemAtIndex:)]) {
  3.         NSInteger index = [self.items indexOfObject:sender];
  4.         if (![[self delegate] tabBar:self shouldSelectItemAtIndex:index]) {
  5.             return;
  6.         }
  7.     }
  9.     [self setSelectedItem:sender];
  11.     if ([[self delegate] respondsToSelector:@selector(tabBar:didSelectItemAtIndex:)]) {
  12.         NSInteger index = [self.items indexOfObject:self.selectedItem];
  13.         [[self delegate] tabBar:self didSelectItemAtIndex:index];
  14.     }
  15. }

创建自定义CustomTabBarItem

关于自定义的按钮，我在之前的博客中有写过一篇如何绘制一个精美的自定义的按钮大家感兴趣的话可以去看下；我先把这次功能的代码贴出来，可以先看一下：

  1. #import <UIKit/UIKit.h>
  3. @interface CustomTabBarItem : UIButton
  4. @property CGFloat itemHeight;
  6. #pragma mark - Title configuration
  9. @property (nonatomic, copy) NSString *title;
  10. @property (nonatomic) UIOffset titlePositionAdjustment;
  11. @property (copy) NSDictionary *unselectedTitleAttributes;
  12. @property (copy) NSDictionary *selectedTitleAttributes;
  14. #pragma mark - Image configuration
  17. @property (nonatomic) UIOffset imagePositionAdjustment;
  19. - (UIImage *)finishedSelectedImage;
  20. - (UIImage *)finishedUnselectedImage;
  21. - (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage;
  23. #pragma mark - Background configuration
  25. - (UIImage *)backgroundSelectedImage;
  27. - (UIImage *)backgroundUnselectedImage;
  29. - (void)setBackgroundSelectedImage:(UIImage *)selectedImage withUnselectedImage:(UIImage *)unselectedImage;
  31. #pragma mark - Badge configuration
  33. @property (nonatomic, copy) NSString *badgeValue;
  34. @property (strong) UIImage *badgeBackgroundImage;
  35. @property (strong) UIColor *badgeBackgroundColor;
  36. @property (strong) UIColor *badgeTextColor;
  37. @property (nonatomic) UIOffset badgePositionAdjustment;
  38. @property (nonatomic) UIFont *badgeTextFont;
  39. @end

  1. #import "CustomTabBarItem.h"
  2. @interface CustomTabBarItem () {
  3.     NSString *_title;
  4.     UIOffset _imagePositionAdjustment;
  5.     NSDictionary *_unselectedTitleAttributes;
  6.     NSDictionary *_selectedTitleAttributes;
  7. }
  9. @property UIImage *unselectedBackgroundImage;
  10. @property UIImage *selectedBackgroundImage;
  11. @property UIImage *unselectedImage;
  12. @property UIImage *selectedImage;
  14. @end
  16. @implementation CustomTabBarItem
  17. - (id)initWithFrame:(CGRect)frame {
  18.     self = [super initWithFrame:frame];
  19.     if (self) {
  20.         [self commonInitialization];
  21.     }
  22.     return self;
  23. }
  25. - (id)init {
  26.     return [self initWithFrame:CGRectZero];
  27. }
  29. - (void)commonInitialization {
  30.     // Setup defaults
  32.     [self setBackgroundColor:[UIColor clearColor]];
  34.     _title = @"";
  35.     _titlePositionAdjustment = UIOffsetZero;
  37.     if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_6_1) {
  38.         _unselectedTitleAttributes = @{
  39.                                        NSFontAttributeName: [UIFont systemFontOfSize:10],
  40.                                        NSForegroundColorAttributeName:[UIColor colorWithRed:255/255.f green:255/255.f blue:255/255.f alpha:1.0f],
  41.                                        };
  42.     } else {
  43. #if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_7_0
  44.         _unselectedTitleAttributes = @{
  45.                                        UITextAttributeFont: [UIFont systemFontOfSize:10],
  46.                                        UITextAttributeTextColor: [UIColor colorWithRed:255/255.f green:255/255.f blue:255/255.f alpha:1.0f],
  47.                                        };
  48. #endif
  49.     }
  51.     _selectedTitleAttributes = [_unselectedTitleAttributes copy];
  52.     _badgeBackgroundColor = [UIColor redColor];
  53.     _badgeTextColor = [UIColor whiteColor];
  54.     _badgeTextFont = [UIFont systemFontOfSize:12];
  55.     _badgePositionAdjustment = UIOffsetZero;
  56. }
  58. - (void)drawRect:(CGRect)rect {
  59.     CGSize frameSize = self.frame.size;
  60.     CGSize imageSize = CGSizeZero;
  61.     CGSize titleSize = CGSizeZero;
  62.     NSDictionary *titleAttributes = nil;
  63.     UIImage *backgroundImage = nil;
  64.     UIImage *image = nil;
  65.     CGFloat imageStartingY = 0.0f;
  67.     if ([self isSelected]) {
  68.         image = [self selectedImage];
  69.         backgroundImage = [self selectedBackgroundImage];
  70.         titleAttributes = [self selectedTitleAttributes];
  72.         if (!titleAttributes) {
  73.             titleAttributes = [self unselectedTitleAttributes];
  74.         }
  75.     } else {
  76.         image = [self unselectedImage];
  77.         backgroundImage = [self unselectedBackgroundImage];
  78.         titleAttributes = [self unselectedTitleAttributes];
  79.     }
  81.     imageSize = [image size];
  83.     CGContextRef context = UIGraphicsGetCurrentContext();
  84.     CGContextSaveGState(context);
  86.     [backgroundImage drawInRect:self.bounds];
  88.     // Draw image and title
  90.     if (![_title length]) {
  91.         [image drawInRect:CGRectMake(roundf(frameSize.width / 2 - imageSize.width / 2) +
  92.                                      _imagePositionAdjustment.horizontal,
  93.                                      roundf(frameSize.height / 2 - imageSize.height / 2) +
  94.                                      _imagePositionAdjustment.vertical,
  95.                                      imageSize.width, imageSize.height)];
  96.     } else {
  97.         if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_6_1) {
  98.             titleSize = [_title boundingRectWithSize:CGSizeMake(frameSize.width, 20)
  99.                                              options:NSStringDrawingUsesLineFragmentOrigin
  100.                                           attributes:@{NSFontAttributeName: titleAttributes[NSFontAttributeName]}
  101.                                              context:nil].size;
  103.             imageStartingY = roundf((frameSize.height - imageSize.height - titleSize.height) / 2);
  105.             [image drawInRect:CGRectMake(roundf(frameSize.width / 2 - imageSize.width / 2) +
  106.                                          _imagePositionAdjustment.horizontal,
  107.                                          imageStartingY + _imagePositionAdjustment.vertical,
  108.                                          imageSize.width, imageSize.height)];
  110.             CGContextSetFillColorWithColor(context, [titleAttributes[NSForegroundColorAttributeName] CGColor]);
  112.             [_title drawInRect:CGRectMake(roundf(frameSize.width / 2 - titleSize.width / 2) +
  113.                                           _titlePositionAdjustment.horizontal,
  114.                                           imageStartingY + imageSize.height + _titlePositionAdjustment.vertical,
  115.                                           titleSize.width, titleSize.height)
  116.                 withAttributes:titleAttributes];
  117.         } else {
  118. #if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_7_0
  119.             titleSize = [_title sizeWithFont:titleAttributes[UITextAttributeFont]
  120.                            constrainedToSize:CGSizeMake(frameSize.width, 20)];
  121.             UIOffset titleShadowOffset = [titleAttributes[UITextAttributeTextShadowOffset] UIOffsetValue];
  122.             imageStartingY = roundf((frameSize.height - imageSize.height - titleSize.height) / 2);
  124.             [image drawInRect:CGRectMake(roundf(frameSize.width / 2 - imageSize.width / 2) +
  125.                                          _imagePositionAdjustment.horizontal,
  126.                                          imageStartingY + _imagePositionAdjustment.vertical,
  127.                                          imageSize.width, imageSize.height)];
  129.             CGContextSetFillColorWithColor(context, [titleAttributes[UITextAttributeTextColor] CGColor]);
  131.             UIColor *shadowColor = titleAttributes[UITextAttributeTextShadowColor];
  133.             if (shadowColor) {
  134.                 CGContextSetShadowWithColor(context, CGSizeMake(titleShadowOffset.horizontal, titleShadowOffset.vertical),
  135.                                             1.0, [shadowColor CGColor]);
  136.             }
  138.             [_title drawInRect:CGRectMake(roundf(frameSize.width / 2 - titleSize.width / 2) +
  139.                                           _titlePositionAdjustment.horizontal,
  140.                                           imageStartingY + imageSize.height + _titlePositionAdjustment.vertical,
  141.                                           titleSize.width, titleSize.height)
  142.                       withFont:titleAttributes[UITextAttributeFont]
  143.                  lineBreakMode:NSLineBreakByTruncatingTail];
  144. #endif
  145.         }
  146.     }
  148.     // Draw badges
  150.     if ([[self badgeValue] length]) {
  151.         CGSize badgeSize = CGSizeZero;
  153.         if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_6_1) {
  154.             badgeSize = [_badgeValue boundingRectWithSize:CGSizeMake(frameSize.width, 20)
  155.                                                   options:NSStringDrawingUsesLineFragmentOrigin
  156.                                                attributes:@{NSFontAttributeName: [self badgeTextFont]}
  157.                                                   context:nil].size;
  158.         } else {
  159. #if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_7_0
  160.             badgeSize = [_badgeValue sizeWithFont:[self badgeTextFont]
  161.                                 constrainedToSize:CGSizeMake(frameSize.width, 20)];
  162. #endif
  163.         }
  165.         CGFloat textOffset = 2.0f;
  167.         if (badgeSize.width < badgeSize.height) {
  168.             badgeSize = CGSizeMake(badgeSize.height, badgeSize.height);
  169.         }
  171.         CGRect badgeBackgroundFrame = CGRectMake(roundf(frameSize.width / 2 + (image.size.width / 2) * 0.9) +
  172.                                                  [self badgePositionAdjustment].horizontal,
  173.                                                  textOffset + [self badgePositionAdjustment].vertical,
  174.                                                  badgeSize.width + 2 * textOffset, badgeSize.height + 2 * textOffset);
  176.         if ([self badgeBackgroundColor]) {
  177.             CGContextSetFillColorWithColor(context, [[self badgeBackgroundColor] CGColor]);
  179.             CGContextFillEllipseInRect(context, badgeBackgroundFrame);
  180.         } else if ([self badgeBackgroundImage]) {
  181.             [[self badgeBackgroundImage] drawInRect:badgeBackgroundFrame];
  182.         }
  184.         CGContextSetFillColorWithColor(context, [[self badgeTextColor] CGColor]);
  186.         if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_6_1) {
  187.             NSMutableParagraphStyle *badgeTextStyle = [[NSMutableParagraphStyle defaultParagraphStyle] mutableCopy];
  188.             [badgeTextStyle setLineBreakMode:NSLineBreakByWordWrapping];
  189.             [badgeTextStyle setAlignment:NSTextAlignmentCenter];
  191.             NSDictionary *badgeTextAttributes = @{
  192.                                                   NSFontAttributeName: [self badgeTextFont],
  193.                                                   NSForegroundColorAttributeName: [self badgeTextColor],
  194.                                                   NSParagraphStyleAttributeName: badgeTextStyle,
  195.                                                   };
  197.             [[self badgeValue] drawInRect:CGRectMake(CGRectGetMinX(badgeBackgroundFrame) + textOffset,
  198.                                                      CGRectGetMinY(badgeBackgroundFrame) + textOffset,
  199.                                                      badgeSize.width, badgeSize.height)
  200.                            withAttributes:badgeTextAttributes];
  201.         } else {
  202. #if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_7_0
  203.             [[self badgeValue] drawInRect:CGRectMake(CGRectGetMinX(badgeBackgroundFrame) + textOffset,
  204.                                                      CGRectGetMinY(badgeBackgroundFrame) + textOffset,
  205.                                                      badgeSize.width, badgeSize.height)
  206.                                  withFont:[self badgeTextFont]
  207.                             lineBreakMode:NSLineBreakByTruncatingTail
  208.                                 alignment:NSTextAlignmentCenter];
  209. #endif
  210.         }
  211.     }
  213.     CGContextRestoreGState(context);
  214. }
  216. #pragma mark - Image configuration
  218. - (UIImage *)finishedSelectedImage {
  219.     return [self selectedImage];
  220. }
  222. - (UIImage *)finishedUnselectedImage {
  223.     return [self unselectedImage];
  224. }
  226. - (void)setFinishedSelectedImage:(UIImage *)selectedImage withFinishedUnselectedImage:(UIImage *)unselectedImage {
  227.     if (selectedImage && (selectedImage != [self selectedImage])) {
  228.         [self setSelectedImage:selectedImage];
  229.     }
  231.     if (unselectedImage && (unselectedImage != [self unselectedImage])) {
  232.         [self setUnselectedImage:unselectedImage];
  233.     }
  234. }
  236. - (void)setBadgeValue:(NSString *)badgeValue {
  237.     _badgeValue = badgeValue;
  239.     [self setNeedsDisplay];
  240. }
  242. #pragma mark - Background configuration
  244. - (UIImage *)backgroundSelectedImage {
  245.     return [self selectedBackgroundImage];
  246. }
  248. - (UIImage *)backgroundUnselectedImage {
  249.     return [self unselectedBackgroundImage];
  250. }
  252. - (void)setBackgroundSelectedImage:(UIImage *)selectedImage withUnselectedImage:(UIImage *)unselectedImage {
  253.     if (selectedImage && (selectedImage != [self selectedBackgroundImage])) {
  254.         [self setSelectedBackgroundImage:selectedImage];
  255.     }
  257.     if (unselectedImage && (unselectedImage != [self unselectedBackgroundImage])) {
  258.         [self setUnselectedBackgroundImage:unselectedImage];
  259.     }
  260. }
  264. @end

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： BOBD1997 > 《UI》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多