首页 > 代码库 > [objc]-ios 分页控制器实现

[objc]-ios 分页控制器实现

2024-09-23 10:19:03   203人阅读

效果图 如下 上方的滑条 根据页面可以滑动

技术分享

 

思路: 

下方灰色的部分是一个scrollview 其中放置了2个view。

上方的绿色滑条是uilable控件。

绿色滑条下面是2个button。

 

实现：

在所有的controller外部套了一层NavigationController,所以会有UINavigationBar。

 

//首先viewController.h  新建控件 并且继承  <UIScrollViewDelegate>

@interface ViewController : BaseViewController<UIScrollViewDelegate>

//scrollview
@property (nonatomic,strong)UIScrollView * scrollView;
//移动的滑条
@property(nonatomic,strong)UILabel * navSlideLable; 
//选择按钮
@property(nonatomic,strong)UIButton * view1Btn;
@property(nonatomic,strong)UIButton * view2Btn;

@end

 

//在viewController.m 文件中实现控件的懒加载。

#pragma mark Lazyout
-(UIScrollView *)scrollView{

    if (!_scrollView) {
        //距离头的的高度
        CGFloat scrollViewHeight = 100;
        //scrollview的大小位置 
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, scrollViewHeight, SK_ScreenWidth,SK_ScreenHeight- scrollViewHeight - self.navigationController.navigationBar.frame.size.height -22)];
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.pagingEnabled = YES;
        CGSize size = _scrollView.frame.size;
        //scrollview的宽度 = 页面的个数* 单个页面的宽度
        size.width *=2; //2个
        _scrollView.contentSize = CGSizeMake(size.width, 0);
        _scrollView.backgroundColor = [UIColor redColor];
        _scrollView.delegate = self; //设置代理
        
    }
    return _scrollView;

}

//移动的滑条
-(UILabel *)navSlideLable{

    if (!_navSlideLable) {
            
        _navSlideLable = [[UILabel alloc] init];
        _navSlideLable.backgroundColor = [UIColor colorWithRed:32/255.0 green:178/255.0 blue:170/255.0 alpha:1];
    }
    return _navSlideLable;
}

//Button
-(UIButton *)view1Btn{

    if (!_view1Btn) {
    
        _view1Btn = [[UIButton alloc]init];
        //给Btn一个target scrollview会根据tag 来移动位置
        _view1Btn.tag =(NSInteger) (0 / (self.view.frame.size.width / 2));
        [_view1Btn setFrame:CGRectMake(0, 0, SK_ScreenWidth/2, TOP_VIEW_ITEM_HEIGHT)];
        [_view1Btn setTitle:@"view1" forState:UIControlStateNormal];
        [_view1Btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        //给Btn添加相应方法
        [_view1Btn addTarget:self action:@selector(switchview1Btn:) forControlEvents:UIControlEventTouchUpInside];

    }
    return _view1Btn;
}
-(UIButton *)view2Btn{
    
    if (!_view2Btn) {
    
        _view2Btn = [[UIButton alloc]init];
        _view2Btn.tag =(NSInteger) (SK_ScreenWidth/2 / (self.view.frame.size.width / 2));
        [_view2Btn setFrame:CGRectMake(SK_ScreenWidth/2, 0, SK_ScreenWidth/2, TOP_VIEW_ITEM_HEIGHT)];
        [_view2Btn setTitle:view2 forState:UIControlStateNormal];
        [_view2Btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_view2Btn addTarget:self action:@selector(switchview2Btn:) forControlEvents:UIControlEventTouchUpInside];  

    }
    return _view2Btn;
}

 

//viewDidLoad 添加控件到页面上

scrollview中的视图我另外新建了2个UIView的类 FirstView 和SecondView 方便再自定义视图

滑条和按钮的位置是可以自己修改的 我写的是在上方 也可以自己写到下方或者其他的地方改变一下位置就好啦

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor  = [UIColor whiteColor];

    //添加移动滑条
    [self.view addSubview: self.navSlideLable];
    //移动滑条的初始位置 （应为只有2个按钮所以宽度直接是屏幕的一半 多个自己调节就好）
    [self.navSlideLable setFrame:CGRectMake(0,0, SK_ScreenWidth/2, TOP_VIEW_LINE_HEIGHT)];

    //添加按钮 
    [self.view addSubview:self.view1Btn];
    [self.view addSubview:self.view2Btn];

    //添加scrollview 中的视图
    //第一个页面的位置是 0 0
    FirstView * firstView = [[FirstView alloc]initWithFrame:CGRectMake(0, 0, SK_ScreenWidth, self.scrollView.frame.size.height)];
    //第二个页面的起始位置就是加上第一个页面的宽度 依次类推
    SecondView * secondView = [[SecondView alloc]initWithFrame:CGRectMake(self.scrollView.frame.size.width, 0, SK_ScreenWidth, self.scrollView.frame.size.height)];
    //添加scrollview 中的视图
    [self.scrollView addSubview:firstView];
    [self.scrollView addSubview:firstView];
    //添加scrollview    
    [self.view addSubview: self.scrollView];
    
}

 

 //实现Button的响应方法

//这里点击后不需要改动滑条的位置，按钮一点击就会改动scrollview的位置，会自己响应scrollview的代理方法去改变滑条的位置

-(void)switchview1Btn:(UIButton *)button{
    //点击Button 根据button的tag 来改变scrollview 滑动的位置
    [self.scrollView setContentOffset:CGPointMake(button.tag * self.view.frame.size.width, 0) animated:YES];

}
-(void)switchview2Btn:(UIButton *)button{
    //点击Button 根据button的tag 来改变scrollview 滑动的位置
    [self.scrollView setContentOffset:CGPointMake(button.tag * self.view.frame.size.width, 0) animated:YES];
    
}

 

//实现scrollview的代理方法移动视图的位置

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGPoint offset = scrollView.contentOffset;
    //应为只有2个按钮和页面所以 处以2 3个就处以3
    CGFloat x = offset.x / 2;
    if (x !=0 &&x < scrollView.frame.size.width) {
       //移动滑条的位置
        CGRect frame = self.navSlideLable.frame;
        frame.origin.x = x;
        self.navSlideLable.frame = frame;
    }
}

 

 

以上????

 

 

 

 

 

 

 

 

 

 

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #ba2da2 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; min-height: 13.0px } span.s1 { } span.s2 { color: #000000 } span.s3 { color: #703daa }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC"; color: #008400 } span.s1 { font: 11.0px Menlo } span.s2 { }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px "PingFang SC"; color: #008400 } span.s1 { font: 11.0px Menlo } span.s2 { }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa } span.s1 { color: #000000 } span.s2 { }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400 } span.s1 { }</style>

[objc]-ios 分页控制器实现


联系
我们