zoukankan      html  css  js  c++  java
  • iOS

    前言

    	NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISlider : UIControl <NSCoding>
    	@available(iOS 2.0, *)						   public class UISlider : UIControl, NSCoding
    

    1、UISlider 的创建

    • Objective-C

      	// 高度不起作用,但不能为 0 ,为 0 时滑块无法滑动
      	UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 200, 300, 20)];
      
      	// 将 slider 添加到 view
      	[self.view addSubview:slider];
      
    • Swift

      	// 高度不起作用,但不能为 0 ,为 0 时滑块无法滑动
      	let slider:UISlider = UISlider(frame: CGRectMake(20, 200, 300, 20))
      	
      	// 将 slider 添加到 view
      	self.view.addSubview(slider)
      

    2、UISlider 的设置

    • Objective-C

      	// 设置最小和最大值
      	slider.minimumValue = 0;
      	slider.maximumValue = 100;
      	    
      	// 设置当前值
      	slider.value = 50;
      	[slider setValue:50 animated:YES];
      	    
      	// 获取当前值
      	float value = slider.value;
      	  
      	// 设置滑块的颜色
      	/*
      		默认为白色
      	*/
      	slider.thumbTintColor = [UIColor orangeColor];
      	    
      	// 设置滑过的进度条的颜色
      	/*
      		默认为蓝色
      	*/
      	slider.tintColor = [UIColor redColor];
      	    
      	// 设置滑过的和未划过的进度条的颜色
      	/*
      		minimumTrackTintColor:滑过的进度条颜色,默认为蓝色
      		maximumTrackTintColor:未划过的进度条颜色,默认为灰色
      	*/
      	slider.minimumTrackTintColor = [UIColor greenColor];
      	slider.maximumTrackTintColor = [UIColor redColor];
      	    
      	// 设置滑块的图片
      	[slider setThumbImage:[UIImage imageNamed:@"hehe"] forState:UIControlStateNormal];
      	[slider setThumbImage:[UIImage imageNamed:@"hihi"] forState:UIControlStateHighlighted];
      	    
      	// 设置滑过的和未划过的进度条的图片
      	[slider setMinimumTrackImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
      	[slider setMaximumTrackImage:[UIImage imageNamed:@"pic2"] forState:UIControlStateNormal];
      	    
      	// 设置左右两端的图片
      	slider.minimumValueImage = [UIImage imageNamed:@"volum-"];
      	slider.maximumValueImage = [UIImage imageNamed:@"volum+"];
      	    
      	// 设置为纵向
      	
      		// 顺时针旋转 90 度,90/180 * M_PI,1 度 = PI/180 弧度
      		slider.transform = CGAffineTransformMakeRotation(0.5 * M_PI);
      
      		// 逆时针旋转 90 度,270/180 * M_PI,1 度 = PI/180 弧度
      		slider.transform = CGAffineTransformMakeRotation(1.5 * M_PI);
      	    
      	// 获取当前值
      	UIImage *thumbImage = slider.currentThumbImage;                  // 获取当前滑块的图片值
      	UIImage *minimumTrackImage = slider.currentMinimumTrackImage;    // 获取当前滑过的进度条的图片值
      	UIImage *maximumTrackImage = slider.currentMaximumTrackImage;    // 获取当前未滑过的进度条的图片值
      	
      	// 添加点击触发事件
      	/*
      		UISlider 继承于 UIControl,可以对 UISlider 添加触发事件
      	*/
      	[slider addTarget:self action:@selector(sliderClick:) forControlEvents:UIControlEventValueChanged];
      
    • Swift

      	// 设置最小和最大值
      	slider.minimumValue = 0
      	slider.maximumValue = 100
      	    
      	// 设置当前值
      	slider.value = 50
      	slider.setValue(50, animated: true)
      	    
      	// 获取当前值
      	let value:Float = slider.value
      	  
      	// 设置滑块的颜色
      	/*
      		默认为白色
      	*/
      	slider.thumbTintColor = UIColor.orangeColor()
      	    
      	// 设置滑过的进度条的颜色
      	/*
      		默认为蓝色
      	*/
      	slider.tintColor = UIColor.redColor()
      	    
      	// 设置滑过的和未划过的进度条的颜色
      	/*
      		minimumTrackTintColor:滑过的进度条颜色,默认为蓝色
      		maximumTrackTintColor:未划过的进度条颜色,默认为灰色
      	*/
      	slider.minimumTrackTintColor = UIColor.greenColor()
      	slider.maximumTrackTintColor = UIColor.redColor()
      	    
      	// 设置滑块的背景图片
      
      		// 按钮未点击时的图片
      		slider.setThumbImage(UIImage(named: "hehe"), forState: UIControlState.Normal)
      
      		// 按钮点击时的图片
      		slider.setThumbImage(UIImage(named: "hihi"), forState: UIControlState.Highlighted)
      	    
      	// 设置滑过的和未划过的进度条的图片
      	slider.setMinimumTrackImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
      	slider.setMaximumTrackImage(UIImage(named: "pic2"), forState: UIControlState.Normal)
      	    
      	// 设置左右两边的图片
      	slider.minimumValueImage = UIImage(named: "volum-")
      	slider.maximumValueImage = UIImage(named: "volum+")
      	    
      	// 设置为纵向
      	
      		// 顺时针旋转 90 度,90/180 * M_PI,1 度 = PI/180 弧度
      		slider.transform = CGAffineTransformMakeRotation(0.5 * CGFloat(M_PI))
      
      		// 逆时针旋转 90 度,270/180 * M_PI,1 度 = PI/180 弧度
      		slider.transform = CGAffineTransformMakeRotation(1.5 * CGFloat(M_PI))
      	    
      	// 获取当前值
      	let thumbImage:UIImage? = slider.currentThumbImage                 // 获取当前滑块的图片值
      	let minimumTrackImage:UIImage? = slider.currentMinimumTrackImage   // 获取当前滑过的进度条的图片值
      	let maximumTrackImage:UIImage? = slider.currentMaximumTrackImage   // 获取当前未滑过的进度条的图片值
      	  
      	// 添加点击触发事件
      	slider.addTarget(self, action: #selector(UiSlider.sliderClick(_:)), 
      	             forControlEvents: .ValueChanged)
      

    3、UISlider 透明化处理

    • 经过处理后的 UISlider 就只能看到中间的 ThumbImage 了,而 ThumbImage 左右的颜色都变成透明的。之后可以再设置上颜色等。

    • Objective-C

      	UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), NO, 0.0f);
      	UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
      	UIGraphicsEndImageContext();
      	
      	[slider setMinimumTrackImage:transparentImage forState:UIControlStateNormal];
      	[slider setMaximumTrackImage:transparentImage forState:UIControlStateNormal];
      
    • Swift

      	UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 0.0)
      	let transparentImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()
      	UIGraphicsEndImageContext()
      	    
      	slider.setMinimumTrackImage(transparentImage, forState: .Normal)
      	slider.setMaximumTrackImage(transparentImage, forState: .Normal)
      

    4、Storyboard 中设置

    • 在 Storyboard 场景中设置

      • Slider 设置

        Slider1

        Value 最小值/最大值/当前值
                             |
        

        Min Image | 最小值图片
        Max Image | 最大值图片
        |
        Min Track Tint | 滑过的颜色
        Max Track Tint | 未滑过的颜色
        Thumb Tint | 滑块颜色
        |
        Events |
        -- Continuous Updates |

      • Control 设置

        Slider2

        Alignment 文字对齐方式
                             |
        

        Content |
        -- Selected | 选中
        -- Enable | 可用
        -- Highlighted | 高亮

  • 相关阅读:
    vue 图片切换动态绑定
    弹窗居中,不会随页面滚动变化,直接固定在屏幕中央
    GC优化策略官篇2
    UI优化策略网格重建
    GC优化策略官篇1
    Graphics优化策略官篇3
    GC优化策略官篇3
    Scripts优化策略官篇2
    UI优化策略高级技巧
    Scripts优化策略官篇1
  • 原文地址:https://www.cnblogs.com/QianChia/p/5755239.html
Copyright © 2011-2022 走看看