iOS SDk：创建一个自定义文本输入框

创建一个好的应用不是一件简单的事，一般来说，最难做的是创建一个内容丰富，吸引人的界面。这个教程教你如何创建一个自定义的文本输入框。 

 

启动Xcode，创建一个Single View Application 

 

1.创建项目 

 

启动Xcode，创建一个Single View Application 

给项目命名，我的命名是CustomViewsDemo。 勾选Use Automatic Reference Counting。 

 最后，选择一个文件夹来保存这个项目，然后点击创建： 

 

 2.配置界面 

 

步骤1 

 

点击 ViewController.xib，打开Interface Builder。 首先反选Autolayout（这么做的原因是让这个demo可以在iOS 6之前的系统运行，Autolayout是iOS 6的功能）： 

 

--如果Utilities面板看不到的话，找到Xcode工具栏，点击Utilities 按钮 。 

 

--点击File Inspector. 

 

--下拉框，找到Use Autolayout选项，反选。 

 

 步骤2

 

点击Attributes Inspector ，在Simulated Metrics标签下设置Size为None，这么做可以让项目可以在3.5寸的显示屏上运行。 

 步骤3 

 

添加一个UIToolbar到视图，将其放置在底部。 

 

 

--添加一个Flexible Space Bar Button item到默认的Bar Button Item左侧，让它留在工具栏左侧。 

 

--设置bar button item的名字。 

 

--设置button的颜色为：（R：51，G：51，B：51）。 

 

--设置工具栏toolbar的颜色为：（R：0，G：0，B：51）。 

 

步骤4 

 

下一步，添加一个 UITableView，放到剩下的空间里。设置Style样式为Grouped，设置Separator为Single Line。 

 

同时选择背景颜色为：(R: 51, G: 51, B: 51)。现在你的界面看上去会是这个样子: 

 

 3.IBOutlet 属性以及 IBAction 用法 

 

到下一步之前，我们要先把UITableView链接到一个IBOutlet属性里，然后给工具栏的bar button item（即Add item按钮）创建一个IBaction方法。可以这么做，在Interface Builder 

 

中，点击Xcode工具栏上的编辑控件的中间的按钮来隐藏Assistant Editor。 

 

 

步骤1， 

 

按住Ctrl键右击Table View，然后点击New Referencing Outlet，把它拖拽到Assistant Editor里，这样做就插入了一个新的IBOutlet属性。 

 

下一步给这个新属性命名，我给它命名为table。 

 

 步骤2 

 

按住Ctrl键右击 Bar Button item，点击Sent Action的Selector，把它拖拽到Assistant Editor，这么做就创建了一个IBAction。 

 

 

 给这个方法命名。我给他命名为addItem。 

 

 

 4. UItableView用法 

 

 步骤1 

 

为了使我们的table正确的工作，这一步我们需要调用一个minimum required table view方法。在这么做之前，首先我们需要设置table view 

 

点击 ViewController.h 文件，定义 @interface头文件 

 

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> 

 

进入了ViewController.m文件，在viewDidLoad下加入以下代码： 

 

// Set the tableview's delegate and datasource. 

 

[_table setDelegate:self];

 

[_table setDataSource:self]; 

 

步骤2 

 

一个NSMutableArray序列会成为我们列表项目的来源（表的内容）。首先，我们需要声明和初始化这个序列。进入 ViewController.m文件，找到最开始的部分，在 @interface 部分加上以下代码：

 

@interface ViewController () 

 @property (nonatomic, strong) NSMutableArray *sampleDataArray; 

 @end 

 

同时在viewDidload加上：

 

// Initialize the sample data array. 

 _sampleDataArray = [[NSMutableArray alloc] init]; 

 

步骤3： 

 

接入table view的methods。首先加上sections的编号

 

-(int)numberOfSectionsInTableView:(UITableView *)tableView{ 

 // Set the number of sections inside the tableview. We need only one section. 

 return 1; 

 }

然后设置序列的总数。总数和_sampleDataArray序列中的全部对象数相同

 

-(int)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ 

 // The number of rows is equal to the number of the sample data in our tableview. 

 return [_sampleDataArray count]; 

 } 

然后设置每列的高度：

 

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 

 // Set the row height. 

 return 45.0; 

 } 

 

现在，设置我们的view。在代码里面你可以找到所有view的定制信息。有详细注释。也可以根据你的想法进行定制：

 

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 

 static NSString *CellIdentifier = @"Cell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];