Three20 software engine self-made IOS top Status Bar (6)

Source: Internet
Author: User
Three20 software engine self-made IOS top status bar details


If the original Yusong Momo article is reprinted, please note: Reprinted to my independent domain name blog Yusong Momo program Research Institute, Original address: http://www.xuanyusong.com/archives/652

What is the IOS status bar? It is the display signal and battery area on the top of the IOS device screen. The default height of the status bar is 20 pixels. What is the role of the status bar in software development? Online applications can be used to automatically help users download data. We recommend that you display the data in the status bar. The status bar can be hidden and displayed through a program, or the loading animation can be added on the status bar to make users feel that they are currently in the download status.Next we will first learn the simplest one, that is, add the downloaded loading animation on the status bar.As shown in, in the status bar at the top of the screen, the animation loading icon appears next to the signal icon, and it is still circling. In addition, this article applies to General IOS software development and three20 software development.




The code for displaying and hiding animations is simple, as shown below:

// Enable the status bar animation [[uiapplication sharedapplication] setnetworkactivityindicatorvisible: Yes]; // disable the status bar animation [[uiapplication sharedapplication] setnetworkactivityindicatorvisible: No];


Such an animation is indeed a little limited and cannot modify the animation position. We can take advantage of the entire status bar. Write a new view to overwrite the original status bar view and write the required items in the new view. Before learning it, we should first learn how to hide and display the status bar.


The code for displaying and hiding the status bar is simple, as shown below:

// Hide the status bar [[uiapplication sharedapplication] setstatusbarhidden: Yes withanimation: Yes]; // display the status bar [[uiapplication sharedapplication] setstatusbarhidden: No withanimation: Yes];

Setstatusbarhidden: displays and hides the status bar.

Withanimation: Indicates whether to play the show and hide transition animation.


Don't be happy too early. It just hides the status bar, so there will still be 20 pixels white on the top of the screen, in order to make the display more thorough, you need to reset the display area of the entire window and the position of the title bar:

// Hide the status bar [[uiapplication sharedapplication] setstatusbarhidden: Yes withanimation: Yes]; // reset the display area of the window [[uiapplication sharedapplication]. keywindow setframe: cgrectmake (0, 0,320,480)]; // reset the position displayed in the title bar [self. navigationcontroller. navigationbar setframe: cgrectmake (0, 0,320, 44)];

As shown in, the status bar has been completely removed, including the White Bar on the top. Is it amazing?



Next we will learn the key content of this article and rewrite the content of the status bar. As shown in, the percentage of read progress that has been written to the top of the status bar. To improve the effect, a progress bar and the percentage of download progress will be drawn at the top of the status bar. On the left side of the status bar, you can draw an animation to read data. A circle keeps turning. Ga ~




The following describes the code in detail.

Viewcontroller. h

# Import <three20/three1_h> @ interface viewcontroller: ttviewcontroller {// view of the download progress display uitextview * textview; // The loading animation view at the top of the status bar uiactivityindicatorview * activity; // timer nstimer * timer; // application handle uiapplication * app; // count int timecount;} @ end

Viewcontroller. m

# Import "viewcontroller. H "@ implementation viewcontroller-(void) viewdidload {[Super viewdidload]; // set the title bar text self. title = @ "Yu Song Momo Software Development"; // sets the view background color [self. view setbackgroundcolor: [uicolor blackcolor]; // create an image view ttimageview * imageview = [[[ttimageview alloc] initwithframe: cgrectmake (100, 50,120,120)] autorelease]; // set the image resource imageview displayed in the Image view. defaultimage = ttimage (@ "Bundle: // 0.jpg"); // Add the image View to the entire view [self. view addsubview: imageview]; // nsarray * titles = [[nsarray alloc] initwithobjects: @ "Hide status bar", @ "show status bar ", @ "Update Status Bar", nil]; for (INT I = 0; I <[titles count]; I ++) {// create common button uibutton * button = [uibutton buttonwithtype: 1]; // set the button position button. frame = cgrectmake (0,200 + I * 40,320, 30); // set the button's real text [Button settitle: [titles objectatindex: I] forstate: uicontrolstatenormal]; // set the button to mark the button. tag = I; // after the set button is clicked, bind the response method [Button addtarget: Self action: @ selector (buttonpressed :) forcontrolevents: uicontroleventtouchupinside]; // Add the button to the view [self. view addsubview: button] ;}// obtain the application handle APP = [uiapplication sharedapplication] ;}- (void) buttonpressed :( ID) buttonid {// obtain the clicked button uibutton * button = (uibutton *) buttonid; Switch (button. tag) {Case 0: // annotation 1 [App setstatusbarhidden: Yes withanimation: Yes]; [App. keywindow setwindowlevel: uiwindowlevelstatusbar]; [App. keywindow setframe: cgrectmake (0, 0,320,480)]; break; Case 1: // annotation 2 [App setstatusbarhidden: No withanimation: Yes]; [App. keywindow setwindowlevel: uiwindowlevelstatusbar]; [App. keywindow setframe: cgrectmake (0, 20,320,460)]; break; Case 2: // annotation 3 [App setstatusbarhidden: No withanimation: Yes]; [App. keywindow setwindowlevel: uiwindowlevelstatusbar]; [App. keywindow setframe: cgrectmake (0, 20,320,460)]; [self initialize mselector: @ selector (startupdate) withobject: Nil afterdelay: 0.4]; break;} // annotation 4 [self. navigationcontroller. navigationbar setframe: cgrectmake (0, 0,320, 44)];}-(void) dealloc {// release tt_release_safely (textview); tt_release_safely (activity); tt_release_safely (timer ); tt_release_safely (APP); [Super dealloc];}-(void) startupdate {If (timer = nil) {// top Text View textview = [[uitextview alloc] initwithframe: cgrectmake (0,-25,320, 25)]; [textview setbackgroundcolor: [uicolor blackcolor]; [textview settext: @ "Start Update"]; [textview settextcolor: [uicolor whitecolor]; [textview settextalignment: uitextalignmentcenter]; [textview setfont: [uifont systemfontofsize: 15]; [App. keywindow addsubview: textview]; // annotation 5 [uiview beginanimations: @ "anim1" context: Nil]; [uiview setanimationduration: 1.0]; textview. alpha = 0.0f; textview. alpha = 1.0f; [uiview commitanimations]; [textview release]; // annotation 6 timer = [nst1_scheduledtimerwithtimeinterval: 0.1 target: Self selector: @ selector (handletimer :) userinfo: Nil repeats: yes]; // start playing the loading animation [self addloading];}-(void) handletimer: (nstimer *) t {// start counting, if this method is not entered at a time + + timecount ++; // If the counter is smaller than 100, it indicates that the download is not completed if (timecount <= 100) {// The display percentage nsstring * text = [nsstring stringwithformat: @ "read progress %: % d", timecount]; [textview settext: text];} else {// If the counter is greater than 100, the download is completed. [textview settext: @ "read completed"]; timecount = 0; // Delete time timer [self removetimer]; // Delete read animation [self removeloading]; // annotation 7 [uiview beginanimations: @ "anim" context: Nil]; [uiview setanimationduration: 1.0]; textview. alpha = 1.0f; textview. alpha = 0.0f; [uiview commitanimations] ;}}- (void) addloading {// create loading animation view activity = [[uiactivityindicatorview alloc] callback: uiactivityindicatorviewstylegray]; // set the style of the animation view. Here it is set to a white activity. activityindicatorviewstyle = uiactivityindicatorviewstylewhite; // set the activity in the area it displays. frame = cgrectmake (0,-18, 20, 18); // Add the view to the window [App. keywindow addsubview: activity]; // starts to play the animation [activity startanimating]; // releases [activity release];}-(void) removeloading {// ends the animation [activity stopanimating]; // Delete the animation view [activity removefromsuperview];}-(void) removetimer {// stop time timer tt_invalidate_timer (timer ); // equivalent to the above method // stop time timer // [Timer invalidate]; // make it equal to nil // timer = nil;} @ end

Note 1: setstatusbarhidden: Yes sets the hide of the status bar. After hiding the status bar, you need to reset the level and display area of the window to make the original view of the bottom move up automatically. You can use the setwindowlevel method to set the window level. There are three types of window levels: normal window, warning window, and status bar window. So here we set the window level to uiwindowlevelstatusbar (status bar window ). After the window level is set, you need to reset the display area of the window, and then reset the display area of the window to cgrect (320,480,), indicating that the new window will fill the entire screen of the mobile phone.

Note 2: The display of the status bar and the hiding of the status bar are the same principle. setstatusbarhidden: No sets the status bar to be visible and continues to set the level and display area of the window. The height of the status bar is 20, so now the display area of the window is set to cgrect (320,460,). The view can be regarded as 20 pixels without the status bar, and the view will fill the entire screen below.

NOTE 3: here we need to overwrite the New View to the status bar. First, we need to hide the status bar. Because the animation of the hidden status bar is enabled, therefore, after the status is completely hidden, the new view overwrites the status bar with a latency of 0.4 milliseconds. The performselector method is used. Parameter 1 indicates the method to be executed after a delay period. Parameter 2 indicates an object attached, and parameter 3 indicates the delay period. The startupdate method is executed after a delay of 0.4 milliseconds. Download and Update views are all written in this method.

Note 4: You must reset the position of the title bar. Otherwise, the title bar may be displayed due to a deviation after you modify the display area of the window.

Note 5: implement the effect of switching between views to fade in and out. The beginanimations method indicates that an animation is about to be played. The setanimationduration method indicates that the length of the animation is set, textview. alpha indicates that the view transparency is set. Here, two transparency values are set. 0.0 indicates that the view is completely transparent, and 1.0 indicates that the view is completely opaque. Of course, you can continue to set more view changes, the meaning of this animation is that the real view is completely transparent to completely opaque within 1 second. The final execution of the [uiview commitanimations] method is the real start to play the animation. Remember that the beginanimations and commitanimations methods must be paired. Any changes to the view must be written between the two methods.

Note 6: nst indicates the time counter. Its principle is to open a new sub-thread in the program, and the sub-thread will be executed every other time. This section uses it to simulate the time when users download data. This Code indicates that the program will execute the handletimer method once every 0.1 seconds. In the handletimer method, update the text displayed in the status bar view and download the percentage. After the data is downloaded, close the view, play the fade-in and fade-out animation, and restore the original status bar.


Finally, let's talk about the macro definition of three commonly used release objects in three20:

#define TT_RELEASE_SAFELY(__POINTER) { [__POINTER release]; __POINTER = nil; }#define TT_INVALIDATE_TIMER(__TIMER) { [__TIMER invalidate]; __TIMER = nil; }// Release a CoreFoundation object safely.#define TT_RELEASE_CF_SAFELY(__REF) { if (nil != (__REF)) { CFRelease(__REF); __REF = nil; } }

Tt_release_safely (): release an object and assign it to nil.

Tt_invalidate_timer (): Stop Time counter, and assign this counter to nil.

Tt_release_cf_safely: Check whether the object is nil. if the object is not released for nil, the value is nil.


Finally, you are welcome to discuss three20 software development with Momo. If you cannot see it clearly, Momo will download the source code from this chapter. I hope you can learn it together ~. Wow ~ Momo is willing to study with you and make progress together ~!!!


: Http://www.xuanyusong.com/archives/652
(The three20 environment must be set up before it can be run ~ Because three20 is a reference load, so the program path is my local, please forgive me! Or you can change your three20 path to the same path as I can directly run it. My path is: User-> share-> three20 ).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.