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
Related
My question is already specified in the title: I would like to get rid of the black line drawn on the bottom of the UISearchBar. Any ideas?
Here's an image of what I mean:
UPDATE:
I think that the line is part of the UITableView's tableHeaderView. I still don't know how to remove it.
Try this
searchBar.layer.borderWidth = 1;
searchBar.layer.borderColor = [[UIColor lightGrayColor] CGColor];
Why:
So, I've dug into the API's trying to figure out why this is happening. Apparently whomever wrote the UISearchBar API is rasterizing the lines onto an image and setting it as it's backgroundImage.
Solution:
I propose a simpler solution, if you want to set the backgroundColor and get rid of the hairlines:
searchBar.backgroundColor = <#... some color #>
searchBar.backgroundImage = [UIImage new];
Or if you just need a background image without the hairlines:
searchBar.backgroundImage = <#... some image #>
I have 0.5px black horizontal lines both on top and on the bottom of my UISearchBar. The only way I had so far to get rid of them is by setting its style to Minimal:
mySearchBar.searchBarStyle = UISearchBarStyleMinimal;
Solution for
XCode 10.1 Swift 4.2
I fixed this by adding a subview to the searchBar's view stack like so:
CGRect rect = self.searchBar.frame;
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(0, rect.size.height-2,rect.size.width, 2)];
lineView.backgroundColor = [UIColor whiteColor];
[self.searchBar addSubview:lineView];
Here, self.searchBar is an UISearchBar pointer of my controller class.
Swift 4.2:
controller.searchBar.layer.borderWidth = 1
controller.searchBar.layer.borderColor = UIColor(red: 255/255, green: 253/255, blue: 247/255, alpha: 1.0).cgColor
Answer based on Ayush's answer.
This is ridiculous to have to go through hoops and bounds for this little 1 px line. I've been googling around for a couple of hours to get rid of it. I tried combos of different answer to get it to work. When I came back here I realized Oxcug already had it but it's in Objective-C and that's not native for me.
Anyway here is the answer in Swift 5. If you want to have a color background inside the actual search textField I added that too.
// these 2 lines get rid of the 1 px line
searchBar.backgroundColor = .white
searchBar.backgroundImage = UIImage()
// this line will let you color the searchBar textField where the user actually types
searchBar.searchTextField.backgroundColor = UIColor.lightGray
Set the tableHeaderView to nil before putting your UISearchBar there.
If that does not help, try to cover it up. First add your search bar to a generic and appropriately sized UIView (say, "wrapper") as a subview, then
CGRect frame = wrapper.frame;
CGRect lineFrame = CGRectMake(0,frame.size.height-1,frame.size.width, 1);
UIView *line = [[UIView alloc] initWithFrame:lineFrame];
line.backgroundColor = [UIColor whiteColor]; // or whatever your background is
[wrapper addSubView:line];
[line release];
And then add it to the tableHeaderView.
self.tableView.tableHeaderView = wrapper;
[wrapper release];
This question has already been solved but maybe my solution can help someone else. I had a similar problem, except I was trying to remove the 1px top border.
If you subclass UISearchBar you can override the frame like this.
- (void)setFrame:(CGRect)frame {
frame.origin.y = -1.0f;
[super setFrame:frame];
self.clipsToBounds = YES;
self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, 1.0f);
}
Or if you would like to fix the bottom pixel you could do something like this, (untested).
- (void)setFrame:(CGRect)frame {
frame.origin.y = 1.0f;
[super setFrame:frame];
self.clipsToBounds = YES;
self.searchFieldBackgroundPositionAdjustment = UIOffsetMake(0, -1.0f);
}
Only for simplicity of the example are the clipsToBounds and searchFieldBackgroundPositionAdjustment in the setFrame.
Also the searchFieldBackgroundPositionAdjustment is only needed to re-center the search field.
UPDATE
It turns out that the tableView will shift 1px from updating the origin.y while the searchBar is active. It feels a little strange. I realized that the solution is as simple as setting, self.clipsToBounds = YES;
I used
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var searchBar: UISearchBar!
override func viewDidLoad() {
super.viewDidLoad()
searchBar.backgroundImage = UIImage() // Removes the line
And it worked like a charm :)
Warning. This is a hack. Would like to know a better, more official way.
You can use the pony debugger to figure out where in the subview hierarchy it is. I think the thing you are see is a private UIImageView called "separator"
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
for (UIView* view in self.searchBar.subviews) {
if (view.frame.size.height == 1 && [view isKindOfClass:[UIImageView class]]) {
view.alpha = 0;
break;
}
}
}
You can use
[[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:#"someImage.png"]forState:UIControlStateNormal];
on iOS 5+ to get rid of the line.
what worked with me is, setting the searchbar barTintColor as the navbar color
searchBar.barTintColor = UIColor.colorWithHexString(hexStr: "479F46")
after testing, it solves the problem in both iOS 10.x and 11.x
GIF :
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;
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.
I have a view with a scrollview. I use code to add labels to the scrollview. Since there's a lot of redundant code, I tried to move the label creation to a separate function that returns a UILabel. Here' that function:
- (UILabel *) f_MakeLabelWithL:(float)MyLeft T:(float)MyTop W:(float)MyWidth H:(float)MyHeight Align:(UITextAlignment)MyAlign
Font:(UIFont *)MyFont TextColor:(UIColor *)MyTextColor BGColor:(UIColor *)MyBGColor {
CGRect rect = CGRectMake(MyLeft, MyTop, MyWidth, MyHeight);
UILabel *label = [[[UILabel alloc] initWithFrame:rect] autorelease];
label.adjustsFontSizeToFitWidth = YES;
label.backgroundColor = MyBGColor;
label.font = MyFont;
label.numberOfLines = 0;
label.textAlignment = MyAlign;
label.textColor = MyTextColor;
return label;
}
I set the text of the label after it is returned. Or so I intended. In fact, a label that is told to have a blue background appears as a solid black rectangle. One with a clear background is entirely clear. Worse than that: the scrollview won't scroll, and attempting to make it do so crashes the app without any explanation in the debugger console.
Yet all this code works inline just fine and dandy.
Anyone know why?
Update: Putting the code inline fixed the display of the labels. But I was also using a function to create images:
- (UIImageView *) f_MakeImageWithL:(float)MyLeft T:(float)MyTop W:(float)MyWidth H:(float)MyHeight File:(NSString *)MyFile {
CGRect rect = CGRectMake(MyLeft, MyTop, MyWidth, MyHeight);
UIImageView *oImageView = [[[UIImageView alloc] initWithFrame:rect] autorelease];
NSString *s = [[Isystant f_DocumentsPath] stringByAppendingPathComponent:MyFile];
UIImage *oImage = [UIImage imageWithContentsOfFile:s];
[oImageView setImage:oImage];
oImageView.backgroundColor = [UIColor redColor];
oImageView.opaque = YES; // explicitly opaque for performance
return oImageView;
}
It was creating the images, but the frozen scroll/crash problem didn't go away until I put this code back inline also.
Looks to me like you are over-releasing the UILabel. You shouldn't have to release the label after adding it to your scrollview if it was never retained anywhere prior to that (and you've autoreleased it in the makeImageWithL method).
That's probably why it is working when you put it inline... because in that scenario, I would bet you are removing the autorelease, right?
-S
Do you retain your returned Label somewhere?
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