I've a few tables in my app. At the moment they are a plain standard transparent table.
You can see the background image behind the table and thats ok.
Put the table looks strange and maybe out of place because it is not obvious its a table.
Is there some option( i couldnt find any) for adding a frame/boarder(like a picture frame) around the table that the table can scroll inside of? I've searched though table and didnt see any.
So if thats true then that leaves me needing to draw a graphic over the table so that the table appears inside it. Any advise welcome.
EDIT:
CGRect cgRct = CGRectMake(30, 50, 270, 350);
table = [[[UITableView alloc] initWithFrame:cgRct
style:UITableViewStylePlain]autorelease];
table.backgroundColor = [UIColor clearColor];
table.layer.borderWidth = 5;
table.layer.borderColor = [UIColor redColor];
table.dataSource = self;
table.delegate = self;
[self.view addSubview:table];
Added this code and the import of Quartz.
But no boarder was drawn.
You can use its layers' properties:
#import <QuartzCore/QuartzCore.h>
tableView.layer.borderWidth = 1.0;
tableView.layer.borderColor = [UIColor redColor].CGColor;
You could also make the tableview smaller on all sides and the have that sit on an image of a frame.
Related
I am creating 1000 views in a scrollview. This takes more time to load the view.
wordsDetails *wordsObj;
for(int i = 0; i<arrayOfWords.count;i++) {
UIView *viewForDisplay = [[UIView alloc]initWithFrame:CGRectMake(320*i, 0, 320, 440)];
UILabel *wordLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 40, 240, 40)];
wordLabel.backgroundColor = [UIColor clearColor];
wordLabel.textColor = [UIColor yellowColor];
wordLabel.font = [UIFont fontWithName:#"Didot" size:24.0];
wordsObj = [arrayOfWords objectAtIndex:i];
wordLabel.text = wordsObj.word;//[NSString stringWithFormat:#"sdssds - %i",i];
[viewForDisplay addSubview:wordLabel];
UITextView *textView = [[UITextView alloc]initWithFrame:CGRectMake(30, 100, 240, 100)];
textView.text = wordsObj.meaning;
textView.editable = NO;
textView.textColor = [UIColor whiteColor];
textView.font = [UIFont fontWithName:#"Didot" size:20.0];
textView.backgroundColor = [UIColor clearColor];
[viewForDisplay addSubview:textView];
[fScrollView addSubview:viewForDisplay];
}
Is there a way to call this in thread.
Don't do it like this. Use a cell-based scrollview subclass (table view or collection view) or roll your own. Your content is the width of the screen so there is absolutely no need to load 1000 screens worth of content at once.
With the cell-based views you only create as many as are needed to show a screen, and these are recycled and reconfigured as new content comes on screen.
I am creating 1000 views in a scrollview.
Don't do that. The user can't possibly use 1000 views all at once, so don't create them all at once. There are some good videos from WWDC 2010, 2011, and 2012 that cover tiling the content in scroll views -- take a look at those for some great ideas.
The scroll view delegate gets messages as the scroll view's content moves, and you can use those messages to add content just in time for it to scroll onto the screen and remove it after it has scrolled off. This is essentially what UITableView and UICollectionView do, and you can use either of them as jrturton suggests, or you can follow the same pattern yourself.
This will not only speed up the creation of your scroll view, it'll also make your scrolling smoother and consume much less memory than you would need otherwise.
I'm developing a little iOS component and I have a problem with a semi-transparent view with subviews. This is my scenario:
- one view with a semi-transparent background using [UIColor colorWithRed:green:blue:alpha]
- a little UITableView, with alpha = 1.0, added as a subview to the semi-transparent view
- some other subviews
Everything works well but the problem raises when the UITableView is scrolled up or down, in fact the area of the semi-transparent view around the UITableView loses its transparency becoming darker than its original background color.
Here's an image to explain the problem:
Look at the space with the two arrows...
Can anyone help me with this problem?
Thank you so much for your attention!
Update:
Some code:
_alertBg = [[UIView alloc] initWithFrame:CGRectZero];
_alertBg.backgroundColor = self.backgroundColor;
_alertBg.frame = CGRectMake((_bgView.frame.size.width - 240) / 2, (_bgView.frame.size.height - 260) / 2, 240, 260);
_alertBg.layer.cornerRadius = 8.0;
_alertBg.layer.borderWidth = 2.0;
_alertBg.layer.borderColor = self.borderColor.CGColor;
_alertBg.layer.shadowColor = [UIColor grayColor].CGColor;
_alertBg.layer.shadowOffset = CGSizeMake(0, 3);
_alertBg.layer.shadowOpacity = 0.8;
_alertBg.layer.masksToBounds = YES;
[_bgView addSubview:_alertBg];
_table = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
_table.frame = CGRectMake(10, _titleLabel.frame.origin.y + _titleLabel.frame.size.height + 12, _alertBg.frame.size.width - 20, 150);
_table.layer.cornerRadius = 6.0;
_table.layer.masksToBounds = YES;
_table.delegate = self;
_table.dataSource = self;
[_alertBg addSubview:_table];
From the code above, self.backgroundColor is something like [UIColor colorWithRed:0 green:0 blue:1 alpha:0.7]
I put the available code in a test project, and got the same problem as you have. Commenting out _alertBg.layer.shadowOpacity = 0.5; fixes the issue for me. Maybe someone can clarify why is this an issue, I have limited experience with QuartzCore.
EDIT: Okay, inched closer to the real reason. It seems that if you don't have set the _alertBg.layer.shadowPath property all kinds of crazy things happen when you scroll the table (my guess here is that the table scroll calls a redraw of the _alertBg and the shadow redrawing gets called in quick succession far too many times and you get those visual artifacts).
Adding a shadowPath fixes the problem, so the layer code for the _alertBg should be as following:
_alertBg.layer.cornerRadius = 8.0;
_alertBg.layer.borderWidth = 2.0;
_alertBg.layer.borderColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.7].CGColor;
_alertBg.layer.shadowColor = [UIColor grayColor].CGColor;
_alertBg.layer.shadowOffset = CGSizeMake(0, 5);
_alertBg.layer.shadowOpacity = 0.8;
_alertBg.layer.shadowPath = [UIBezierPath bezierPathWithRect:_alertBg.bounds].CGPath;
_alertBg.layer.masksToBounds = YES;
Just fix the shadowPath to your liking and you should be ready to go.
PS: On my Google-quest I found this excellent blog post about shadows, it might be of help.
Maybe match the background colour of tableView with _alertBg?
Its may be problem of dequeueReusableCellWithIdentifier.
just try this..., set dequeueReusableCellWithIdentifier to nil like bellow in cellForRowAtIndexPath method of UITableViewController delegate method
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:nil];
Also see my this answer may be you can get some idea from this..
iPhone Hide/Show labels in Uitableview cell
I have a UITableViewController with custom cells, based in Tweetie's Fast scrolling example and i need transparency.
Until now, i loaded my cells from a nib and all i needed was to set some table's properties to
table.backgroundColor = [UIColor clearColor];
table.opaque = NO;
table.rowHeight = 130.0f;
table.separatorStyle = UITableViewCellSeparatorStyleNone;
in order to make the table transparent. As for the cell, i did:
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"cellbackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"cellbackground.png"]];
And so i had every cell with a background image but with the rest completely transparent (half of the image is completely transparent). Now, creating the cell programmatically and drawing everything myself, i just can't get to make the cell transparent. The image part looks fine, but everything else is black, not opaque
Figured it out.
The issue was that it wasn't paying attention to my
self.opaque = NO;
because my cell's super class was doing exactly the opposite, setting opaque = YES;. So i changed that and it is working great now.
PS: Thanks for answering and making me pay extra attention to opaque property.
Try this:
cell.backgroundColor =[UIColor clearColor];
You may also need this:
cell.opaque = NO;
Does anyone know how to show a rounded squared with a spinning activity indicator? It is used in many apps. If you don't know what im talking about, it looks like the indicator when you change volume on your Mac but with a darker background. Im not sure if it is built-in to iOS or someone made it.
Like the one in this post but not full screen just the activity indicator
How to create a full-screen modal status display on iPhone?
Here's what I use when I want to show that kind of indicators.
UIView *loading = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 120, 120)];
loading.layer.cornerRadius = 15;
loading.opaque = NO;
loading.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
UILabel *loadLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 25, 81, 22)];
loadLabel.text = #"Loading";
loadLabel.font = [UIFont boldSystemFontOfSize:18.0f];
loadLabel.textAlignment = UITextAlignmentCenter;
loadLabel.textColor = [UIColor colorWithWhite:1.0f alpha:1.0f];
loadLabel.backgroundColor = [UIColor clearColor];
[loading addSubview:loadLabel];
[loadLabel release];
UIActivityIndicatorView *spinning = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
spinning.frame = CGRectMake(42, 54, 37, 37);
[spinning startAnimating];
[loading addSubview:spinning];
[spinning release];
loading.frame = CGRectMake(100, 200, 120, 120);
Then you just add the 'loading' view to the view of your choice and you got it.
Hope this is what you needed.
Your screenshot is probably a usage of David Sinclair's DSActivityView module. Specifically, the DSBezelActivityView component of it. Or if not, it's a close copy.
http://www.dejal.com/developer/dsactivityview
I use DSActivityView all the time. Great library. Toss that thing up while pulling down data, keeps users and clients happy.
One option: MBProgressHUD.
I don't think that screenshot is my DSBezelActivityView; the metrics look a little different. But it is very similar.
Note, DSActivityView and its subclasses don't use any images or nibs; they're pure code.
To answer the original question, it'd be easy to modify DSBezelActivityView to omit the fullscreen gray background. You could do it by subclassing and overriding the -setupBackground method thusly:
- (void)setupBackground;
{
[super setupBackground];
self.backgroundColor = [UIColor clearColor];
}
Hope this helps!
Try this simple method, Its working well for me....
UIActivityIndicatorView *activityIndicator= [[UIActivityIndicatorView alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
activityIndicator.layer.cornerRadius = 05;
activityIndicator.opaque = NO;
activityIndicator.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.6f];
activityIndicator.center = self.view.center;
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
[activityIndicator setColor:[UIColor colorWithRed:0.6 green:0.8 blue:1.0 alpha:1.0]];
[self.view addSubview: activityIndicator];
You're actually looking at using two UIView subclasses and a custom .png image to get the look you want.
The Gray translucent box would be a UIImageView object, to get the effect you're looking for you need a .png file of a grey square with rounded corners, it doesn't need to be the final size, as long as there's at least one pixel of straight edge between the corners it will work fine. You'll then load it in as a UIImage with the UIImage
stretchableImageWithLeftCapWidth:topCapHeight: method, this let's you specify the top, and left portions of the image that must stay the same, and a 1 pixel slice in each direction will be stretched out to fill the UIImage view you use the image in. http://www.bit-101.com/blog/?p=2275 has a great example of how this works.
So create a UIImage, then create a UIImageView using this image, set its opaque property to NO and the alpha property to something that looks good to you. Add this a subview of your current view.
Now you just need to add the spinning progress indicator, this is even easier, just create a new UIActivityIndicatorView and add it as a subview of the UIImageView you've already created.
The same basic method is used to create pretty much any resizable element in an iOS application. There's some examples of using them for buttons in Apple's UICatalog example code.
What is the best way to get round corners on an entire UITableView as seen in Stocks and Spotlight? The grouped style doesn't solve the problem because the round corners scroll away with the cell. I'm trying to clip the view so the corners are always round regardless of scroll position.
I saw another discussion about doing this to a UIImage that suggested masking it with another image. I'm not sure if this would work because I need taps to pass through to the table. This isn't isn't ideal for me because I want the background pattern to show through through the corners.
It's an old question but perhaps you still want to know how to do this.
I reproduced a tableView like in Stocks/Spotlight. The trick is
view.layer.cornerRadius = 10;
For this to work you need to include the QuartzCore into the class that you call that property:
#import <QuartzCore/QuartzCore.h>
I heard that this only works since OS 3.0. But since my application is using core data it wasn't a problem because it was already for OS 3.0 and hight.
I created a custom UIView with a subview with cornerRadius 10 and with
view.backgroundColor = [UIColor clearColor];
Then you have to place an UITableView grouped style in that subview. You need to set the backgroundColor to clearColor and the separatorColor to clearColor. Then you have to position the tableview inside the rounded corner view, this is done by setting the frame size and origin. My loadView class of my custom UIView looks like this:
self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];
CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];
CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;
scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;
[self.view addSubview:scherm];
CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];
frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;
table.tableView.frame = frame;
[scherm addSubview:table.tableView];
I hope you understand my english, maybe I will write a short blog post about this technique with a sample project, will post the link here when I'm ready.
An easier way to do this is to simply import the QuartzCore framework to your project. #import <QuartzCore/QuartzCore.h> to your tableViewController and just set
myTableView.layer.cornerRadius=5;
This will give you rounded corners without having to add your tableview to a superView or clipping it.
Instead of hacking through the code, here's an easy to mimic the grouped style. This works if all you want is one section.
In Interface Builder:
Set UITableView style to Plain and make the frame with some padding on the left and right, perhaps with x = 10 and width = 300.
Then set the corner radius and color yourself:
#import <QuartzCore/QuartzCore.h>
self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Have you tried the "grouped" table view style?
self.tableView.style = UITableViewStyleGrouped;
For further reference, see the Table View Programming Guide. The "About Table Views" chapter has some nice screenshots describing the different styles.
Well, there is alot of approach to solve this problem.
However, in my case, all doesn't work correctly. My table sometimes is smaller than table size.
I will share the way I did. I belive is alot easer and faster than some options above.
Make the first and last item rounded.
Create CAShapeLayer for top(left|right) and bottom(left|right).
shapeTop = [CAShapeLayer layer];
shapeTop.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
shapeBottom = [CAShapeLayer layer];
shapeBottom.path = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
The table need to be backgroud clearColor;
The cells has to be a colored background;
Set the layer.mask of it
UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;
Don't forget #import <QuartzCore/QuartzCore.h>
I recently came across this problem and solved it a different way. Thought I'd share the results with everyone.
I created a rectangular UIView with a clear, rounded-corner interior, and then laid that on top of the UITableView. You can find the full description at my programming blog.
It works exactly the way I want.
Below code for Swift version :
let redColor = UIColor.redColor()
self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
self.tableView.layer.borderWidth = 1;
self.tableView.layer.cornerRadius = 4;
Make sure that you have import QuartzCore in import section.
Here is swift extension:
extension UITableView {
public var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = true
}
}
}
Used by this way
tableView.cornerRadius = 7.5
UITableViewStyleInsetGrouped
A table view where the grouped sections are inset with rounded corners.
example code:
self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];
looks like:
Settings looking table view sections