Thursday, January 1, 2015

3 How to use Web View to work with static HTML content

From developer.apple.com: "A web view object displays web-based content. It is an instance of the UIWebView class that enables you to integrate what is essentially a miniature web browser into your app’s user interface. The UIWebView class makes full use of the same web technologies used to implement Safari in iOS, including full support for HTML, CSS, and JavaScript content..." 

A web view is not only useful for loading websites on the internet within your application but also can load local html files as well.


In this tutorial, we want to introduce you how to use a web view to display a static html string and some tasks with this string like change font type, font size, font color...


Here is a result of this tutorial:



May be we use this to display content of a page of book like the way of Kindle :)

1. Create a new project



2. Design Main.storyboard like this


In that, we have a web view to display html content, one toolbar contain a button to show the UIView when touch on it and a UIView(we call it fontView) contain some controls are buttons, tableview to work with html string on web view

3. Display html string on web view
- Create a html string sample:


1
NSString * htmlString = @"<br><b>this is text in bold</b><br><i>this is text in italic</i> this is normal text<br>This is the third line of string";

- Then create a css string and append those string into NSMutableString, finally call loadHTMLString to load this string into web view


1
2
3
4
5
6
7
8
9
NSString *css = [NSString stringWithFormat:
                 @"<html><head><style>body { background-color: transparent; text-align: %@; font-size: %fpx; color: %@; font-family: %@; -webkit-text-size-adjust: none;} a { color: #172983; } </style></head><meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0;\"><body>",
                 @"justify",
                 fontsize, @"black",[fontArray objectAtIndex:1]];
NSMutableString *desc = [NSMutableString stringWithFormat:@"%@%@<br><br>%@ ",
                         css,
                         htmlString,
                         @"</body></html>"];
[self.webviewContent loadHTMLString:desc baseURL:nil];


4. From fontView add some codes to process the html string on web view. We can change font type, font size and font color of that string

- For font size:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (IBAction)upFontSizeTap:(id)sender{
    if (fontsize < MAX_FONTSIZE) {
        fontsize += 1;
        NSString *str = [NSString stringWithFormat:@"document.body.style.fontSize = '%f'",fontsize];
        [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
    }
}
- (IBAction)downFontSizeTap:(id)sender{
    if (fontsize > MIN_FONTSIZE) {
        fontsize -= 1;
        NSString *str = [NSString stringWithFormat:@"document.body.style.fontSize = '%f'",fontsize];
        [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
    }
}

- For font type: we choose font type show on table view


1
2
3
4
5
#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *str = [NSString stringWithFormat:@"document.body.style.fontFamily = '%@'",[fontArray objectAtIndex:indexPath.row]];
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str]; 
}

You can also get all system fonts by this code:


1
2
3
4
5
6
for(NSString* family in [UIFont familyNames]) {
        NSLog(@"%@", family);
        for(NSString* name in [UIFont fontNamesForFamilyName: family]) {
            NSLog(@"  %@", name);
        }
}

- For font color:


1
2
3
4
5
6
7
8
9
10
- (IBAction)chooseBG1Tap:(id)sender{
    self.photoImageView.image = [UIImage imageNamed:@"whitebg.png"];
    NSString *str = @"document.body.style.color = 'black'";
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
}
- (IBAction)chooseBG2Tap:(id)sender{
    self.photoImageView.image = [UIImage imageNamed:@"blackbg.png"];
    NSString *str = @"document.body.style.color = 'white'";
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
}

5. Run Demo Application



Touch on button on toolbar to show font view and touch on buttons of font view to change style of string on web view




You can download all source codes of this tutorial from here





Thursday, May 9, 2013

1 Some ebooks to develope android application with some difference ways.


There are many types of Android application and of course we are have many ways to develope them. This topic is created to share some ebooks to develope Android apps with some difference ways.

Tuesday, April 2, 2013

4 How to use preferences in android

From Developer.android.com: “android.preference package provides classes that manage application preferences and implement the preferences UI. Using these ensures that all the preferences within each application are maintained in the same manner and the user experience is consistent with that of the system and other applications.
The preferences portion of an application should be ran as a separate Activity that extends the PreferenceActivity class. In the PreferenceActivity, a PreferenceScreen object should be the root element of the layout. The PreferenceScreen contains Preference elements such as a CheckBoxPreference, EditTextPreference, ListPreference, PreferenceCategory, or RingtonePreference..."


In this tutorial we want to introduce you how to use some preference elements with their tasks in a setting activity externs the PreferenceActivity class. Those are some simple tasks setting for backup data like the photo shows in below:


1. Create layout file for preference settings
To make the setting interface we create a preference.xml file in folder res/layout/xml. All xml code to make that show below:

Thursday, March 28, 2013

24 How to create custom Date Time Picker in Android

By the original SDK, you can choose the time and date for your app by using DatePicker, TimePicker and Date - TimePickerDialog but there is nothing built into Android to choose Date and Time in the same time like such a DateTimePicker. In this tutorial, i try to create a custom DateTimePicker that user can choose both date and time at the same time.
Here is a result of this tutorial:



This project is developed in Eclipse 4.2.0.
1. Make application interface:
The main layout of this app demo is very simple layout. It have one edit test, one button. When user touch on the button the DateTimePicket will show for choose the date and time, the result will be show on edit text. Here is some xml code to make main layout:

Thursday, February 28, 2013

0 The best tutorial for using layout in Android


For everybody unlucky when searching and access to my blog with a "modest title". :D I don't do any thing to make it. But i'd like to introduce to you a fantastic tutorial about how to using layout in Android - the basic  thing that every beginner have to learn. No need to speak alot. Here is the link:

http://mobile.tutsplus.com/tutorials/android/android-layout/

That's a famous page, but i hope this help to anyone haven't known about it.