当前位置: 移动技术网 > 移动技术>移动开发>IOS > iOS UI入门学习之Objective-C和Swift下UIPageControl的使用讲解

iOS UI入门学习之Objective-C和Swift下UIPageControl的使用讲解

2018年09月29日  | 移动技术网移动技术  | 我要评论

uipagecontrol就是我们常说的小白点,常用于轮播图,与uiscrollview一起使用。效果如图:

这里写图片描述

objective-c代码:

#import "viewcontroller.h"

@interface viewcontroller ()

@property(nonatomic,strong) uiscrollview * scrollview;
@property(nonatomic,strong) uipagecontrol * pagecontrol;

@end

@implementation viewcontroller

- (void)viewdidload {
 [super viewdidload];
 // do any additional setup after loading the view, typically from a nib.
 self.view.backgroundcolor = [uicolor whitecolor];
 [self setupview];
}

-(void)setupview{

 [self.view addsubview:self.scrollview];
 [self.view addsubview:self.pagecontrol];
 for (int i = 0; i < 4; i ++) {
  uiview * view = [[uiview alloc] initwithframe:cgrectmake(self.view.frame.size.width*i, 0, self.view.frame.size.width, self.view.frame.size.height)];
  if (i == 0) {
view.backgroundcolor = [uicolor orangecolor];
  }else if (i == 1){
view.backgroundcolor = [uicolor yellowcolor];
  }else if (i == 2){
view.backgroundcolor = [uicolor magentacolor];
  }else{
view.backgroundcolor = [uicolor cyancolor];
  }
  [self.scrollview addsubview:view];
 }
}

-(void)scrollviewdidscroll:(uiscrollview *)scrollview{
 //设置当前显示的小点的索引
 self.pagecontrol.currentpage = scrollview.contentoffset.x/self.view.frame.size.width;
}

-(uiscrollview *)scrollview{
 if (!_scrollview) {
  _scrollview = [[uiscrollview alloc] initwithframe:self.view.frame];
  _scrollview.contentsize = cgsizemake(self.view.frame.size.width*4, self.view.frame.size.height);
  _scrollview.showshorizontalscrollindicator = no;
  _scrollview.pagingenabled = yes;
  _scrollview.delegate = self;
 }
 return _scrollview;
}

-(uipagecontrol *)pagecontrol{
 if (!_pagecontrol) {
  //初始化
  _pagecontrol = [[uipagecontrol alloc] initwithframe:cgrectmake(0, self.view.frame.size.height - 80, self.view.frame.size.width, 20)];
  //设置总数量,一般与scrollview的页数相同
  _pagecontrol.numberofpages = 4;
  //设置不是当前页的小点颜色
  _pagecontrol.pageindicatortintcolor = [uicolor whitecolor];
  //设置当前页的小点颜色
  _pagecontrol.currentpageindicatortintcolor = [uicolor redcolor];
 }
 return _pagecontrol;
}

- (void)didreceivememorywarning {
 [super didreceivememorywarning];
 // dispose of any resources that can be recreated.
}

@end

swift代码:

import uikit

class viewcontroller: uiviewcontroller,uiscrollviewdelegate {

 override func viewdidload() {
  super.viewdidload()
  // do any additional setup after loading the view, typically from a nib.
  self.setupview()
 }

 func setupview() {
  self.view.addsubview(self.scrollview)
  self.view.addsubview(self.pagecontrol)
  let viewsize = self.view.frame.size

  for i in 0...3 {
let view = uiview.init(frame: cgrect.init(x:viewsize.width*cgfloat(i), y: 0, width: viewsize.width, height: viewsize.height))
if i == 0{
 view.backgroundcolor = uicolor.orange
}else if i == 1{
 view.backgroundcolor = uicolor.yellow
}else if i == 2{
 view.backgroundcolor = uicolor.magenta
}else{
 view.backgroundcolor = uicolor.cyan
}
self.scrollview.addsubview(view)
  }
 }

 func scrollviewdidscroll(_ scrollview: uiscrollview) {
  //设置当前显示的小点的索引
  self.pagecontrol.currentpage = int(self.scrollview.contentoffset.x/self.view.frame.size.width)
 }

 lazy var scrollview: uiscrollview = {
  let sc = uiscrollview.init(frame: self.view.frame)
  sc.contentsize = cgsize.init(width: self.view.frame.size.width*4, height: self.view.frame.size.height)
  sc.showshorizontalscrollindicator = false
  sc.ispagingenabled = true
  sc.delegate = self
  return sc
 }()

 lazy var pagecontrol: uipagecontrol = {
  //初始化
  let page = uipagecontrol.init(frame: cgrect.init(x: 0, y: self.view.frame.size.height - 80, width: self.view.frame.size.width, height: 20))
  //设置总数量,一般与scrollview的页数相同
  page.numberofpages = 4
  //设置不是当前页的小点颜色
  page.pageindicatortintcolor = uicolor.white
  //设置当前页的小点颜色
  page.currentpageindicatortintcolor = uicolor.red
  return page
 }()

 override func didreceivememorywarning() {
  super.didreceivememorywarning()
  // dispose of any resources that can be recreated.
 }
}

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网