How to set alignment for UIScrollView in ios

Question

i am creating an application, where i am using UIScrollView for displaying the number of available colors of each product. I am getting number of available colors at run time, so i have used for loop and displaying on my scroll view. Its working fine, but the problem if i am getting only one available color then my output is coming as below screen :

But the output should be as below screen :

It seems like i need to do kind of center alignment for my UIScrollView, so every available color will suppose to display from center. here is my code :

UIScrollView *availableColorScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 80)];
availableColorScrollView.backgroundColor = [UIColor clearColor];
availableColorScrollView.showsHorizontalScrollIndicator = YES;
availableColorScrollView.showsVerticalScrollIndicator=NO;
availableColorScrollView.pagingEnabled = YES;

for (int i = 0; i < arrayAvlbleColors.count; i++) {
    CGRect frame;
    frame.origin.x = 23 * i;
    frame.origin.y = 0;
    frame.size = availableColorScrollView.frame.size;
    UIView *subview = [[UIView alloc] initWithFrame:frame];

    UILabel *label = [[UILabel alloc] init];
    [label setFrame:CGRectMake(15, 14, 16, 16)];
    [label.layer setCornerRadius:8];

    NSString *strColorCode = [arrayAvlbleColors objectAtIndex:i];
    strColorCode = [strColorCode substringFromIndex:1];
    [label setBackgroundColor:[self colorWithHexString:strColorCode]];
    [subview addSubview:label];
    [availableColorScrollView addSubview:subview];
}

 [self.view addSubview:availableColorScrollView];

availableColorScrollView.contentSize = CGSizeMake(24 * arrayAvlbleColors.count, availableColorScrollView.frame.size.height);

Please suggest me to achieve my output, Thanks!

Answer 1

You can calculate your scrollview content to be placed in centre like this:

float contentWidth = 23 * arrayAvlbleColors.count;

Now you have content width to subtract from scrollView's width

float centerPadding = 0.0f;
float width = availableColorScrollView.frame.size.width;
centerPadding = width - contentWidth;
if(centerPadding < 0)
{
   //content cannot be placed in center as content is bigger than width
   centerPadding = 0.0f;
}

We have padding to center our content in scrollView, so use it in for loop like this :

frame.origin.x = (23 * i) + centerPadding;

Answer 2

this is the simple answer but working fine if u taken any Mainview or subview or else, set the frame size/2 for height and width it automatically set it into center of the subview .

here i used static color , customize urself

just change your line this

 NSString *strColorCode = [arrayAvlbleColors objectAtIndex:i];
strColorCode = [strColorCode substringFromIndex:1];
[label setBackgroundColor:[self colorWithHexString:strColorCode]];
[subview addSubview:label];
[availableColorScrollView addSubview:subview];

into

    NSString *strColorCode = [arrayAvlbleColors objectAtIndex:i];
     strColorCode = [strColorCode substringFromIndex:1];
    [label setBackgroundColor:[self colorWithHexString:strColorCode]];

    //use any one

    //option no 1:

    //[label setCenter:subview.center];

     //option no 2:

    [ label setCenter:CGPointMake(subview.frame.size.width / 2, subview.frame.size.height / 2)];


    [subview addSubview:label];
    [availableColorScrollView addSubview:subview];

final out put is