UIScrollView distribute UIButtons Horizontally - iphone

I have a UIScrollView that will expand depending on how many buttons it is due to display. It will always round up to the nearest 320 multiple.
So, if the UIScrollView will receive 3 buttons it will be 320px horizontal, if it received 6 then 640px, 9 is 960.
What I need to do is distribute the UIButtons across this UIScrollView evenly.. However I can't seem to figure out how to do this.
My UIButtons measure 80 pixels horizontally.
Could somebody help me get my head round this?
Update/Clarification: I have no problem setting the UIScrollView's width. This has been done. I am looking for info on how to distribute the 'UIButtons' within the 'UIScrollView'..

[theScrollView setContentSize:CGSizeMake(320/640/960, theScrollView.frame.size.height)];

//considering a margin of 10 pts on either edges and a additional 10 pts on each side of button
Add the buttons like below:
for(int i=0; i< buttonCount;i++){
CGRect buttonFrame = CGRectMake( 10 + i*(80+10+10) +10 , buttonY, 80, buttonHeight );
UIButton *button = [UIButton buttonWithType:<type>];
button.frame = buttonFrame;
}
//To set the scrollable area
[scrollView setContentSize:CGSizeMake( 10 + buttonCount*(80+10+10) +10, 0 )];
//left margin + buttonCount x (buttonWidth + leftButtonMargin+rightButtonMargin) + right margin
This should give you an almost evenly distributed buttons according to the number of buttons.

First take all the buttons in an array..lets say buttonsArray
int spacing = 10; // Adjust according to you requirement
int buttonWidth = 100; // Adjust according to you requirement
int buttonHeight = 100; // Adjust according to you requirement
int count = 0;
for (UIButton *thisButton in buttonsArray) {
[thisButton setFrame:CGRectMake(spacing*(count+1)+count*buttonWidth, 20, buttonWidth, buttonHeight)];
count++;
}
[theScrollView setContentSize:CGSizeMake([[buttonsArray lastObject]frame].origin.x+[[buttonsArray lastObject]frame].size.width+spacing, 0)];
Hope this will help you. I have tested it..working fine...

You can use like this:Use MyScrollView.pagingEnabled=YES.
int PageNum=0;
if(TotalButtons%3 >0)
{
pageNum=TotalButtons/3;
pageNum++;
}
else{
PageNum=TotalButtons/3;
}
[MyScrollView setContentSize:CGSizeMake(320*pageNum, MyScrollView.frame.size.height)];
Add Buttons according to the width and spacing you want on the scrollview.
Edit:
int x=56;
int y=60;
for(int i=1;i<= 60;i++)
{
UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame=CGRectMake(x, y, 200, 120);
button.tag=i;
// [button setTitle:[NSString stringWithFormat:#"Video-%d",i+1] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:#"220x200.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(ButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[VideoStoreScroll addSubview:button];
if(i%6==0)
{
count++;
x=(count-1)*VideoStoreScroll.frame.size.width+56;
y=50;
}
else
{
if(i%3==0)
{
x=(count-1)*VideoStoreScroll.frame.size.width+56;
y=y+190;
}
else
{
x=x+256;
}
}
}
VideoStoreScroll.contentSize=CGSizeMake(x-56, 480);
VideoStoreScroll.contentOffset=CGPointMake(0, 0);
Here I am using six buttons horizontally on scroll per page.You can work for three following this.

Related

Postioning UIImageSubview at center in UIScrollview

How to position the UIImageSubview at center in UIScrollview , I am Loading images dynalically in the uiscrollview so when i select any image in the Uiscrollview that Image should display at the center of screen in uiscrollview.
My Image Width is 65 and Screen width is 320 , I am facing problem setting the position of choosen image at the center of screen,
[scrollView1 setContentOffset:CGPointMake(130, 0) animated:YES];
scrollview just scroll to the 130 position. I don't want like this , I want the subview should be displayed at the center.
Please see the screenshot and tell me how to solve this problem.
How about
(pseudocode)
contentOffset.x = image.center.x - (screenwidth/2)
(expanded...)
UIImageView* imageView = //imageview that was selected
CGFloat screenWidth = 320;
CGPoint offset = scrollView1.contentOffset;
offset.x = imageView.center.x - screenWidth/2;
[scrollView1 setContentOffset:offset animated:YES];
I assume you already worked out how to get a pointer to the selected image...
(expanded further...)
Here is a fully-worked out version of the same, using buttons instead of images for ease of selection... try it (just copy into a new single-view project's viewContoller]), you will see that it works. If you are still having problems I expect it is the way you are identifying your image as the selected image for centering. You would need to update your question showing your code...
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect frame = self.view.bounds;
frame.size.height = frame.size.height/2;
self.scrollView = [[UIScrollView alloc] initWithFrame:frame];
[self.view addSubview:self.scrollView];
[self.scrollView setContentSize:CGSizeMake(2000,self.scrollView.bounds.size.height)];
[self.scrollView setDelegate:self];
for (int i = 1; i < 20; i++) {
UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
NSString* title = [NSString stringWithFormat:#"button %d",i];
[button setTitle:title forState:UIControlStateNormal];
button.bounds = CGRectMake(0,0,80,60);
button.center = CGPointMake(i*100+50,self.scrollView.bounds.size.height/2);
[button addTarget:self
action:#selector(buttonPressed:)
forControlEvents:UIControlEventTouchUpInside];
[self.scrollView addSubview:button];
}
}
- (void)buttonPressed:(UIButton*)sender
{
CGFloat x = sender.center.x - self.scrollView.bounds.size.width/2.0f;
[self.scrollView setContentOffset:CGPointMake(x,0) animated:YES];
}

Proper Way for Create Dynamic UIButton in ScrollView?

I am new to iOS Development.
I have a navigation based Application, In my application I created dynamic buttons by using a for loop.
I have two UITextFields (row and column) in FirstViewController. When user enters a value of row and column then click on OK Button the values of row and column passes to anOtherViewController. In anOtherViewController I have to put a logic to create All Buttons based on row and column value.
MyLogical Code:
for (int i = 1 ; i <= rows; i++)
{
for (int j = 1 ; j <= columns ; j++)
{
NSString *btnTitle = [NSString stringWithFormat:#"%d",buttonCount];
self.btnCount = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.btnCount.tag = [btnTitle intValue];
[self.btnCount setTitle: btnTitle forState: UIControlStateNormal];
[self.btnCount addTarget:self action:#selector(btnCountPressed:) forControlEvents:UIControlEventTouchUpInside];
self.btnCount.frame = CGRectMake(162+changedX, 60+changedY, 43, 43);
[self.scrollView addSubview:self.btnCount];
[self.listOfbtnCount addObject:btnTitle];
changedY = changedY + 50;
buttonCount = buttonCount + 1;
}
changedX = changedX + 55;
if (i == rows)
widthScView = changedX;
if (heightScView == 0)
heightScView = changedY;
changedY = 5;
}
My ScreenShot:
It works fine, but my problem is that if I enter values of row and column more then 40 (about) then my app takes more time to create the dynamic button. The issue is only related to the time required to create the button.
Is there any way to create a button faster? and I also need to know is if my code is bad for memory management? please help me on this issues.
For Information : I Have no errors generated, I have issue of only time consuming process of creation of Buttons.
Thank in Advance.
You should use UICollectionView for this.
UICollectionView works a lot like UITableView in that it'll manage the cells that are displayed on screen, including scrolling, and it'll ask its data source for new cells as it needs them. You can also recycle cells, so you'll only need to create about enough to display, plus a few extra. This should really improve performance, especially when scrolling.
Apple has some sample code using UICollectionView here, and watching Introducing Collection Views in the 2012 WWDC Videos will get you off to a good start.
my problem is that If i enter values of row and column more then 40
Forty rows of forty columns would give you 1600 buttons, most of which don't need to exist most of the time. By managing which cells are needed on screen for you, UICollectionView will reduce that to around eighty (judging by your screen shot). You should see much, much better performance this way.
UICollectionView will also simplify positioning the buttons once you've configured the collection view (which you can do in code or in Interface Builder), you won't need any code of your own for calculating the positions of the buttons.
just implement you logic here with your requirement..
int imageIndex = 0;
int yOffset = 4;//set offset which you want...
while (imageIndex < rows)
{
int yPos = 7 + yOffset * 30; // set distance in height between two raws
for(int i = 0; i < columns; ++i)
{
CGRect rect = CGRectMake((0 + i * 80), yPos, 80, 31);**// here set frame of every button with different x and y postion// here width of button is 80 and height is 31**
if (imageIndex < rows) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = rect;
button.tag = imageIndex;
[button addTarget:self
action:#selector(btnTemp_Clicked:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:[NSString stringWithFormat:#"%d",imageIndex] forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont fontWithName:#"Helvetica-Bold" size:12]];
// [button.titleLabel setTextColor:[UIColor blueColor]];
[button setTitleColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"circle03.jpg"]] forState:UIControlStateNormal ];
[button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted ];
[button setNeedsDisplay];
[yourScrollView addSubview:button];
}
++imageIndex;
}
++yOffset;
}
See the screen which i got output..
Try this method
-(void)ScrollViewSetting {
scrollview.scrollEnabled=YES;
scrollview.userInteractionEnabled=YES;
TotalStyleX=25;
TotalStyleY=18;
int count=0;
int px=0;
int py=0;
for (int i=1; i<=TotalStyleX; i++) {
px=0;
for (int j=1; j<=TotalStyleY; j++) {
count++;
UIButton *btn1=[[UIButton alloc] init];
btn1.tag = count;
btn1.frame=CGRectMake(px+10, py+10, 300, 380); //you can set your height and width your x and y position
[scrollview addSubview:btn1];
px=px+320;
}
py=py+400;
}
[scrollview setContentSize:CGSizeMake(px, py)];
}

iPhone SDK: UIButtons in UIScrollView - Resize Scroll View to Fit all Non Hidden Buttons

I have 7 UIButtons in a UIScrollView. The top 3 UIButtons can be either hidden or visible depending on if statements in code. Meaning there are 8 possibilities of the 3 UIButtons displaying.
The problem i'm having is getting the UIScrollView to adjust its content size so that there are no "empty" looking spaces in it. For example if the middle UIButton is hidden but the ones above and below it are visible, there is an empty space left.
Is there any way make all the buttons fit one underneath the other in the scrollview without any gaps?
I have tried this code but it didn't work:
if([[facilities objectAtIndex:0]intValue] == 1) {
facilitiesButton.hidden = NO;
}
if([[ListingsEnabled objectAtIndex:0]intValue]==1) {
ListingsBtn.hidden = NO;
}
if([[OffersEnabled objectAtIndex:0]intValue]==1) {
OffersBtn.hidden = NO;
}
CGFloat scrollViewHeight = 0.0f;
self.DetailScrollView.showsHorizontalScrollIndicator = NO;
self.DetailScrollView.showsVerticalScrollIndicator = NO;
for (UIView* view in self.DetailScrollView.subviews)
{
if (!view.hidden)
{
CGFloat y = view.frame.origin.y;
CGFloat h = view.frame.size.height;
if (y + h > scrollViewHeight)
{
scrollViewHeight = h + y;
}
}
}
self.DetailScrollView.showsHorizontalScrollIndicator = YES;
self.DetailScrollView.showsVerticalScrollIndicator = YES;
[self.DetailScrollView setContentSize:(CGSizeMake(self.DetailScrollView.frame.size.width, scrollViewHeight))];
as #Andy commented, you need to position the actual buttons, not just change the scroll view size. A Table View may be indeed the way to go, but for 7 buttons that may be overkill. Here's a snippet that will loop through the buttons and update their positions based on visibility. I omitted the scroll view because it doesn't seem necessary, but if you need them in a scroll view that will update i can edit the code, just let me know.
/////////////////////
///// USES ARC //////
/////////////////////
- (void)viewDidLoad
{
[super viewDidLoad];
allButtons = [NSMutableArray array];
// Create 7 buttons and randomly hide some
for (int i = 0; i < 7; i++)
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(0, 0, 100, 50);
[button setTitle:[NSString stringWithFormat:#"Button %i", i+1] forState:UIControlStateNormal];
[button addTarget:self action:#selector(randomizeButtons:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
button.hidden = arc4random_uniform(2)-1 > 0;
[allButtons addObject:button];
}
[self updateButtonLayout];
}
-(void)updateButtonLayout
{
// position buttons based on visiblity
CGRect lastButtonFrame = CGRectMake(0, 0, 0, 0);
int verticalPadding = 10;
for(UIButton *btn in allButtons)
{
if(!btn.hidden)
{
btn.frame = CGRectMake(lastButtonFrame.origin.x, lastButtonFrame.origin.y+lastButtonFrame.size.height+verticalPadding, btn.frame.size.width, btn.frame.size.height);
lastButtonFrame = btn.frame;
}
}
}
-(void)randomizeButtons:(UIButton *)btn
{
// Randomize the visiblity of the buttons and update the interface
for(UIButton *btn in allButtons)
{
btn.hidden = arc4random_uniform(2)-1 > 0;
}
[self updateButtonLayout];
}

Dynamic UIButtons with vertical spacing on a UIScrollView

I need to space UIButtons out on a UIScrollView. The code I have works, however depending on the amount of dataItems I have, the spacing is not even.
Snippet in Question
CGRectMake(10, ((120 / (count + 1)) * (i + 1) * 3) ,300,50)
Specifically
((120 / (count + 1)) * (i + 1) * 3)
Working code
int count = [dataItems count]; /* not a specific value, can grow */
for (int i = 0; i < count; i++) {
UIButton* aButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[aButton setTag:i];
[aButton setFrame: CGRectMake(10,((120 / (count + 1)) * (i + 1) * 3) ,300,50) ];
[aButton setTitle:[[dataItems objectAtIndex:i] objectForKey:#"Feed"] forState:UIControlStateNormal];
[aButton addTarget:self action:#selector(viewCategories:) forControlEvents:UIControlEventTouchUpInside];
[scroller addSubview:aButton];
}
Screenshot
The example on the right should look like the example on the left as far as spacing goes. The UIButtons are sitting on a UIScrollView, so the UIScrollView's contentSize should also grow if there are more dataItems so the buttons can scroll offscreen if there are say, 30+ dataItems.
sounds like you need a set size and padding...
int count = [dataItems count];
CGFloat staticX = 10; // Static X for all buttons.
CGFloat staticWidth = 300; // Static Width for all Buttons.
CGFloat staticHeight = 50; // Static Height for all buttons.
CGFloat staticPadding = 10; // Padding to add between each button.
for (int i = 0; i < count; i++) {
UIButton* aButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[aButton setTag:i];
//Calculate with the Static values.
//I added one set of padding for the top. then multiplied padding plus height for the count.
// 10 + 0 for the first
// 10 + 60 for the second.
// 10 + 120 for the third. and so on.
[aButton setFrame: CGRectMake(10,(staticPadding + (i * (staticHeight + staticPadding)) ,staticWidth,staticHeight) ];
[aButton setTitle:[[dataItems objectAtIndex:i] objectForKey:#"Feed"] forState:UIControlStateNormal];
[aButton addTarget:self action:#selector(viewCategories:) forControlEvents:UIControlEventTouchUpInside];
[scroller addSubview:aButton];
}
however if you are trying to get buttons to do this sort of behavior. I am inclined to agree with the rest.. You can make a custom cell with a button in it.
Then you can load that button cell when the table asks for a button.
And you have the table tie to your [dataItems count] for the total of the items.
then your only calculation is to set the cell height when you initially set the dataItems count. making sure not to make them too short. and the table will handle the rest.
I agree with Gurpartap, but if your dead set on this, I'd do it a bit differently. Even if you understand the math in that setFrame statement now, will you or someone else understand it later. I sure don't looking at it quick. Why not do something like:
CGRect frm = CGRectMake(10,10,300,50);
for (int i = 0; i < count; i++) {
UIButton* aButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[aButton setFrame: frm];
frm.origin.y = frm.origin.y + aButton.frame.size.height + 10;
etc, etc
You should really use a UITableView instead. It does the scroll view, cell laying out, etc. all by itself. You just specify the cell contents.

iPhone: How to scroll random height UIView in ScrollView?

I have ScrollView and UIView created in interface builder (but can as well be code). I want to add random amount of thumbnails (subviews) to UIView and be able to scroll it up-down if there are more than the screen can take. Hovewer, I can't get ScrollView to scroll.
Where and how do I resize UIView and add it as a subview of ScrollView?
When do I set contentSize of scrollView to make it expand along with uiview? I tried creating fixed large contentSize but didn't work as well.
What properties in IB I might need to change to make it work?
I'd like to make the images in uiview clickable in next step.
I guess I could also make both view in code without IB. Just somehow can't get it to work.
Thanks in advance !
//declare base view
UIViewController *viewForLoadForm =[[UIViewController alloc] init];
viewForLoadForm.view.frame=CGRectMake(0, 0,screenSize.size.width,screenSize.size.height);
viewForLoadForm.view.backgroundColor=[UIColor blackColor];
[Manview.view addSubview:viewForLoadForm];
//declare scrollview and add to base view
UIScrollView *scrollview=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.size.width,screenSize.size.height)];
scrollview.indicatorStyle=UIScrollViewIndicatorStyleBlack;
[scrollview setContentSize:CGSizeMake(screenSize.size.width,screenSize.size.height)];
scrollview.clipsToBounds = NO;
scrollview.scrollEnabled = YES;
scrollview.pagingEnabled = NO; scrollview.showsVerticalScrollIndicator =NO;
scrollview.alwaysBounceVertical= YES;
[viewForLoadForm.view addSubview:scrollview];
//Add your controls to scrollview that s image view or something which is needed to display
.........your control's code (textbox,imageview etc)
//took last control's y postion and set your K
float k=Last control's y position +100;(some thing which ll be decide scroll size)
// reassign the scrollview height
[scrollview setContentSize:CGSizeMake(screenSize.size.width,k)];
use above line for scroll view size adjustment at run time.
screenSize.size.width is 320 here
code snippet,
- (void) createThumbView
{
float y_axis = Set y axis;
int x = 0;
int totalImgs = total images;
int tempCnt = 0;
for (int i = 0; i < totalImgs;)
{
float x_axis = set x axis;
int loopCount = 0;
if (totalImgs - tempCnt >= (no of images in row))
{
loopCount = (no of images in row);
}
else
{
loopCount = totalImgs % (no of images in row);
}
for (int j = 0; j < loopCount; j++)
{
MasksData *mData = [masksList objectAtIndex:x];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(x_axis, y_axis, width, height);
[btn setImage:[UIImage imageNamed:[NSString stringWithFormat:#"%#.png",mData.bgImage]] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor clearColor];
btn.tag = x;
[scroll View addSubview:btn];
//photoCount++;
x_axis += width + some space;
tempCnt++;
i++;
x++;
}
y_axis += height + some space;
scroll View.contentSize = CGSizeMake(320.0, y_axis);
}
}