How to: transparent background & rounded corners on a webView
Having a web view is a great way to display a lot of text or similar in your app.
The result will be similar to the image to the left, the webview is transparent and has rounded corners. It will look different in your own apps because this is just one of the views in one of my apps.
UIwebViews aren’t just for looking at a webpage online – but is also used for displaying an html file that you have created, or want including in your app. This might be for additional information or similar. Also you may want to have rounded corners on your web view so it fits in with your app design.
The following explains how to do both:
ADDING TRANSPARENCY TO A WEBVIEW
1. Create your HTML file and in that file add the following code which tells the file that we want to have a transparent background:
<body style=”background-color:transparent”>
2. Go to your .m file where the webView is and where ever it is declared you need to add the following – in my example my UIWebView is called aboutWebView.
aboutWebView.opaque = NO;
aboutWebView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];
This will create the transparency for the web view. You can alter those values so that the level of transparency is altered.
CREATING ROUNDED CORNERS ON A WEBVIEW
In this example my webView is called adviceWebView so you will have to change that value to the name of your own webView. I have also added the code from the above example so our webview is also transparent. You can choose things such as the colour of the line as well as the thickness of it, through defining the setBorderColor: and setBorderWidth: as in the example below. The result of the code is shown in the above image.
You need to add the Quartz Framework to your project or it won’t work, so to do that just add the Quartz file to your .f file:
#import <QuartzCore/QuartzCore.h>
// Round corners using CALayer property
[[adviceWebView layer] setCornerRadius:10];
[adviceWebView setClipsToBounds:YES];
// Create coloured border using CALayer property
[[adviceWebView layer] setBorderColor:[[UIColor colorWithRed:1.00 green:1.00 blue:1.00 alpha:1] CGColor]];
[[adviceWebView layer] setBorderWidth:2.75];
No related posts.
1 Comment
Pingbacks