Custom tableview list of three20 software engine (2)

Customized tableview for three20 software engine


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/624


In this tutorial, we will first briefly introduce some three20's own tttableview component that provides the list for plotting. It inherits from tableview and encapsulates the list component once again, encapsulating many nice list styles. This part is simple and has been officially encapsulated into the sample package in the three20 project package. Three20 download and install the configuration environment. Read the previous blog. Open the three20 folder, select the samples-> ttcatalog project, and open it. The style of all related lists is written in

As shown in the tableitemtestcontroller class, the general style is here.

As the system provides good services, it cannot perfectly meet the development needs. Therefore, it is necessary to use the custom list style during development. Customization is always flexible. programmers can manually modify their styles. This article will focus on the use of custom list styles in three20.

Create a new iOS project and add three20 to the project. If you have any friends, please read the previous article. Because tttableview is required to draw a list, a controller class is created to inherit tttableviewcontroller.

#import <Three20/Three20.h>#import "TableViewDataSource.h"@interface MovieController : TTTableViewController{}@end

Execute some list initialization operations in viewdidload. Here, it is worth noting that self. tableview. allowsselection = yes; this line of code is very important. Without this line of code, it indicates that when an element in the list is selected, the color of this element will not be selected, after you click a list in iOS development, the background color of the list turns blue. By default, allowsselection = yes is used to draw the list using the system method. You need to manually set allowsselection = yes for the custom list.

Create a list in the createmodel method. This method is called by the system to create a list component. We need to override the datasource component. All list resources are written in the tableviewdatasource method.

The didselectobject method is used to process the selected event of an element in the list. Click any element here to open the Baidu page. The element ID is indexpath. row. The data type is integer.

# Import "moviecontroller. H "# import" menucontroller. M "# import" tableitem. H "# import" tableitemcell. H "# import" tableviewdatasource. H "@ implementation moviecontroller-(void) viewdidload {[Super viewdidload]; // The title bar content self. title = @ "Yu Song Momo test list"; // enable the custom height self in the list. variableheightrows = yes; // enable the list Click Event self. tableview. allowsselection = yes;}-(void) createmodel {// start to create the list self. datasource = [[[tableviewdatasource alloc] init] autorelease];}-(void) didselectobject :( ID) object atindexpath :( nsindexpath *) indexpath {// click an item in the list to open the webpage ttnavigator * navigator = [ttnavigator navigator]; [navigator openurlaction: [tturlaction actionwithurlpath: @ "www.baidu.com"]; // obtain the ID nslog (@ "% d", indexpath. row);} @ end

List resources:

#import <Three20/Three20.h>@interface TableViewDataSource : TTListDataSource@end

Create the list Resources in the init method. image0 and image1 are two textures. When a list resource is created, all list resources are written to the tableitem class. This class is used to record data in the list. Initialize the data in each list element in the itemwithtitle method. The data here is the name, texture, and background color of each element in the list.

The tableview method starts to draw the list. The number of elements in the list will be executed several times, and all the data in the list will be drawn on the screen in a loop. Tableitemcell is a very important class used to draw elements. This class is mainly used to draw a list. It specifies the list style, then retrieves data from the tableitem class, and finally draws it on the screen layer by layer with its style.

# Import "tableviewdatasource. H "# import" tableitem. H "# import" tableitemcell. H "@ implementation tableviewdatasource-(ID) Init {// create a list resource if (Self = [Super init]) {uiimage * image0 = [uiimage imagenamed: @" 0.jpg"]; uiimage * image1 = [uiimage imagenamed: @ "1.jpg"]; self. items = [nsarray arraywithobjects: [tableitem itemwithtitle: @ "Movie 1" Image: image0 backcolor: [uicolor redcolor], [tableitem itemwithtitle: @ "movie 2" Image: image1 backcolor: [uicolor purplecolor], [tableitem itemwithtitle: @ "movie 3" Image: image0 backcolor: [uicolor redcolor], [tableitem itemwithtitle: @ "movie 4" Image: image1 backcolor: [uicolor purplecolor], [tableitem itemwithtitle: @ "movie 5" Image: image0 backcolor: [uicolor redcolor], [tableitem itemwithtitle: @ "movie 6" Image: image1 backcolor: [uicolor purplecolor], nil];} return self;}-(class) tableview :( uitableview *) tableview cellclassforobject :( ID) object {// draw list if ([object iskindofclass: [tableitem class]) {return [tableitemcell class];} return [Super tableview: tableview cellclassforobject: object];} @ end

The following is the resource type tableitem in the list.

# Import <three20/three1_h> @ interface tableitem: tttablelinkeditem {// The text nsstring * _ title of the list element; // The texture map of the list element uiimage * _ image; // uicolor * _ backcolor;} @ property (nonatomic, copy) nsstring * Title; @ property (nonatomic, copy) uiimage * image; @ property (nonatomic, copy, copy) uicolor * backcolor; // initialization assignment + (ID) itemwithtitle :( nsstring *) Title image :( uiimage *) image backcolor :( uicolor *) backcolor; @ end

The initialization method is intemwithtitle. All resources of each list element are received in the tableviewdatasource method. The resources include text information, texture information, and background color. Then, the tableitem object is returned, the list is drawn from the tableviewdatasource class.

# Import "tableitem. H "@ implementation tableitem @ synthesize Title = _ title, image = _ image, backcolor = _ backcolor; + (ID) itemwithtitle :( nsstring *) Title image :( uiimage *) image backcolor :( uicolor *) backcolor {// initialize tableitem * Item = [[[self alloc] init] autorelease]; item. title = title; item. image = image; item. backcolor = backcolor; return item;}-(ID) Init {If (Self = [Super init]) {_ Title = nil; _ image = nil; _ backcolor = nil ;} return self;}-(void) dealloc {[Super dealloc]; tt_release_safely (_ title); tt_release_safely (_ image); tt_release_safely (_ backcolor);} @ end

Tableitemcell is the style class of the list.

# Import <three20/three1_h> @ interface tableitemcell: tttablelinkeditemcell {// name of the element uilabel * _ titlelabel; // texture of the element uiimageview * _ imageview;} @ end

TIn the ableview method, set the height of each element in the list.

The initwithstyle method initializes the elements in the list. Here, a text box and Image view are created and added to the entire window.

In the layoutsubviews method, set the display area of the element component. The coordinates of element creation are relative coordinates, relative to the upper left corner of each list element.

The setobject method is very important. The data displayed in the list will be obtained here before the list is drawn cyclically. The parameter is the data in the current list element, here, we can get the text and textures displayed on the screen, as well as the background color, and set them all to the window view.

This method is used to set the selected color of the button. Here, the selected color of the button is set to blue. You can also modify the color here.

Self. selectionstyle = uitableviewcellselectionstyleblue;

# Import "tableitemcell. H "# import" tableitem. H "@ implementation tableitemcell + (cgfloat) tableview :( uitableview *) tableview rowheightforobject :( ID) item {// return 80.0 of the height of each list element;}-(ID) initwithstyle :( uitableviewcellstyle) style reuseidentifier :( nsstring *) identifier {// initialization list if (Self = [Super initwithstyle: inclureuseidentifier: identifier]) {_ item = nil; _ titlelabel = [[uilabel alloc] Initwithframe: cgrectzero]; // Add the text box to the window [self. contentview addsubview: _ titlelabel]; _ imageview = [[uiimageview alloc] initwithframe: cgrectzero]; // Add the image View to the window [self. contentview addsubview: _ imageview];} return self;}-(void) dealloc {tt_release_safely (_ titlelabel); tt_release_safely (_ imageview); [Super dealloc];} (void) layoutsubviews {[Super layoutsubviews]; // sets the components in the list, and the component's drawing area [_ imageview setframe: cgr Ectmake (,)]; [_ titlelabel setframe: cgrectmake (, 0,)];}-(ID) object {return _ item;}-(void) setobject :( ID) object {If (_ item! = Object) {[Super setobject: object]; // get the data tableitem * Item = object in the list; // draw it on the screen [_ titlelabel settext: item. title]; [_ titlelabel setbackgroundcolor: item. backcolor]; [_ imageview setimage: item. image]; [_ imageview setbackgroundcolor: item. backcolor]; // set the background color of the list self. contentview. backgroundcolor = item. backcolor; // set the selected color of the list self. selectionstyle = uitableviewcellselectionstyleblue; }}@ end

Finally, specify the moviecontroller class in the important entry class.

# Import "appdelegate. H "# import" moviecontroller. H "@ implementation appdelegate @ synthesize window = _ window;-(void) dealloc {[_ window release]; [Super dealloc];}-(bool) Application :( uiapplication *) application didfinishlaunchingwitexceptions :( nsdictionary *) launchoptions {// create a navigation bar ttnavigator * navigator = [ttnavigator navigator]; navigator. persistencemode = ttnavigatorpersistencemodeall; navigator. windo W = [[[uiwindow alloc] initwithframe: ttscreenbounds ()] autorelds]; tturlmap * map = navigator. urlmap; [map from: @ "*" toviewcontroller: [ttwebcontroller class]; [map from: @ "TT: // movieview" tosharedviewcontroller: [moviecontroller class]; if (! [Navigator restoreviewcontrollers]) {[navigator openurlaction: [tturlaction actionwithurlpath: @ "TT: // movieview"];} return yes;} @ end

The elements in the custom list have caught our eye. After selecting an element in the list, the background color is blue. Click it to open Baidu's webpage. With the knowledge in this chapter, you can use three20 to create a custom list. Wow !!!!!

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/624
(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 ).