IOS timeline implementation, iOS timeline implementation

IOS timeline implementation, iOS timeline implementation

Recently, the project needs to have a timeline, and there are few examples of timeline in iOS. I will share my examples and ideas with you to learn together.

The specific implementation result 1 of the timeline is as follows:

Figure 1

 

Step 1: When we see this graph, the first response we think of is to use tableView or CollectionView. Here we use tableView. First, create a Single View Application project and drag a TableView (2) into the Main. Storyboard. Do not forget to direct the delegate of TableView to ViewController.

Figure 2

 

Step 2: TableView is complete, and then how to customize TableViewCell. In the project, select "new file" "Cocoa Touch Class", select "inherit from TableViewCell", select "XIB file", name it "TimeCourseTableViewCell", and click "CREATE", as shown in figure 3:

Figure 3

 

The next step is to layout the xib file. We can find out the control in a cell through the figure 4.

Figure 4

As shown in figure 5, the layout is mainly based on the Label and View.

Figure 5

In fact, some people may have questions:

1. Why don't we just use a Button, but we need to use a View to nest a Label?

2. Why does the label of "content" add a parent control View?

In fact, at the beginning, I did use a simple Button and a Label as well. Later, it was found that the Frame with buttom and label clearly appeared, and the Origin was modified, but there was always a mess. Later, the view was nested in it to change the position of the view, it can be fully implemented. I am not sure about this BUG. Please let me know, thank you.

 

Step 3: Next, check the code in TimeCourseTableViewCell. h file in xib:

 

# Import <UIKit/UIKit. h> @ interface TimeCourseTableViewCell: UITableViewCell @ property (weak, nonatomic) IBOutlet UILabel * lbDate; // Date @ property (weak, nonatomic) IBOutlet UILabel * lbTime; // time @ property (weak, nonatomic) IBOutlet UIView * infoView; // View of the white background @ property (weak, nonatomic) IBOutlet UILabel * lbInfoTitle; // notification title @ property (weak, nonatomic) IBOutlet UILabel * lbInfoContent; // notification content @ property (weak, nonatomic) IBOutlet UIView * infoContentView; // parent View of the notification content @ property (weak, nonatomic) IBOutlet UILabel * lbSegment; // The vertical gray split line @ property (weak, nonatomic) IBOutlet UIView * receiveView; // View in the dark red @ property (weak, nonatomic) IBOutlet UILabel * lbReceive; // tap to receive the notification-(CGFloat) setCellHeight :( NSString *) strInfo isSameDay :( BOOL) isSame; -(void) setRidues;-(void) setClick;-(void) setNotClick; @ end

 

 

Code in the TimeCourseTableViewCell. m file:

 

# Import "TimeCourseTableViewCell. h "@ implementation interval @ synthesize lbDate; @ synthesize lbTime; @ synthesize infoView; @ synthesize lbInfoTitle; @ synthesize lbInfoContent; @ synthesize interval; @ synthesize receiveView; @ synthesize lbSegment; @ synthesize infoContentView;-(void) awakeFromNib {// Initialization code}/* remove the date above */-(void) deleteDate {lbDate. hidden = YES; CGRect timeTemp = lbTime. frame; timeTemp. origin = CGPointMake (timeTemp. origin. x, 8); lbTime. frame = timeTemp; CGRect infoViewTemp = infoView. frame; infoViewTemp. origin = CGPointMake (infoViewTemp. origin. x, 8); infoView. frame = infoViewTemp;}/* sets the height of the displayed text to determine the height of the entire tableViewCell, and finally returns the cell height */-(CGFloat) setCellHeight :( NSString *) strInfo isSameDay :( BOOL) isSame {/* if it is the same day, remove the above date */if (isSame) {[self deleteDate];} [lbInfoContent setNumberOfLines: 0]; // 0 rows, the number of lines NSString * labelText = strInfo is automatically added according to the text length; NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithString: labelText]; optional * paragraphStyle = [[callback alloc] init]; [paragraphStyle setLineSpacing: 5.0f]; // adjust the row spacing [attributedString addAttribute: partition value: paragraphStyle range: NSMakeRange (0, [labelText length])]; lbInfoContent. attributedText = attributedString; [lbInfoContent sizeToFit]; // fill // NSLog (@ "% @", lbInfoContent); CGRect infoContentViewTemp = infoContentView. frame; infoContentViewTemp. size = CGSizeMake (212, lbInfoContent. frame. size. height); infoContentView. frame = infoContentViewTemp;/* set the click position of the gesture */CGRect btnTemp = receiveView. frame; btnTemp. origin = CGPointMake (0, infoContentView. frame. origin. y + infoContentView. frame. size. height + 8); receiveView. frame = btnTemp; // NSLog (@ "% @", receiveView);/* set the overall infoView height */CGRect viewTemp = infoView. frame; viewTemp. size = CGSizeMake (viewTemp. size. width, receiveView. frame. origin. y + receiveView. frame. size. height); infoView. frame = viewTemp; // NSLog (@ "% @", infoView); lbSegment. frame = CGRectMake (lbSegment. frame. origin. x, 0, 3, infoView. frame. origin. y + infoView. frame. size. height + 8); NSLog (@ "HEight % f", infoView. frame. origin. y + infoView. frame. size. height + 8); return infoView. frame. origin. y + infoView. frame. size. height + 8;}/* Set Circle */-(void) setRidues {lbTime. layer. cornerRadius = lbTime. frame. size. width/2; [lbTime. layer setMasksToBounds: YES];}/* set the Click Read style */-(void) setClick {CGFloat R = (CGFloat) 128/255. 0; CGFloat G = (CGFloat) 128/255. 0; CGFloat B = (CGFloat) 128/255. 0; CGFloat alpha = (CGFloat) 1.0; UIColor * ColorRGB = [UIColor colorWithRed: R green: G blue: B alpha: alpha]; receiveView. backgroundColor = ColorRGB; lbReceive. text = @ "I have received the notification";}/* set the read style not clicked */-(void) setNotClick {CGFloat R = (CGFloat) 255/255. 0; CGFloat G = (CGFloat) 83/255. 0; CGFloat B = (CGFloat) 83/255. 0; CGFloat alpha = (CGFloat) 1.0; UIColor * ColorRGB = [UIColor colorWithRed: R green: G blue: B alpha: alpha]; receiveView. backgroundColor = ColorRGB; lbReceive. text = @ "touch to receive notification";}-(void) setSelected :( BOOL) selected animated :( BOOL) animated {[super setSelected: selected animated: animated]; // Configure the view for the selected state} @ end

 

 

 

Next, let's look at the code in the ViewController. m file:

 

 

# Import "ViewController. h "# import" TimeCourseTableViewCell. h "@ interface ViewController () @ property (weak, nonatomic) IBOutlet UITableView * messageTableView; @ property int messageSum; // number of cells @ property NSArray * infoArray; // Save the Information Content @ property NSMutableArray * clickArray; // record whether information has been read; 1 not received 0 received @ end @ implementation ViewController @ synthesize messageSum;-(void) viewDidLoad {[super viewDidLoad]; // Do Y additional setup after loading the view, typically from a nib. /* tableView */[self setTableViewStyle]; messageSum = 10; self. infoArray = [[NSArray alloc] initWithObjects: @ "the old man is crazy about Treating Kidney losses without sugar. ", @" Jin Mao mink, Qianyi Kang Wang. ", @" ", @" To report to the taishou, three hundred years, jiuzhitang. The wine chest is still open, and the watermelon cream is the best choice. ", @" Holding the festival cloud, three gold glucose. Will turn the bow like a full moon, looking northwest, Wang Yu. ", @" Ten years of life and death, hengyuan Xiang, goat and goat. ", @" Let's go to the grave, and use qiqiang for laundry. ", @" Even if you do not know each other, supplement Wei C and Shi Er Kang. ", @" Return to your hometown in the night, learn a foreign language, and New Oriental. It is more healthy to wash and wash. Find a job, Foxconn, @ "La la", nil]; self. clickArray = [[NSMutableArray alloc] initWithObjects: @ "1", @ "1", @ "1", @ "1", @ "1", @ "1 ", @ "1", @ "1", @ "1", @ "1", nil];} # pragma mark-set the background color of messageTableView and remove the split line-(void) setTableViewStyle {self. messageTableView. separatorStyle = UITableViewCellSeparatorStyleNone; // remove the tabelView splitter CGFloat R = (CGFloat) 237/255. 0; CGFloat G = (CGFloat) 237/255. 0; CGFloat B = (CGFloat) 237/255. 0; CGFloat alpha = (CGFloat) 1.0; UIColor * ColorRGB = [UIColor colorWithRed: R green: G blue: B alpha: alpha]; [self. messageTableView setBackgroundColor: ColorRGB] ;}# pragma mark-TabelView data source protocol // This method specifies the number of rows in the table view-(NSInteger) tableView :( UITableView *) tableView numberOfRowsInSection :( NSInteger) section {return messageSum;}-(CGFloat) tableView :( UITableView *) tableView heightForRowAtIndexPath :( NSIndexPath *) indexPath {// group by time. Suppose [], [], [6, 9] is the same day TimeCourseTableViewCell * nib = [[[NSBundle mainBundle] loadNibNamed: @ "TimeCourseTableViewCell" owner: self options: nil] lastObject]; if ([indexPath row] = 0) {NSLog (@ "0"); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row] <3) {NSLog (@ "0-3"); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];} else if ([indexPath row] = 3) {NSLog (@ "3"); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row] <6) {NSLog (@ "3-6 "); NSLog (@ "% f", [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES]); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];} else if ([indexPath row] = 6) {NSLog (@ "6 "); NSLog (@ "% f", [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO]); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row]> 6) {NSLog (@ "6-9 "); NSLog (@ "% f", [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES]); return [nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];} else return 145;} // This method returns the cell object, the number of rows in the table, number of calls-(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {static NSString * simpleIdentify = @ "TimeCourse"; UITableViewCell * cell = [tableView progress: simpleIdentify]; TimeCourseTableViewCell * nib = [[[NSBundle mainBundle] loadNibNamed: @ "TimeCourseTableViewCell" owner: self options: nil] lastObject]; [nib setTag: [indexPath row]; if ([[self. clickArray objectAtIndex: [indexPath row] isw.tostring: @ "1"]) {[nib setNotClick];} else [nib setClick];
[Nib setRidues]; UITapGestureRecognizer * Tap = [[UITapGestureRecognizer alloc] initWithTarget: self action: @ selector (tapGesture :)]; nib. receiveView. userInteractionEnabled = YES; [nib. receiveView addGestureRecognizer: Tap]; if ([indexPath row] = 0) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row] <3) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];} else if ([indexPath row] = 3) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row] <6) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];} else if ([indexPath row] = 6) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: NO];} else if ([indexPath row]> 6) {[nib setCellHeight: [self. infoArray objectAtIndex: [indexPath row] isSameDay: YES];}
Cell = nib; cell. selectionStyle = UITableViewCellSelectionStyleNone; // remove the selected uncolored return cell;} # pragma mark-TabelView proxy protocol // selected event-(void) tableView :( UITableView *) tableView didSelectRowAtIndexPath :( NSIndexPath *) indexPath {NSLog (@ "44");}-(void) tapGesture :( UITapGestureRecognizer *) sender {NSLog (@ "receive notification "); UIView * view = sender. self. view; TimeCourseTableViewCell * cell = (TimeCourseTableViewCell *) view. superview. superview. superview; UILabel * lb = view. subviews [0]; NSString * str = @ "touch to receive notification"; if ([lb. text isEqualToString: str]) {[cell setClick]; [self. clickArray setObject: @ "0" atIndexedSubscript: cell. tag] ;}}-(void) didreceivemorywarning {[super didreceivemorywarning]; // Dispose of any resources that can be recreated .} @ end

 

Then, after running, effect 6 is shown:

Figure 6

Change the color as follows:

 

So far, the entire timeline has been completed.

The idea is as follows:

1. Grouping by Time: determines whether the day is the same. If so, the above date is hidden and the overall layout moves up.

2. Obtain the cell to be clicked: by adding a tag to the cell, I can obtain the cell and change the cell style when clicking the gesture.

 

You may not understand the code.

Source Code address free download: http://download.csdn.net/detail/junlinfushi/8345531