UI之slider、segmentControl

Slider、segmentControl

#import "MangoView.h"
@interface MangoView ()
@property(nonatomic,retain)UISegmentedControl *segmentedControl;
@property(nonatomic,retain)UISlider *slider;
@property(nonatomic,retain)UILabel *label;
@end
@implementation MangoView
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self loadingCustomView];
    }
    return self;
}
- (void)dealloc{
    [_slider release];
    [_label release];
    [_segmentedControl release];
    [super dealloc];
}
- (void)loadingCustomView{
    //初始化segmentedControl,需要指定一个数组,数组元素是segment即将显示的内容
    self.segmentedControl = [[UISegmentedControl alloc]initWithItems:@[@"apple",@"banana",@"bear"]];
    //frame
    self.segmentedControl.frame = CGRectMake(0, 100, self.frame.size.width, 40);
    //按下之后,YES选中效果会马上消失,NO按下后选中效果会一直保留直到选中其它选项
    self.segmentedControl.momentary = YES;
    //numberOfSegments:segment分段的个数
    NSLog(@"%lu",self.segmentedControl.numberOfSegments);
    //给某个分段设置标题
    [self.segmentedControl setTitle:@"李小璐" forSegmentAtIndex:2];
    //在segment的某一个位置插入一个名字为title的分段,animated是否有过渡动画的效果
    [self.segmentedControl insertSegmentWithTitle:@"霍思燕" atIndex:1 animated:YES];
    //设置segment主题颜色
    self.segmentedControl.tintColor = [UIColor orangeColor];
    //给某个分段设置图片
    [self.segmentedControl setImage:[UIImage imageNamed:@"1.png"] forSegmentAtIndex:1];
    //设置segment的某一个分段是否可用,不可用为黑色
    [self.segmentedControl setEnabled:YES forSegmentAtIndex:3];
    //给segment设置方法
    [self.segmentedControl addTarget:self action:@selector(segmentTapAction:) forControlEvents:UIControlEventValueChanged];
    [self addSubview:self.segmentedControl];
    [self.segmentedControl release];
    
    //滑块UISlider
    self.slider = [[UISlider alloc]initWithFrame:CGRectMake(20, 200, self.frame.size.width - 40, 40)];
    //滑块右侧最大值
    self.slider.maximumValue = 100.0;
    //滑块未划过的区域是红色
    self.slider.maximumTrackTintColor = [UIColor redColor];
    //滑块左侧最小值
    self.slider.minimumValue = 0.0;
    //滑块划过的区域是蓝色
    self.slider.minimumTrackTintColor = [UIColor blueColor];
    //UIControlEventValueChanged当值改变的时候调用
    [self.slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
    [self addSubview:self.slider];
    [self.slider release];
    
    //创建label,并把slider.value值显示其上
    self.label = [[UILabel alloc]initWithFrame:CGRectMake(20, 300, self.frame.size.width - 40, 20)];
    self.label.backgroundColor = [UIColor lightGrayColor];
    self.label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:self.label];
    [self.label release];
}
- (void)sliderAction:(UISlider *)slider{
    //使slider.value值显示在label上面
    self.label.text  = [NSString stringWithFormat:@"%f",self.slider.value];
 }
//segment方法的实现
- (void)segmentTapAction:(UISegmentedControl *)segment{
    //selectedSegmentTndex返回的是点击的哪一个分段
    switch (segment.selectedSegmentIndex) {
        case 0:
            [self segmentOne];
            break;
        case 1:
            [self segmentTwo];
            break;
        case 2:
            [self segmentThree];
            break;
        case 3:
            [self segmentFour];
            break;
        default:
            break;
    }
}
- (void)segmentOne{
    NSLog(@"1");
}
- (void)segmentTwo{
    NSLog(@"2");
}
-(void)segmentThree{
    NSLog(@"3");
}
-(void)segmentFour{
    NSLog(@"4");
}
@end


#import "MangoViewController.h"
#import "MangoView.h"
@interface MangoViewController ()
@end
@implementation MangoViewController
- (void)loadView{
    [super loadView];
    self.view = [[MangoView alloc]initWithFrame:self.view.frame];
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 HTML、CSS 和 JavaScript 实现一个类似 Element UI 的滑块组件。以下是一个简单的示例: HTML: ``` <div class="el-slider"> <div class="el-slider__bar"></div> <div class="el-slider__button"></div> </div> ``` CSS: ``` .el-slider { position: relative; height: 6px; width: 100%; background-color: #e5e5e5; } .el-slider__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; width: 100%; background-color: #409EFF; } .el-slider__button { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 16px; width: 16px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } ``` JavaScript: ``` const slider = document.querySelector('.el-slider'); const bar = slider.querySelector('.el-slider__bar'); const button = slider.querySelector('.el-slider__button'); let isDragging = false; function updateButtonPosition(percent) { button.style.left = `${percent}%`; } function updateBarWidth(percent) { bar.style.width = `${percent}%`; } function updateValue(percent) { const min = parseFloat(slider.getAttribute('data-min')) || 0; const max = parseFloat(slider.getAttribute('data-max')) || 100; const value = (max - min) * percent / 100 + min; slider.setAttribute('data-value', value); slider.dispatchEvent(new Event('input')); } function handleMouseDown(event) { isDragging = true; } function handleMouseMove(event) { if (isDragging) { const rect = slider.getBoundingClientRect(); const percent = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100)); updateButtonPosition(percent); updateBarWidth(percent); updateValue(percent); } } function handleMouseUp(event) { isDragging = false; } button.addEventListener('mousedown', handleMouseDown); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); ``` 以上代码实现了一个基本的滑块组件,可以拖动滑块按钮来改变其值,并且会触发 `input` 事件。需要注意的是,这里使用了 `data-min` 和 `data-max` 属性来设置滑块的最小值和最大值,使用了 `data-value` 属性来设置当前的值(通过 `input` 事件更新)。可以在 HTML 中动态设置这些属性来初始化滑块组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值