美文网首页@产品移动开发干货店程序员
IOS开关控件,分段控件和滑块控件的使用方法

IOS开关控件,分段控件和滑块控件的使用方法

作者: 星辰_入海 | 来源:发表于2019-04-03 13:00 被阅读10次
    在使用应用程序设计的时候我们会使用到UI开关控件等 图1--ios通用设置

    那么我们将如何使用代码来实现开关控件,分段控件和滑块控件,将是我们今天的主要学习内容。

    开关控件UISwitch

    定义:开关控件顾名思义,是对于每个对象进行打开与关闭的控制元件,对于开关控件只有两个状态true 和 false(可以对应电路中的0和1的开关状态)

    一.故事版实现方式
    图2--选择switch控件
    • 将switch控件拖到到故事版中并设置输入口在ViewController中 图3--故事版的switch
    • 设置输入口
    @property (weak, nonatomic) IBOutlet UISwitch *rightSwitch;
    @property (weak, nonatomic) IBOutlet UISwitch *leftSwitch;
    
    • 设置swtich初始化状态,在实现部分设置输出口
    - (IBAction)switchValueChanged:(UISwitch *)sender {
        UISwitch *wichSwitch = (UISwitch *)sender;
        BOOL setting = wichSwitch.isOn;
        [self.leftSwitch setOn:setting animated:TRUE];
        [self.rightSwitch setOn:setting animated:TRUE];
    }
    

    -通过布尔值设置初始化开关控件的打开状态为isOn

    完成上述操作后,运行结果如下

    图4--开关打开状态 图5--点击开关后的状态
    二.代码实现板块
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        CGRect screen = [[UIScreen mainScreen] bounds];
        
        //1.添加rightSwitch
        CGFloat switchScreenSpace = 39;
        
        self.rightSwitch = [[UISwitch alloc] init];
        CGRect frame = self.rightSwitch.frame;
        NSLog(@"%f\t%f\t%f\t%f",self.rightSwitch.frame.origin.x,self.rightSwitch.frame.origin.y,self.rightSwitch.frame.size.height,self.rightSwitch.frame.size.width);
        frame.origin = CGPointMake(switchScreenSpace, 98);
        //重新设置控件位置
        self.rightSwitch.frame = frame;
        //设置控件状态
        self.rightSwitch.on = TRUE;
        //指定事件处理方式
        [self.rightSwitch addTarget:self action:@selector(switchValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:self.rightSwitch];
        
        //2.添加leftSwitch控件
        self.leftSwitch = [[UISwitch alloc] init];
        frame = self.leftSwitch.frame;
        frame.origin = CGPointMake(screen.size.width-(frame.size.width + switchScreenSpace), 98);
        //重新设置位置
        self.leftSwitch.frame = frame;
        //设置控件状态
        self.leftSwitch.on = TRUE;
        [self.leftSwitch addTarget:self action:@selector(switchValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:self.leftSwitch];
    }
    

    分析:分别创建两个switch控件,定义控件初始化位置,同时设置switch控件的开关状态self.rightSwitch.on = TRUE;并通过添加动作方式选择开关的操作。

    //使两个开关的值保持一致
    - (void)switchValueChanged:(id)sender{
        UISwitch *wichSwitch = (UISwitch *)sender;
        BOOL setting = wichSwitch.isOn;
        [self.leftSwitch setOn:setting animated:TRUE];
        [self.rightSwitch setOn:setting animated:TRUE];
    }
    

    运行结果同上图所示

    分段控件UISegmentedControl

    定义:分段控件类似于数组存储对象,可以将控件分为几个部分。【>=两段】

    一.故事版实现方式
    图6--设置分段控件属性
    - (IBAction)touchDown:(UISegmentedControl *)sender {
        UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
        NSLog(@"选择的段:%li",segmentedControl.selectedSegmentIndex);
        
        if (self.leftSwitch.hidden) {
            self.rightSwitch.hidden = FALSE;
            self.leftSwitch.hidden = FALSE;
        }else{
            self.leftSwitch.hidden = TRUE;
            self.rightSwitch.hidden = TRUE;
        }
    }
    

    通过设置左右分段控件的动作操作来实现对与上面所提到的switch控件的出现与隐藏的操作


    图7--分段控件点击Left 图8--分段控件点击Right 图9--追踪数据
    二.代码实现方式
        //3.添加segmentedController
        NSArray *segmented = @[@"Left",@"Right"];
        UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:segmented];
        
        CGFloat scWidth = 220;
        CGFloat scHeight = 29;
        CGFloat scTopView = 186;
        frame = CGRectMake((screen.size.width-scWidth)/2, scTopView, scWidth, scHeight);
        segmentedControl.frame = frame;
        [segmentedControl addTarget:self action:@selector(touchDown:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:segmentedControl];
    

    分析:创建一个位置坐标并初始化分段控件出现的位置,同样设置目标动作(利用点击分段控件来改变switch的工作状态)。

    - (void)touchDown:(id)sender{
        UISegmentedControl *segmentedControl = (UISegmentedControl *)sender;
        NSLog(@"%li",segmentedControl.selectedSegmentIndex);
        if (self.leftSwitch.hidden) {
            self.leftSwitch.hidden = FALSE;
            self.rightSwitch.hidden = FALSE;
        }else{
            self.leftSwitch.hidden = TRUE;
            self.rightSwitch.hidden = TRUE;
        }
    }
    

    滑动控件UISlider

    一.故事版实现方式
    - (IBAction)sliderValueChange:(UISlider *)sender {
        UISlider *slider = (UISlider *)sender;
        float progressAsFloat = (slider.value);
        NSString *newText = [[NSString alloc] initWithFormat:@"%f",progressAsFloat];
        self.sliderValue.text = newText;
    }
    
    设置属性参数 图10--设置最大项和最小项
    二.代码块实现方式
     //4.添加slider控件
        CGFloat sliderWidth = 300;
        CGFloat sliderHeight = 31;
        CGFloat sliderTopView = 298;
        UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((screen.size.width-sliderWidth)/2, sliderTopView, sliderWidth, sliderHeight)];
        
        slider.minimumValue = 0.0f;
        slider.maximumValue = 100.0f;
        slider.value = 50.00f;
        
        //指定事件处理方式
        [slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:slider];
        
        //5.添加标签
        CGFloat lableSliderValueSliderSpace = 30;
        UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x, slider.frame.origin.y-lableSliderValueSliderSpace, 103, 21)];
        lable.text = @"SliderValue:";
        [self.view addSubview:lable];
        
        self.sliderValue = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x+120, slider.frame.origin.y-lableSliderValueSliderSpace, 103, 21)];
        self.sliderValue.text = @"50";
        [self.view addSubview:self.sliderValue];
    
    - (void)sliderValueChanged:(id)sender{
        UISlider *slider = (UISlider *) sender;
        int progressInt = (int)slider.value;
        NSString *nextValue = [[NSString alloc] initWithFormat:@"%d",progressInt];
        self.sliderValue.text = nextValue;
    }
    

    运行整个程序demo如下

    图11--初始状态 图12--点击控件状态

    总结:可以通过控件设置来控制程序中某些可选择的操作,例如音乐声音大小,开关以及切换等。

    相关文章

      网友评论

        本文标题:IOS开关控件,分段控件和滑块控件的使用方法

        本文链接:https://www.haomeiwen.com/subject/hqiabqtx.html