如何在屏幕下方显示UISlider的值，如图所示？

Question

我是ios开发的新手。我必须设计这个屏幕。我用图像显示滑块下方的数字，但在大屏幕上看起来不太好。请告诉我其他方法。请告诉我如果我想绘制这些数字，我怎么能设置坐标，因为我正在使用autolayout。 谢谢

Answer 1

如果您想以编程方式执行此操作，请查看 Vvk Aghera ＆＃39; answer。如果你想在视觉上做到这一点＆＃39;使用界面构建器，最简单的方法是使用stack views。

1。设置视图

在Interface Builder中，您可以为每个数字添加一个滑块元素和一个标签（总共11个）。

将标签放在水平堆栈视图中，并将分配设置为＆＃39; 同等填充＆＃39;在属性检查器中：

您还可以通过选择所有标签并打开属性检查器，轻松配置文本颜色并使标签的对齐居中：

将水平堆栈视图和滑块放在垂直堆栈视图中，为您提供如下内容：

这是您的视图层次结构应该是这样的：

• 堆栈视图（垂直）
  • 滑块
  • 堆栈视图（水平）
    • 标签
    • 标签
    • ...

截图：

2。配置滑块

然后您可以使用属性检查器configure the slider。例如，您可以将最大值设置为100：

如果您需要帮助将滑块连接到控制器并访问其值，请查看以下教程：

• iOS Creator ＆＃39; s UISLider tutorial
• Ray Wenderlich ＆＃39; A Simple iOS App

别忘了UISlider class reference。

Answer 2

使用UICollectionView使用你的ViewController就像.... 首先制作一个UICollectionView Cell，我们正在使用Prototype Cell。

class Robots extends Model
{
    public function initialize()
    {
        $this->hasMany("id", "RobotsParts", "robots_id",
        [
            "alias" => "parts",
            "reusable" => true
        ]);
    }
}

CellNumber 是您的Custome CollectionViewcell。见下文...

<强> CellNumber.h

@property (strong, nonatomic)IBOutlet UICollectionView *clnView;
@property (strong, nonatomic)IBOutlet UISlider *slider;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self.clnView reloadData];
}

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

#pragma mark - Slider Action

-(IBAction)sliderAction:(id)sender
{
    UISlider *slider = (UISlider*)sender;
    float value = slider.value;
    NSLog(@"value::::%f",value);
}

#pragma mark - Collection View Delegate Methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 11;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CellNumber *aCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CellNumber" forIndexPath:indexPath];
    aCell.lblNo.text = [NSString stringWithFormat:@"%ld",(long)indexPath.row*10];
    return aCell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(self.clnView.frame.size.width/15, self.clnView.frame.size.height);
}

单元格的.m文件无关。 然后去故事板并制作原型单元并给所有奥特莱斯。  在故事板：

1）添加水平集合视图

2）添加小区标识符和类。

3）在单元格中添加UILable并设置插座

4）添加滑块并设置Outlet而不是设置ValuChange Action。

查看以下所有图片....

<强>输出