Using Masonry to Layout 9 points - ios

I'm using Masonay to layout UI like this:
UI requirement
The size of the 9 points are the same.
And the margin between 9 points are the same.
My question is that how to make margin to left of first column point equal to the margin to the right of the last column points by using Masonay ?
My code blow is not complete.
Can anyone help me with this?
for (NSInteger i = 0; i < 9; i++) {
NSInteger row = i / 3;
NSInteger column = i % 3;
UIView * previousRowPoint;
UIView * previousColumnPoint;
UIView * firstPoint;
if (row > 0) {
previousRowPoint = hintPoints[(row - 1) * 3];
}
if (column > 0) {
previousColumnPoint = hintPoints[column - 1];
}
if (0 != i) {
firstPoint = hintPoints[0];
}
UIView * hintPoint = [[UIView alloc] init];
[hintPoints addObject:hintPoint];
hintPoint.layer.cornerRadius = 8 / 2;
hintPoint.layer.masksToBounds = YES;
hintPoint.layer.borderColor = [UIColor grayColor].CGColor;
hintPoint.layer.borderWidth = 0.5;
[self.view addSubview:hintPoint];
hintPoint.mas_key = [NSString stringWithFormat:#"hintPoint_%ld", (long)i];
[hintPoint mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(8);
make.height.mas_equalTo(8);
if (row == 0) {
make.top.equalTo(weakself.view).offset(100);
}
else {
make.top.equalTo(previousRowPoint.mas_bottom).offset(4);
}
if (column == 0) {
//TODO: how to make the trailing equal to the first point's leading
}
else if (column == 2) {
//TODO: how to make the trailing equal to the first point's leading
}
else {
make.leading.equalTo(previousColumnPoint.mas_trailing).offset(4);
}
}];
}

Related

FScalendar customisation

I am new to programming, I am using FScalendar and I want to change days name into two alphabets i.e. (SU,MO,TU.....), and I want to remove the gaps between cells?
I have tried in given area but not found the solution:
#property (weak, nonatomic) FSCalendarAppearance *appearance;
I have attached image for reference in which gaps are visible clearly.
enter image description here
Does this code need to be changed to get zero gap between cells???????
// Calculate item widths and lefts
free(self.widths);
self.widths = ({
NSInteger columnCount = 7;
size_t columnSize = sizeof(CGFloat)*columnCount;
CGFloat *widths = malloc(columnSize);
CGFloat contentWidth = self.collectionView.fs_width - self.sectionInsets.left - self.sectionInsets.right;
FSCalendarSliceCake(contentWidth, columnCount, widths);
widths;
});
free(self.lefts);
self.lefts = ({
NSInteger columnCount = 7;
size_t columnSize = sizeof(CGFloat)*columnCount;
CGFloat *lefts = malloc(columnSize);
lefts[0] = self.sectionInsets.left;
for (int i = 1; i < columnCount; i++) {
lefts[i] = lefts[i-1] + self.widths[i-1];
}
lefts;
});
// Calculate item heights and tops
free(self.heights);
self.heights = ({
NSInteger rowCount = self.calendar.transitionCoordinator.representingScope == FSCalendarScopeWeek ? 1 : 6;
size_t rowSize = sizeof(CGFloat)*rowCount;
CGFloat *heights = malloc(rowSize);
if (!self.calendar.floatingMode) {
CGFloat contentHeight = self.collectionView.fs_height - self.sectionInsets.top - self.sectionInsets.bottom;
FSCalendarSliceCake(contentHeight, rowCount, heights);
} else {
for (int i = 0; i < rowCount; i++) {
heights[i] = self.estimatedItemSize.height;
}
}
heights;
});
free(self.tops);
self.tops = ({
NSInteger rowCount = self.calendar.transitionCoordinator.representingScope == FSCalendarScopeWeek ? 1 : 6;
size_t rowSize = sizeof(CGFloat)*rowCount;
CGFloat *tops = malloc(rowSize);
tops[0] = self.sectionInsets.top;
for (int i = 1; i < rowCount; i++) {
tops[i] = tops[i-1] + self.heights[i-1];
}
tops;
});
source file ------>. FSCalendarCollectionViewLayout.m
You can do this by adding a subview in fscalendar for weekDays. I ADDED SINGLE LETTER BUT YOU CAN ADD according to your requirements.
1- create View
2-
3-
let week_days_view = weekDaysView.instanceFromNib() as! weekDaysView
week_days_view.frame = self.fsCalendar.calendarWeekdayView.frame
self.fsCalendar.calendarWeekdayView.addSubview(week_days_view)
#ABTech Regarding this I want to change days name into two alphabets i.e. (SU,MO,TU.....), Try with modification on FSCalendarWeekdayView.m file on it's - (void)configureAppearance method on FSCalendar library.In Swift check here
NSString * str = [weekdaySymbols[index] uppercaseString];
label.text = [str substringToIndex:2];
And Regarding this I want to remove the gaps between cells?, Try this like below, Yes you need to try this #property (weak, nonatomic) FSCalendarAppearance *appearance;
calendar.appearance.titleOffset = CGPoint.init(x: -50, y: 0.0)
calendar.appearance.eventOffset = CGPoint.init(x: -50, y: 0.0)

Change color of chess field after rotate

I newbie in Obj-C.
I have the following chess field:
for (int row = 0; row < 8; row++) {
for (int column = 0; column < 8; column++) {
CGRect square = {horizontalOffSet + (column * squareSize),
verticalOffSet + (row * squareSize),
squareSize, squareSize};
UIView *rect = [[UIView alloc] initWithFrame:square];
rect.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
horizontalOffSet = horizontalOffSet + squareSize;
if ((row + column) % 2 == 0) {
//verticalOffSet = verticalOffSet + squareSize;
horizontalOffSet = 0;
rect.backgroundColor = [UIColor whiteColor];
[anotherRect addSubview:rect];
} else {
//verticalOffSet = verticalOffSet + squareSize;
horizontalOffSet = 0;
rect.backgroundColor = [UIColor blackColor];
[anotherRect addSubview:rect];
}
}
}
My task to change colours of the field when it rotates, for example, fill it with cyan and purple colour when rotating on left. Not clearly understand how to do it.
#somerk check my updated code:
1) I have give identifier(tag) to identified chess view and which has white and which has black color. you can do it without identifier but in case of multiple subviews identifier is better way to get.
int horizontalOffSet = 2;
int squareSize = 40;
int verticalOffSet = 2;
for (int row = 0; row < 8; row++) {
for (int column = 0; column < 8; column++) {
CGRect square = {horizontalOffSet + (column * squareSize),
verticalOffSet + (row * squareSize),
squareSize, squareSize};
UIView *rect = [[UIView alloc] initWithFrame:square];
rect.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
horizontalOffSet = horizontalOffSet + squareSize;
if ((row + column) % 2 == 0) {
//verticalOffSet = verticalOffSet + squareSize;
horizontalOffSet = 0;
rect.tag = 101;
rect.backgroundColor = [UIColor whiteColor];
[self.view addSubview:rect];
} else {
//verticalOffSet = verticalOffSet + squareSize;
rect.tag = 102;
horizontalOffSet = 0;
rect.backgroundColor = [UIColor blackColor];
[self.view addSubview:rect];
}
}
2) I have performed color change event on UIButton click so you have to use that code after rotation event.
-(IBAction)changeColor:(UIButton *)btn{
for(UIView *rectViews in self.view.subviews){
UIColor *clrblck = [UIColor blackColor];
if(rectViews.backgroundColor == clrblck && rectViews.tag == 102){
rectViews.backgroundColor = [UIColor cyanColor];
}else if(rectViews.backgroundColor == clrblck && rectViews.tag == 101){
rectViews.backgroundColor = [UIColor purpleColor];
}else{
// you will get other views here..
}
}
}
I have get all subviews and check backgroundColor and tag and change its backgroundColor.
Note: change view'name according your view's name in loop and where you add rect as subviews in your anotherRect.
Free to ask me if you have any question. Happy Coding :)
Find another possible solution to change colors:
-(void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
CGFloat rndmColor1 = (float)(arc4random() % 256) / 255;
CGFloat rndmColor2 = (float)(arc4random() % 256) / 255;
for(UIView *rect in self.chessField.subviews){
if (rect.tag == 102) {
rect.backgroundColor = [UIColor colorWithHue:rndmColor1 saturation:1 brightness:1 alpha:1];
} else if (rect.tag == 101) {
rect.backgroundColor = [UIColor colorWithHue:rndmColor2 saturation:1 brightness:1 alpha:1];
}
}
}

Implementing Grid/table drawing algorithm

I'm trying to implement universal method for generating (drawing) grid formed with UIViews (or other controls). They all should have borders and my problem is I cannot find right algorithm to shift (combine) borders (so the "table" does not have double cell borders like now) and to increase size so the views exactly match given frame (red on picture).
Following code generates picture beneath:
////////
const CGFloat kOuterBorderWidth = 0.0;
const CGFloat kInnerBorderWidth = 1.0;
NSArray *rows;
NSArray *columns = rows = #[#0.065, #0.29, #0.29, #0.29, #0.065];
NSMutableArray *cells = [self drawGridWithFrame:self.frame
columns:columns
rows:rows
outerBorderWidth:kOuterBorderWidth
innerBordersWidth:kInnerBorderWidth];
///////
and the method itself
- (NSMutableArray*)drawGridWithFrame:(CGRect)frame
columns:(NSArray *)columns
rows:(NSArray *)rows
outerBorderWidth:(CGFloat)outerBorderWidth
innerBordersWidth:(CGFloat)innerBordersWidth
{
CGFloat x = 0, y = 0;
NSMutableArray *cells = [NSMutableArray new];
CGFloat height = [rows[0] floatValue] * frame.size.height;
for (int j = 0; j < columns.count; j++) {
CGFloat width = [columns[j] floatValue] * frame.size.width;
CGRect cellFrame = CGRectMake(x, y, width, height);
UIView *cellView = [[UIView alloc] initWithFrame:cellFrame];
cellView.layer.borderWidth = innerBordersWidth;
if (j == 0 || j == columns.count - 1) {
cellView.layer.borderColor = [UIColor magentaColor].CGColor;
}
if (j == 1) {
cellView.layer.borderColor = [UIColor orangeColor].CGColor;
}
if (j == 2) {
cellView.layer.borderColor = [UIColor brownColor].CGColor;
}
[cells addObject:cellView];
x += [columns[j] floatValue] * frame.size.width;
}
return cells;
}
Done it.
Note: outerBorderWidth is now not used here, if it is > 1.0pt, then we additionally should shift views and adjust their size
- (NSMutableArray*)drawGridWithFrame:(CGRect)frame
columns:(NSArray *)columns
rows:(NSArray *)rows
outerBorderWidth:(CGFloat)outerBorderWidth
innerBordersWidth:(CGFloat)innerBordersWidth
{
CGFloat x = 0, y = 0;
NSMutableArray *cells = [NSMutableArray new];
CGFloat heightAdjust = (CGFloat)(rows.count - 1) / (CGFloat)rows.count;
CGFloat widthAdjust = (CGFloat)(columns.count - 1) / (CGFloat)columns.count;
for (int i = 0; i < rows.count; i++) {
CGFloat height = [rows[i] floatValue] * frame.size.height + innerBordersWidth * heightAdjust;
for (int j = 0; j < columns.count; j++) {
CGFloat width = [columns[j] floatValue] * frame.size.width + innerBordersWidth * widthAdjust;
CGRect cellFrame = CGRectMake(x, y, width, height);
UIView *cellView = [[UIView alloc] initWithFrame:cellFrame];
cellView.layer.borderWidth = innerBordersWidth;
if (j == 0 || j == columns.count - 1) {
cellView.layer.borderColor = [UIColor magentaColor].CGColor;
}
if (j == 1) {
cellView.layer.borderColor = [UIColor orangeColor].CGColor;
}
if (j == 2) {
cellView.layer.borderColor = [UIColor brownColor].CGColor;
}
[cells addObject:cellView];
x += width - innerBordersWidth;
}
x = 0;
y += height - innerBordersWidth;
}
return cells;
}
Result:

How to looping a set of cells in UICollectionView?

I don't know is that topic had asked before, but I do some search before asking this simple question, something like "UICollectionView cycling cells" "UIColloectionView Infinite Loop".
If the post is duplicated, I am sorry for that...
I had a Horizontal Collection View as a slider in my app, 5 image will be shown, how can I set the function when user scroll to the end (the fifth Items) and slide to right and move to the first cells? also, if the user scroll the first item and slide to left, it will show the fifth item? Thanks.
SDK: iOS 7
Thank alot~
I had wrote a stupid program to control this
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat pageWidth = _sliderCV.frame.size.width;
self.pageControl.currentPage = _sliderCV.contentOffset.x / pageWidth;
NSLog(#"%f", _sliderCV.contentOffset.x);
CGFloat firstSlide = 0.f;
CGFloat lastSlide = pageWidth * 4;
NSLog(#"contentOffset = %f, firstSlide = %f, SelFirstCount = %li",_sliderCV.contentOffset.x, firstSlide, (long)selFirstCount);
if (_sliderCV.contentOffset.x == firstSlide) {
if (selFirstCount == 0) {
selFirstCount += 1 ;
NSLog(#"%li", (long)selFirstCount);
} else {
NSLog(#"Move to Last");
[_sliderCV setContentOffset:CGPointMake(lastSlide, 0) animated:YES];
selFirstCount = 0;
self.pageControl.currentPage = 4;
selLastCount = 1;
}
} else if (_sliderCV.contentOffset.x == lastSlide) {
if (selLastCount == 0) {
selLastCount += 1;
} else {
[_sliderCV setContentOffset:CGPointMake(firstSlide,0) animated:YES];
selLastCount = 0;
self.pageControl.currentPage = 0;
selFirstCount = 1;
}
} else {
NSLog(#"Clear");
selFirstCount = 0;
selLastCount = 0;
}
}

Custom UIPageControl dots are misplaced on load

I have a weird behavior with custom UIPageControl.
I subclassed it and in setCurrentPage method I draw custom dots.
In iOS 6 on load they just miss.
In iOS 7 the dots are misplaced.
In both iOS's dots are being positioned correctly only after I change the slide.
I tried the following methods without success:
[customPageControl updateCurrentPageDisplay];
[customPageControl updateConstraints];
[customPageControl sizeToFit];
[customPageControl.currentPage = 1];
The code:
#implementation ProfilePagesPageControl
#synthesize originalSubviews;
#synthesize dotsHeight;
- (void)setCurrentPage:(NSInteger)page
{
[super setCurrentPage:page];
[self updateDots];
}
- (void)updateDots
{
for (int i = 0; i < self.subviews.count; i++)
{
UIView* dotView = [self.subviews objectAtIndex:i];
for (int j = dotView.subviews.count - 1; j >= 0; j--)
{
UIView *view = [dotView.subviews objectAtIndex:j];
[view removeFromSuperview];
}
int widthForDots = [Utils getDeviceBounds].width - Constraints.Gap * 3;
int effectiveWidth = widthForDots / self.subviews.count - Constraints.Gap;
int effectiveGap = (widthForDots - (effectiveWidth * self.subviews.count) + Constraints.Gap * 3) / self.subviews.count;
int effectiveHeight = dotsHeight;
if (i == self.currentPage)
effectiveHeight = effectiveHeight + 3;
else
effectiveHeight = effectiveHeight - 3;
CGRect dotViewFrame = dotView.frame;
dotViewFrame.origin.x = effectiveWidth * i + Constraints.Gap + effectiveGap * i;
dotViewFrame.origin.y = self.frame.size.height / 2 - effectiveHeight / 2;
dotViewFrame.size.width = effectiveWidth;
dotViewFrame.size.height = effectiveHeight;
dotView.frame = dotViewFrame;
UIView *dotSubView = [[UIView alloc] initWithFrame:CGRectMake(0,
0,
dotView.frame.size.width,
dotView.frame.size.height)];
if (i == self.currentPage)
dotSubView.backgroundColor = [UIColor blackColor];
else
dotSubView.backgroundColor = [UIColor grayColor];
[UIUtils roundCorner:(UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight) forView:dotSubView];
ProfileSlideView *slideView = [self.originalSubviews objectAtIndex:i];
RevUILabel *label = [[RevUILabel alloc] initWithSize:13];
label.text = slideView.name;
label.frame = CGRectMake(dotSubView.frame.size.width / 2 - label.frame.size.width / 2,
dotSubView.frame.size.height / 2 - label.frame.size.height / 2,
label.frame.size.width,
label.frame.size.height);
[dotSubView addSubview:label];
[dotView addSubview:dotSubView];
}
}
#end
The iOS7 look:
The iOS6 look:
:
After slide look:
Make sure you call updateDots somewhere else (such as viewDidLoad, or viewWillAppear) so they can be set up before you switch any pages. If you only call updateDots in setCurrentPage it will only be called once you switch the page the first time.

Resources