效果图 如下 上方的滑条 根据页面可以滑动
思路:
下方灰色的部分是一个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;
}
}
以上????
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 }
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 { }
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 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #703daa }
span.s1 { color: #000000 }
span.s2 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #008400 }
span.s1 { }