Skip to content

可更灵活的配置UI界面 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GlassMask wants to merge 4 commits into
base: master
Choose a base branch
from
Open

可更灵活的配置UI界面 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abe23c2
可以根据自己的需求设置
GlassMask Jan 11, 2019
6167703
可以根据自己是需求设置
GlassMask Jan 11, 2019
1f7735f
可以根据自己的需求设置
GlassMask Jan 11, 2019
db1e13f
Update README.md
GlassMask Jan 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 60 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,50 @@
![1.gif](http://chuantu.biz/t5/30/1471921557x2031068758.gif)
#####HYTabbarView可灵活配置UI界面

static CGFloat const topBarItemMargin = 15; ///标题之间的间距
static CGFloat const topBarHeight = 40; //顶部标签条的高度
@property(nonatomic, assign)CGFloat topBarItemMargin;

/** 顶部标签条的高度*/
@property(nonatomic, assign)CGFloat topBarHeight;


/***********指示条**************/

/** 指示条与标题的距离*/
indicatorWithItemMargin;

/** 指示条颜色*/
indicatorBackgroundColor;

/** 指示条高度*/
indicatorHeight;

/** 指示条的宽度是否随标题的宽度变化，默认值为NO*/
changeWithItemWidth;

/** 指示条宽度，默认值为30，如果宽度需要随标题的宽度变化，则不需要设置*/
indicatorWidth;


/***************标题*****************/

/** 第一个标题X坐标*/
firstItemX;

/** 标题高度*/
itemHeight;

/** 标题颜色*/
itemNormalColor;

/** 标题选中颜色*/
itemSelectedColor;

/** 标题字体大小*/
itemNormalFont;

/** 标题选中字体大小*/
itemSelectedFont;


####实现思路详解
- 界面分析:分为上下部分,顶部UIScrollView,底部UICollectionView.再实现两部分的联动即可实现 (底部视图相对复杂,占用内存大,底部用UICollectionView实现会比用UIScrollView性能好很多)
Expand Down Expand Up @@ -76,7 +118,22 @@
if (!_tabbarView) {
_tabbarView = ({

HYTabbarView * tabbar = [[HYTabbarView alloc]initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 64)];
HYTabbarView *tabbarView = [[HYTabbarView alloc]initWithFrame:CGRectMake(0, 120, HYScreenW, HYScreenH - 120 - 44 - 20)];
tabbarView.controllerWithTopBarMargin = 7;
tabbarView.topBar.topBarHeight = 30;
tabbarView.topBar.topBarItemMargin = 22.5;
tabbarView.topBar.indicatorWithItemMargin = 6;
tabbarView.topBar.indicatorBackgroundColor = [UIColor orangeColor];
tabbarView.topBar.indicatorHeight = 3;
// tabbarView.topBar.indicatorWidth = 50;
// tabbarView.topBar.changeWithItemWidth = YES;
tabbarView.topBar.firstItemX = 15;
tabbarView.topBar.itemNormalColor = [UIColor blackColor];
tabbarView.topBar.itemSelectedColor = [UIColor greenColor];
tabbarView.topBar.itemNormalFont = [UIFont systemFontOfSize:15];
tabbarView.topBar.itemSelectedFont = [UIFont systemFontOfSize:18];

[self.view addSubview:tabbarView];

//传入九个控制器,每个控制器分别管理对应的视图
UIViewController * vc0 = [[UIViewController alloc]init];
Expand Down
8 changes: 8 additions & 0 deletions 标签栏视图.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
Binary file added ....xcodeproj/project.xcworkspace/xcuserdata/rhkj.xcuserdatad/UserInterfaceState.xcuserstate
View file
Open in desktop
Binary file not shown.
14 changes: 14 additions & 0 deletions 标签栏视图.xcodeproj/xcuserdata/rhkj.xcuserdatad/xcschemes/xcschememanagement.plist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>SchemeUserState</key>
<dict>
<key>标签栏视图.xcscheme_^#shared#^_</key>
<dict>
<key>orderHint</key>
<integer>0</integer>
</dict>
</dict>
</dict>
</plist>
6 changes: 5 additions & 1 deletion 标签栏视图/HYTabbarView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@
//

#import <UIKit/UIKit.h>

#import "HYTopBar.h"
@interface HYTabbarView : UIView
/** 标题栏*/
@property(nonatomic, strong)HYTopBar *topBar;

/** 页面与topBar的距离*/
@property(nonatomic, assign)CGFloat controllerWithTopBarMargin;
/**
* 添加一个子控制器
*/
Expand Down
39 changes: 26 additions & 13 deletions 标签栏视图/HYTabbarView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@

#import "HYTabbarView.h"
#import "HYTabbarCollectionCell.h"
#import "HYTopBar.h"

static CGFloat const topBarHeight = 40; //顶部标签条的高度
//#define topBarHeight FitWidth(30)//顶部标签条的高度
@interface HYTabbarView () <UICollectionViewDataSource,UICollectionViewDelegate,HYTopBarDelegate>

@property (nonatomic,strong) NSMutableArray *subViewControllers;
@property (nonatomic,strong) HYTopBar *tabbar;
@property (nonatomic,strong) UICollectionView *contentView;
@property (nonatomic,assign) CGFloat tabbarWidth; //顶部标签条的宽度

@property(nonatomic, strong)UICollectionViewFlowLayout *layout;

@end

@implementation HYTabbarView
Expand All @@ -36,10 +36,10 @@ - (instancetype)initWithFrame:(CGRect)frame
//添加子控件
- (void)setUpSubview{

self.tabbar = [[HYTopBar alloc] initWithFrame:CGRectMake(0, 0, HYScreenW, topBarHeight)];
[self addSubview:self.tabbar];
self.tabbar.backgroundColor = [UIColor orangeColor];
self.tabbar.topBarDelegate = self;
self.topBar = [[HYTopBar alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
[self addSubview:self.topBar];
self.topBar.backgroundColor = [UIColor whiteColor];
self.topBar.topBarDelegate = self;

[self addSubview:self.contentView];
}
Expand All @@ -54,7 +54,7 @@ - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSe
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

HYTabbarCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"HYTabbarCollectionCell" forIndexPath:indexPath];

cell.subVc = self.subViewControllers[indexPath.row] ;
return cell;
}
Expand All @@ -63,7 +63,7 @@ - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cell
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(nonnull UICollectionViewCell *)cell forItemAtIndexPath:(nonnull NSIndexPath *)indexPath {

NSInteger index = (collectionView.contentOffset.x + collectionView.bounds.size.width * 0.5) / collectionView.bounds.size.width;
[self.tabbar setSelectedItem:index];
[self.topBar setSelectedItem:index];
}


Expand All @@ -73,12 +73,18 @@ - (void)HYTopBarChangeSelectedItem:(HYTopBar *)topbar selectedIndex:(NSInteger)i
self.contentView.contentOffset = CGPointMake(HYScreenW * index, 0);
}

-(void)HYTopBarChangeContentViewHeight{
self.layout.itemSize = (CGSize){self.bounds.size.width,(self.frame.size.height - self.topBar.topBarHeight - self.controllerWithTopBarMargin)};
_contentView.frame = CGRectMake(0, self.topBar.topBarHeight + self.controllerWithTopBarMargin, HYScreenW, self.layout.itemSize.height);
}
#pragma mark - ************************* 对外接口 *************************


//外界传个控制器,添加一个栏目
- (void)addSubItemWithViewController:(UIViewController *)viewController{

[self.tabbar addTitleBtn:viewController.title];
[self.tabbar setSelectedItem:0];
[self.topBar addTitleBtn:viewController.title];
[self.topBar setSelectedItem:0];
[self.subViewControllers addObject:viewController];
[self.contentView reloadData];
}
Expand All @@ -91,6 +97,12 @@ - (void)selectNewItem{
}

#pragma mark - ************************* 懒加载 *************************
-(void)setControllerWithTopBarMargin:(CGFloat)controllerWithTopBarMargin{
_controllerWithTopBarMargin = controllerWithTopBarMargin;
self.layout.itemSize = (CGSize){self.bounds.size.width,(self.frame.size.height - self.topBar.topBarHeight - self.controllerWithTopBarMargin)};
_contentView.frame = CGRectMake(0, self.topBar.topBarHeight + self.controllerWithTopBarMargin, HYScreenW, self.layout.itemSize.height);

}
- (NSMutableArray *)subViewControllers{

if (!_subViewControllers) {
Expand All @@ -103,12 +115,13 @@ - (UICollectionView *)contentView {

if (!_contentView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
self.layout = layout;
//设置layout 属性
layout.itemSize = (CGSize){self.bounds.size.width,(self.bounds.size.height - topBarHeight)};
layout.itemSize = (CGSize){self.bounds.size.width,(self.frame.size.height - self.topBar.topBarHeight - self.controllerWithTopBarMargin)};
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumLineSpacing = 0;

_contentView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, topBarHeight, HYScreenW, HYScreenH - topBarHeight - 64) collectionViewLayout:layout];
_contentView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, self.topBar.topBarHeight + self.controllerWithTopBarMargin, HYScreenW, layout.itemSize.height) collectionViewLayout:layout];

_contentView.showsHorizontalScrollIndicator = NO;
_contentView.pagingEnabled = YES;
Expand Down
46 changes: 46 additions & 0 deletions 标签栏视图/HYTopBar.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,58 @@
@class HYTopBar;
@protocol HYTopBarDelegate <NSObject>
- (void)HYTopBarChangeSelectedItem:(HYTopBar *)topbar selectedIndex:(NSInteger)index;
- (void)HYTopBarChangeContentViewHeight;
@end

@interface HYTopBar : UIScrollView

@property (nonatomic,weak) id<HYTopBarDelegate> topBarDelegate;

/** 标题之间的间距*/
@property(nonatomic, assign)CGFloat topBarItemMargin;

/** 顶部标签条的高度*/
@property(nonatomic, assign)CGFloat topBarHeight;


/***********指示条**************/

/** 指示条与标题的距离*/
@property(nonatomic, assign)CGFloat indicatorWithItemMargin;

/** 指示条颜色*/
@property(nonatomic, strong)UIColor *indicatorBackgroundColor;

/** 指示条高度*/
@property(nonatomic, assign)CGFloat indicatorHeight;

/** 指示条的宽度是否随标题的宽度变化，默认值为NO*/
@property(nonatomic, assign)BOOL changeWithItemWidth;

/** 指示条宽度，默认值为30，如果宽度需要随标题的宽度变化，则不需要设置*/
@property(nonatomic, assign)CGFloat indicatorWidth;


/***************标题*****************/

/** 第一个标题X坐标*/
@property(nonatomic, assign)CGFloat firstItemX;

/** 标题高度*/
@property(nonatomic, assign)CGFloat itemHeight;

/** 标题颜色*/
@property(nonatomic, strong)UIColor *itemNormalColor;

/** 标题选中颜色*/
@property(nonatomic, strong)UIColor *itemSelectedColor;

/** 标题字体大小*/
@property(nonatomic, strong)UIFont *itemNormalFont;

/** 标题选中字体大小*/
@property(nonatomic, strong)UIFont *itemSelectedFont;

- (void)addTitleBtn:(NSString *)title;
- (void)setSelectedItem:(NSInteger)index;

Expand Down
Loading