简易自定义seg与tableview联动布局

ゞ浴缸里的玫瑰 2022-08-19 05:57 120阅读 0赞

**![Center][]**

**//第一步：首先我们需要一个自定义的UISegmentControl,通过一个view上添加一排自定义的UILabel来实**

**现**

**a.自定义的label，具有缩放功能，点击效果是变色并且字体颜色改变**

@interface hglable :  UILabel

@property (nonatomic,assign)CGFloat scale;

\- (instancetype)initWithFrame:(CGRect)frame

self = \[superinitWithFrame:frame\];

if (self) \{

self.textAlignment =NSTextAlignmentCenter;

self.font = \[UIFontsystemFontOfSize:18\];

self.scale =0.0;

self.layer.cornerRadius =8;

return self;

\- (void)setScale:(CGFloat)scale\{

\_scale = scale;

self.textColor = \[UIColorcolorWithRed:scalegreen:0.0blue:0.0alpha:1\];

CGFloat minScale =  0.9;

CGFloat trueScale = minScale + (1\-minScale)\*scale;

self.transform =CGAffineTransformMakeScale(trueScale, trueScale);

**//b.用for循环创建label,并且添加手势**

for (int i =0 ; i <5; i ++) \{

CGFloat labW =  100;

CGFloat labH =  40;

CGFloat labY =  0;

CGFloat labX = i \* labW;

Hglable \*lab1 = \[\[Hglablealloc\]init\];

lab1.text =  self.titleArr\[i\];

lab1.frame =  CGRectMake(labX, labY, labW, labH);

lab1.font = \[UIFontfontWithName:@"HYQHei"size:19\];

\[self.smallScolleraddSubview:lab1\];

//这里就是将创建好的label添加到小scrollerview上

lab1.tag = i+1000;

lab1.userInteractionEnabled =YES;

\[lab1 addGestureRecognizer:\[\[UITapGestureRecognizeralloc\]initWithTarget:selfaction:@selector(labClick:)\]\];

**c.手势的点击方法就是控制tableview的**ContentOffset

**e来实现点击label对tableview的控制**

\- (void)labClick:(UITapGestureRecognizer \*)recogenizer\{

Hglable \*titleLab = (Hglable \*)recogenizer.view;

CGFloat offsetX = (titleLab.tag\-1000) \*sc.frame.size.width;

CGFloat offsetY =sc.contentOffset.y;

CGPoint offset =  CGPointMake(offsetX, offsetY);

\[scsetContentOffset:offsetanimated:YES\];

**//第二步：我们需要写一个大scrollerview，他的****contentSize**

**足以容纳我们需要添加的几个tableview**

** a.创建ScrollerView,添加一张默认的tableview**

sc = \[\[UIScrollViewalloc\]initWithFrame:CGRectMake(kWidth,50, \[UIScreenmainScreen\].bounds.size.width, \[UIScreenmainScreen\].bounds.size.height)\];

sc.backgroundColor = \[UIColoryellowColor\];

sc.delegate =self;

sc.contentSize =CGSizeMake(self.view.frame.size.width\*5,0);

//创建几张tableview用来放到大scrollerview上

one = \[\[FirstTableViewControlleralloc\]init\];

one.view.backgroundColor = \[UIColorredColor\];

two = \[\[FirstTableViewControlleralloc\]init\];

two.view.backgroundColor = \[UIColorgreenColor\];

three = \[\[FirstTableViewControlleralloc\]init\];

three.view.backgroundColor = \[UIColorblueColor\];

four = \[\[FirstTableViewControlleralloc\]init\];

four.view.backgroundColor = \[UIColorcyanColor\];

\[scaddSubview:one.tableView\];

**b.实现拖动tableView来自动跳转对应的自定义label上**

**1）这个函数实现了scrollerview触发停止减速的代理方法的时候会自定调用另一个代理方法，实现简化代码作用**

\- (void)scrollViewDidEndDecelerating:(UIScrollView \*)scrollView

\[selfscrollViewDidEndScrollingAnimation:scrollView\];

**2）滑动tableview的时候，对应的label跟着位置相应变动，并且添加上一张新的tableview**

\- (void)scrollViewDidEndScrollingAnimation:(UIScrollView \*)scrollView

NSUInteger index = scrollView.contentOffset.x/sc.frame.size.width;

switch (index) \{

case 0:

one.tableView.frame = scrollView.bounds;

\[sc  addSubview:one.tableView\];

break;

case 1:

two.tableView.frame = scrollView.bounds;

two.arr =@\[@"two"\];

\[sc addSubview:two.tableView\];

break;

case 2:

three.tableView.frame = scrollView.bounds;

three.arr =@\[@"three"\];

\[sc addSubview:three.tableView\];

break;

case 3:

four.tableView.frame = scrollView.bounds;

four.arr =@\[@"four"\];

\[sc addSubview:four.tableView\];

break;

case 4:

five.tableView.frame =scrollView.bounds;

five.arr =@\[@"five"\];

\[sc addSubview:five.tableView\];

break;

default:

break;

**//下面代码实现滑动tableview的时候，对应的label跟着位置相应变动，并且有放大效果，而且出现黑色边框效果**

\[self.smallScollersetContentOffset:CGPointMake(index\*25,0)animated:YES\]  ;

for (int i=0; i<5; i++) \{

Hglable \*titlelab = (Hglable \*)\[self.smallScollerviewWithTag:i+1000\];

titlelab.scale =  0;

titlelab.layer.borderWidth =5;

titlelab.layer.borderColor = \[\[UIColorclearColor\]CGColor\];

if (i == index) \{

titlelab.scale =  1.0;

titlelab.layer.borderColor = \[\[UIColorblackColor\]CGColor\];

**//第三步：我们在label下写一个绿色细长UIView，实现点击自定义label的时候自动平移到对应的label下面**

**a.创建细长条UIView**

UIView \*line = \[\[UIViewalloc\]initWithFrame:CGRectMake(0,45,100, 5)\];

line.tag = 100;

\[self.smallScolleraddSubview:line\];

line.backgroundColor = \[UIColorgreenColor\];

**b.用小scrollerview的代理方法实现细长条的平移动画**

\- (void)scrollViewDidScroll:(UIScrollView \*)scrollView \{

if (scrollView.tag !=300 ) \{

float index = (float)scrollView.contentOffset.x/(float)sc.frame.size.width;

UIView \*lab = (UIView \*)\[self.viewviewWithTag:100\];

lab.x = index \*100;\}

**//总结一下：大家发现是如何实现上下联动的么，自定义lable的点击方法实现了大Scrollerview的**contentOffset**改变****并且触发了代理方法添加新的tableview。**

**而拖动tableview也会使得对应的label移动并且使得他进行缩放。**

[Center]: /images/20220731/60846d841c304e90859f165cf76c9e92.png

简易自定义seg与tableview联动布局

发表评论取消回复

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

相关阅读

相关使用Qt实现自定义滚动条的TableView

相关 QML 使用 Window 自定义简易对话框

相关 android自定义layout布局,Android布局——Preference自定义layout的方法

相关自定义button布局

相关简易自定义seg与tableview联动布局

相关自定义布局机制

相关 TableView自定义左划多个按钮

相关 Android自定义布局属性

相关自定义布局-ScrollLayout

相关 ViewGroup1——自定义布局