IOS development-blog export tool development tutorial (with source code)

Preface:

As a student, as an iOS developer, I personally browse information including blogs and choose more mobile terminals. However, csdn does not have a ready-made client (but there is a web version ).

I have seen an open-source export tool before, but it is based on the Windows platform. Only PDF format is exported. In addition, precise URLs are required for document export. Cannot export while browsing.

In addition, what I want to achieve is to browse my favorite articles without a network. In addition, you can manage your favorite articles by category.

The most important thing is that you can back up your articles. I have encountered such a problem that the csdn account password is leaked, causing others to log on to my account and post junk blog posts, resulting in my blog being banned for one day. At that time, my blog recorded 170 articles of my own learning experience without backups. I can imagine how much I was panicking at that time. We can see the importance of backing up your own articles.

For the above reasons, this blog export tool based on the iOS platform came into being.

Note:

This article is currently participating in the 2014 csdn blog competition. If you think it is helpful to you, I hope you can vote for it.

Voting link: http://vote.blog.csdn.net/Article/Details? Articleid = 31768677

Specific functions:

Allows you to browse csdn blogs online. The following types can be imported: single article, column, and all the articles specified by the author. Export methods include: (1) Browse blog/expert/column before export a ticket (2) Export a specified URL blog/expert/column Export Document Category Management Export Article Query Auto-layout of exported articles, adaptive image, and scalable

Running effect:

Here, if you just want to experience this application and look at the source code, you can download it from my Github. In addition, the first version has been uploaded to the App Store. Awaiting review.

Https://github.com/colin1994/csdnBlog.git

If you want to know the overall development process, please continue.We recommend that you download the source code..

You will learn:

Custom startup Animation Network Environment judgment (whether it is a Wi-Fi status) Interaction between IOS and JavaScript Custom HUD loading effect (non-traditional chrysanthemum) Basic UITableView list operations Fuzzy query of list keywords Basic image operationsNext we will analyze them one by one.
(1) custom boot animations are different from traditional LaunchImage modifications to load a static image as our welcome interface, I have simply scaled the image and gradually displayed the text.Relatively speaking, it is more beautiful and we can do more.
Open the AppDelegate. h file and declare a variable to display our view.

@property (strong, nonatomic) UIImageView *splashView;

Open the AppDelegate. m file and add the specific implementation process. 1. Add a startup Animation

// Add an animation [self. window makeKeyAndVisible]; splashView = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0,320, Screen_height)]; if ([UIScreen mainScreen] bounds]. size. height = 568) {[splashView setImage: [UIImage imageNamed: @ "bgBlog-568"];} else {[splashView setImage: [UIImage imageNamed: @ "bgBlog"];} [self. window addSubview: splashView]; [self. window layout: splashView]; [self defined mselector: @ selector (scale) withObject: nil afterDelay: 0.0f]; [self defined mselector: @ selector (showWord) withObject: nil afterDelay: 2.5f];

2. animation implementation

-(Void) scale {UIImageView * logo _ = [[UIImageView alloc] initWithFrame: CGRectMake (119, 88, 82, 82)]; logo _. image = [UIImage imageNamed: @ "csdnLogo"]; [splashView addSubview: logo _]; [self setAnimation: logo _];}-(void) setAnimation :( UIImageView *) nowView {[UIView animateWithDuration: 1.0f delay: 0.0f options: UIViewAnimationOptionCurveLinear animations: ^ {// code of the animation executed [nowView setFrame: CGRectMake (nowView. frame. origin. x-nowView. frame. size. width * 0.1, nowView. frame. origin. y-nowView.frame.size.height * 0.1, nowView. frame. size. width * 1.2, nowView. frame. size. height * 1.2)];} completion: ^ (BOOL finished) {// After completion, run the code [nowView removeFromSuperview] ;}];}-(void) showWord {UIImageView * word _ = [[UIImageView alloc] initWithFrame: CGRectMake (75, Screen_height-100, 170, 29)]; word _. image = [UIImage imageNamed: @ "word _"]; [splashView addSubview: word _]; word _. alpha = 0.0; [UIView animateWithDuration: 1.0f delay: 0.0f options: UIViewAnimationOptionCurveLinear animations: ^ {word _. alpha = 1.0;} completion: ^ (BOOL finished) {// After completion, run the code [NSThread sleepForTimeInterval: 1.0f]; [splashView removeFromSuperview];}

(2) check whether the network environment is in Wi-Fi status. Import the Reachability. h/. m file in the Wi-Fi folder. This is officially downloaded from Apple. A file used to determine the network environment. The reason why we need to determine whether a Wi-Fi environment is used is The exported article may use a large amount of traffic. We need to prompt the user to enable Wi-Fi for download.
1. Import the Reachability. h/. m file. 2. Add the header file.

#import "Reachability.h"            //Wi-Fi

3. Determine the Network Environment

If ([Reachability reachabilityForInternetConnection]. currentReachabilityStatus = ReachableViaWiFi) {// Add what you want to do}

(3) interaction between IOS and JavaScript UIWebView is one of the most common sdks for iOS. It has StringByEvaluatingJavaScriptFromStringThe method can embed javascript into the page. Through this method, we can interact with webpage elements in UIWebView in iOS.
Several common ways of use: 1. Obtain the url of the current page.

- (void)webViewDidFinishLoad:(UIWebView *)webView {    NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];}

2. Obtain the page title.

- (void)webViewDidFinishLoad:(UIWebView *)webView {     NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];   NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"]; }

3. Modify the value of the interface element.

NSString *js_result = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='Colin';"];

4. Form submission:

 NSString *js_result2 = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];

Of course, there are more features that you need to learn by yourself.
What we need to do with this tool is to get the main content of the blog and its title. Take exporting a single article as an example. Open a blog post and show the source code of the page. You can see the following content.

" Article_content"Corresponds to the csdn blog Body content. This is what we need during the export process. (You certainly don't want to embed advertisements in the exported articles...) so we can get what we need through two simple lines of code:

// Obtain the detailed content NSString * lJs = @ "document. getElementById (\" article_content \ "). innerHTML"; NSString * lHtml1 = [webView stringByEvaluatingJavaScriptFromString: lJs];

Likewise, Article TitleYou can obtain the following information:

// Obtain the title NSString * lJs2 = @ "document. getElementById (\ "article_details \"). getElementsByClassName (\ "article_title \") [0]. getElementsByTagName (\ "a \") [0]. innerText "; NSString * lHtml2 = [webView stringByEvaluatingJavaScriptFromString: lJs2];

Further, we can even Modify the image size of the displayed webpage

// Modify the image size if ([lHtml1 rangeOfString :@"

(4) custom HUD loading effect (non-traditional chrysanthemum) iOS's built-in loading effect is a circle of chrysanthemum... I think everyone knows. But to be honest, that is really ugly. What we need to do is to display an unclosed circle, and the background view is a bit darker to highlight the loading process. The effect is as follows:


1. Import the SVProgressHUD2. Add the header file.
# Import "SVProgressHUD. h" // load the display
3. display the HUD
// Display the HUD [SVProgressHUD showWithMaskType: SVProgressHUDMaskTypeGradient];
4. Remove the HUD
// Remove HUD [SVProgressHUD dismiss];


(5) basic operations on the UITableView list. See blogExportedList. m for details. This section focuses onSlide left to delete. 1. Enable the delete operation mode. 2. when responding to the delete operation, you need(1) remove from List (2) remove from data (3) Refresh list
// Delete-(UITableViewCellEditingStyle) tableView :( UITableView *) tableView editingStyleForRowAtIndexPath :( NSIndexPath *) indexPath {return parameters;}/* change the title of the delete button */-(NSString *) tableView :( UITableView *) tableView titleForDeleteConfirmationButtonForRowAtIndexPath :( NSIndexPath *) indexPath {return @ "delete";}/* Delete the function used */-(void) tableView :( UITableView *) tableView commitEditingStyle :( UITableViewCellEditingStyle) editingStyle forRowAtIndexPath :( NSIndexPath *) indexPath {if (editingStyle = inline) {// obtain the complete path, dictionary and array initialization NSArray * paths = NSDocumentDirectory, NSUserDomainMask, YES); NSString * documentsDirectory = [paths objectAtIndex: 0]; NSString * namePath = [documentsDirectory stringByAppendingPathComponent: @ "csdnInfo. plist "]; [blogArr removeObjectAtIndex: indexPath. row]; [blogArr writeToFile: namePath atomically: YES]; [nameList removeObjectAtIndex: indexPath. row]; [myTableView deleteRowsAtIndexPaths: [NSMutableArray arrayWithObject: indexPath] withRowAnimation: UITableViewRowAnimationAutomatic]; // Delete the cell of the corresponding data }}


(6) fuzzy search by list keywords is a common function. If you search for a simple keyword, you will probably. But what we need is fuzzy search. For example, when you enter I, o, and so on, you can find the corresponding data.
1. Import the query word list folder 2. Add the header file
// Query the sublist # import "DDList. h" # import "PassValueDelegate. h"
3. initialize the query list
// Query list initialization nameList = [[NSMutableArray alloc] init]; for (int I = 0; I <[blogArr count]; I ++) {[nameList addObject: [[blogArr objectAtIndex: I] objectForKey: @ "name"];} // initialize the query string _ searchStr = @""; // initialize the reminder VIEW _ ddList = [[DDList alloc] initWithStyle: UITableViewStylePlain]; _ ddList. _ delegate = self; [self. view addSubview: _ ddList. view]; [_ ddList. view setFrame: CGRectMake (30,108,200, 0)]; _ ddList. _ totalList = nameList;


4. For details about the response query, refer to the code. Here we emphasize one. When you click data, you need to automatically jump to the specified position. Otherwise, the query is useless ..
// Hide the reminder view-(void) setDDListHidden :( BOOL) hidden {NSInteger height = hidden? 0: 180; [UIView beginAnimations: nil context: nil]; [UIView setAnimationDuration :. 2]; [_ ddList. view setFrame: CGRectMake (30,108,200, height)]; [UIView commitAnimations];} // Singleton, returns the result in the selected reminder box # pragma mark-# pragma mark returns the data-(void) passValue :( NSString *) value {// if selected, modify the current search content to return results, and call the end function searchBarSearchButtonClickedif (value) {_ searchBar. text = value; [self searchBarSearchButtonClicked: _ searchBar];} else {}}/ /When the characters in the search box change, call # pragma mark-# pragma mark SearchBar Delegate Methods-(void) searchBar :( UISearchBar *) searchBar textDidChange :( NSString *) searchText {// if the search box contains content, update the prompt list if ([searchText length]! = 0) {_ ddList. _ searchText = searchText; [_ ddList updateData]; [self setDDListHidden: NO];} else {[self setDDListHidden: YES]; // otherwise hidden} // the text box is displayed, start searching-(BOOL) searchBarShouldBeginEditing :( UISearchBar *) searchBar {searchBar. showsCancelButton = YES; for (id cc in [searchBar subviews]) {if ([cc isKindOfClass: [UIButton class]) {UIButton * btn = (UIButton *) cc; [btn setTitle: @ "cancel" forState: UIControlStateNormal];}} Return YES;} // start the search response. -(Void) searchBarTextDidBeginEditing :( UISearchBar *) searchBar {searchBar. text = @ "";} // enter the end text box-(void) searchBarTextDidEndEditing :( UISearchBar *) searchBar {searchBar. showsCancelButton = NO; searchBar. text = @ "";} // If a prompt is displayed in the list, the search is complete, the search result is selected, and the highlighted-(void) searchBarSearchButtonClicked :( UISearchBar *) searchBar {[self setDDListHidden: YES]; // hide the prompt VIEW _ searchStr = [searchBar text]; // obtain the query result [searchBar resignFirstResponder]; // reclaim the keyboard for (int I = 0; I <[blogArr count]; I ++) // select {if ([[blogArr objectAtIndex: I] objectForKey: @ "name"] isw.tostring: _ searchStr]) {NSIndexPath * indexPath = [NSIndexPath indexPathForRow: I inSection: 0]; [myTableView reloadData]; [myTableView scrollToRowAtIndexPath: indexPath // rolling view atScrollPosition: animated: YES]; [myTableView selectRowAtIndexPath: indexPath // select highlight animated: YES scrollPosition: UITableViewScrollPositionMiddle] ;}}// Cancel search response-(void) searchBarCancelButtonClicked :( UISearchBar *) searchBar {[self setDDListHidden: YES]; [searchBar resignFirstResponder];}

(7) What we need to do here is to click an image to jump to another view, where the view allows regular editing of the image. Including image scaling... For details, see MRZoomScrollView. h/. m. The following describes the implementation method.
1. Add a gesture.
    // Add gesture,double tap zoom imageView.    UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self                                                                                action:@selector(handleDoubleTap:)];    [doubleTapGesture setNumberOfTapsRequired:2];    [imageView addGestureRecognizer:doubleTapGesture];

Our scale-down is implemented through gesture recognition. For example, if you double-finger drag, it means scale down. Double click refers to auto scaling, and single click refers to exit Image Browsing.
2. Respond to gesture operations
#pragma mark - Zoom methods- (void)handleDoubleTap:(UIGestureRecognizer *)gesture{    float newScale = self.zoomScale * 1.5;    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view]];    [self zoomToRect:zoomRect animated:YES];}- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center{    CGRect zoomRect;    zoomRect.size.height = self.frame.size.height / scale;    zoomRect.size.width  = self.frame.size.width  / scale;    zoomRect.origin.x = center.x - (zoomRect.size.width  / 2.0);    zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);    return zoomRect;}


So far, this simple tutorial is over.Hope, it will bring you some gains.
Ps:
This article is currently participating in the 2014 csdn blog competition. If you think it is helpful to you, I hope you can vote for it.
Voting link: http://vote.blog.csdn.net/Article/Details? Articleid = 31768677

On the way to learning, I will share with you.