Custom Editing Control for UITableViewCell , like iPhone Mail Appliation

-
Dear Friends,

Today, while I was developing a application, I found that I am in need to a custom Editing control. Custom Editing Control are displayed on the left side of the screen. IOS sdk provides two of such kind which we use most of the time UITableViewCellEditingStyleDelete & UITableViewCellEditingStyleInsert .


I will be now discussing the third one, UITableViewCellEditingStyleNone. This can be used to design our own Editing control. How this is going to look like can be fond from below screen shot.




Steps to achieve this can be found below:
STEP 1: Create A subclass of UITabelViewCell
First create a subclass of UITableViewCell, where when the cell object is initialised we will have to add a UIButton to its view.

You will also need a offset variable, whose value will be 32.0 in all iPhones.

-(id) initWithCoder:(NSCoder *)aDecoder{
    
    self=[super initWithCoder:aDecoder];
    
    if(self){
        offset=32.0;
        btn=[[UIButton alloc] initWithFrame:CGRectMake(-(offset/2.0)-(25.0/2.0),  (self.contentView.frame.size.height/2.0)-(25/2.0), 25  , 25)];
        
        [btn setImage:[UIImage imageNamed:@"off"] forState:UIControlStateNormal];
        [btn setImage:[UIImage imageNamed:@"on"] forState:UIControlStateSelected];
        [btn addTarget:self action:@selector(buttonSelected:) forControlEvents:UIControlEventTouchUpInside];
        [btn setAdjustsImageWhenHighlighted:NO];
        [self addSubview:btn];
    }
    return self;
}

In the above code you will see I have set image for Normal and selected state. Also, AdjustingImage when highlighted has been turned off, to get similar effect of controls provided by IOS sdk(Insert and Delete).


After this you will need to change the button frame when it starts editing. So this can be done in layoutSubviews method as listed below

-(void) layoutSubviews{
    [super layoutSubviews];

    if(self.isEditing){
        btn.frame=CGRectMake((offset/2.0)-(25.0/2.0),  (self.contentView.frame.size.height/2.0)-(25/2.0), 25  , 25);
        
    }else{
        btn.frame=CGRectMake(-(offset/2.0)-(25/2.0),  (self.contentView.frame.size.height/2.0)-(25/2.0), 25  , 25);
        
    }
}

Since, we have a button click event, so that is captured in a buttonSelected: method.So if its selected a checkmark Image will appear other wise a gray shaded image.

-(void) buttonSelected:(UIButton*) sender{
    [sender setSelected:!sender.isSelected];  
}

STEP 2:  Make table enter in editing mode.
In the controller, I have added a "Edit" bar button to the top right side. When it is clicked you only need to put the table in editing mode, with UITableView editing style as none.

-(UITableViewCellEditingStyle) tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewCellEditingStyleNone;
}

//Table enters in Editing Mode
-(IBAction) editTable:(id) sender{
    [self.table setEditing:!self.table.editing animated:YES];
}


That's it you have created your own custom control.


Where do I go from here?
You can have a delegate called from buttonSelected: method in UITableViewCell method. This delegate will be implemented by your UIViewController.

This can save the state of the cells , which are clicked. Saving the state is necessary since we are reusing the cells in a UITableView. So in your cellForRowAtIndexPath: you can set the state of the cells.

After having the above thing, you can have a Delete button in the NavBar , to left most side, to delete multiple entries from a UITableView in edit-mode.













Comments

Post a Comment

Popular posts from this blog

hitTest on iOS to identify the view being hit

-
Image
HitTest on iOS Use hitTest, to identify the view being tapped. The below method allows us to identify the view being selected. We can use it, to identify the view from which we would like to hide the touch events or identify the view we are interested into. Example: In the below case when we tap on Black View we can show an alert like "Black View tapped!" , if we tap on Red View , we can show an alert  "You are not allowed to tap on Red View" .  override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? { } Here is a simple implementation of the method, to identify the view being hit. View hierarchy being used is listed below:- Blue(parent) - Red(child) - Green(child) - Yellow (child) - Orange (child) - Black (child) - White (child) So lets' start with override of hitTest method.      override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? {         //1         if let viewAvailable = findPoin
Read more

CMTimeMakeWithSeconds explained

-
Image
CMTime  is structure which has two main components,  timeScale  and  value. CMTIME = VALUE  / TIMESCALE where, TimeScale =  fraction of a second each unit in numerator occupies. CMTIME = Value / TimeScale 1)  public   func  CMTimeMake( _  value:  Int64 ,  _  timescale:  Int32 ) ->  CMTime CMTimeMake ( 6000 ,  10 ) Means, there are 6000 units , each unit occupies 1/10 of a second 2)  public   func  CMTimeMakeWithSeconds( _  seconds:  Float64 ,  _  preferredTimescale:  Int32 ) ->  CMTime CMTimeMakeWithSeconds(10.0,500) 10.0 = VALUE /500 Therefore VALUE = 5000 So, there are 5000 units, each occupy 1/500 of a second
Read more

How to set Custom Section Header in UITableView for ios sdk version greater than 6

-
Image
Dear Friends, As we know, that to set a custom Section Header in a TableView we need to call the following. Here we pass our own custom View. But, remember the view which we returned was never reusable, hence not memory efficient. -( UIView *) tableView:( UITableView *)tableView viewForHeaderInSection:( NSInteger )section Later version of iOS , starting from iOS 6, helps to make our code Memory efficient with few lines of code. Still here the delegate method remains the same. With the help of this tutorial we will be able achieve a Custom Header implementation using iOS 6 or greater sdk. We will be creating a app. which would look like as shown below. Please use the following steps to achieve this: Step 1: Create a .xib file for the custom header 1. Press command + N 2. Select User Interface in Left Pane. 3. Then Select a View and name it as TableHeader. Step 2: Create a Custom class for the custom header in Step 1 1. Press command
Read more