Skip to content

Commit

Permalink
Added title gravity - appearence property
Browse files Browse the repository at this point in the history 
Added title gravity property into SMSegment. It enables user to set position of title relatively to image.
Possible positions:
 -> right - default position
 -> bottom - title is below image
 -> top - title is on top of image
 -> left - title is on left of image

Following improvements and fixes caused by rework:
 - Fix: wrong title height in horizontal layouts
 - Fix: Shrink image if content doesnť fit If height of label (with applied font) and image is bigger then control height, shrink image to fit label. -> Helps on vertical organise mode
  • Loading branch information
Filip Wiesner committed Oct 29, 2017
1 parent 593d2c3 commit 65d63e3
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 6 deletions.
84 changes: 79 additions & 5 deletions SMSegmentViewController/SMSegmentView/SMSegment.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,25 +85,99 @@ open class SMSegment: UIView {
verticalMargin = appearance.contentVerticalMargin
}

var imageViewFrame = CGRect(x: 0.0, y: verticalMargin, width: 0.0, height: self.frame.size.height - verticalMargin*2)
var imageViewFrame = CGRect(x: 0.0, y: verticalMargin, width: 0.0, height: self.frame.size.height - verticalMargin * 2)
if self.onSelectionImage != nil || self.offSelectionImage != nil {
// Set imageView as a square
imageViewFrame.size.width = self.frame.size.height - verticalMargin*2
imageViewFrame.size.width = imageViewFrame.height
distanceBetween = 5.0
}

// Initialize empty title frame
var titleViewFrame: CGRect = CGRect()

// If there's no text, align image in the centre
// Otherwise align text & image in the centre
// Otherwise align text & image in the centre and apply title gravity
self.label.sizeToFit()
if self.label.frame.size.width == 0.0 {
imageViewFrame.origin.x = max((self.frame.size.width - imageViewFrame.size.width) / 2.0, 0.0)
}
else {
imageViewFrame.origin.x = max((self.frame.size.width - imageViewFrame.size.width - self.label.frame.size.width) / 2.0 - distanceBetween, 0.0)
titleViewFrame.size.width = self.label.frame.size.width

switch self.appearance?.titleGravity {
case .some(SMSTitleGravity.bottom):
// Setup title width and height properties according to image size
titleViewFrame.size.height = self.label.frame.size.height // Need to be as small as possible to fit

// Place image horizontally in centre and vertically to the top + vertical margin (changed to fit two vertical items)
imageViewFrame.size.height = self.frame.size.height - verticalMargin * 2.5

if imageViewFrame.size.height + self.label.font.lineHeight > self.frame.size.height {
imageViewFrame.size.height -= self.label.font.lineHeight / 2
}

imageViewFrame.size.width = imageViewFrame.size.height
imageViewFrame.origin.x = (self.frame.size.width - imageViewFrame.size.width)/2
imageViewFrame.origin.y = verticalMargin / 2

// Place the title horizontally in centre and vertivally below image + vertical margin (changed to fit two vertical items)
titleViewFrame.origin.x = (self.frame.size.width - titleViewFrame.size.width)/2
titleViewFrame.origin.y = imageViewFrame.size.height + verticalMargin / 1.5
break
case .some(SMSTitleGravity.top):
// Setup title width and height properties according to image size
titleViewFrame.size.height = self.label.frame.size.height // Need to be as small as possible to fit

// Place title horizontally in centre and vertically to the top + vertical margin (changed to fit two vertical items)
titleViewFrame.origin.x = (self.frame.size.width - titleViewFrame.size.width)/2
titleViewFrame.origin.y = verticalMargin / 2

// Place the image horizontally in centre and vertivally below title + vertical margin (changed to fit two vertical items)
imageViewFrame.size.height = self.frame.size.height - verticalMargin * 2.5

if imageViewFrame.size.height + self.label.font.lineHeight > self.frame.size.height {
imageViewFrame.size.height -= self.label.font.lineHeight / 2
}

imageViewFrame.size.width = imageViewFrame.size.height
imageViewFrame.origin.x = (self.frame.size.width - imageViewFrame.size.width)/2
imageViewFrame.origin.y = titleViewFrame.size.height + verticalMargin / 1.5
break
case .some(SMSTitleGravity.left):
// Setup title width and height properties according to image size
titleViewFrame.size.height = self.frame.size.height - verticalMargin * 2

// If left space > 0, set half of it as initial X point of title
titleViewFrame.origin
.x = max(
(self.frame.size.width - imageViewFrame.size.width - self.label.frame.size.width) / 2.0 - distanceBetween,
0.0
)

titleViewFrame.origin
.y = verticalMargin

// Place image to the right of title
imageViewFrame.origin.x = titleViewFrame.origin.x + titleViewFrame.size.width + distanceBetween
break

default:
// Setup title width and height properties according to image size
titleViewFrame.size.width = self.label.frame.size.width
titleViewFrame.size.height = self.frame.size.height - verticalMargin * 2
// If left space > 0, set half of it as initial X point og image
imageViewFrame.origin.x = max(
(self.frame.size.width - imageViewFrame.size.width - self.label.frame.size.width) / 2.0 - distanceBetween,
0.0
)
// Place title to the right of image
titleViewFrame.origin.x = imageViewFrame.origin.x + imageViewFrame.size.width + distanceBetween
titleViewFrame.origin.y = verticalMargin
}
}

self.imageView.frame = imageViewFrame
self.label.frame = CGRect(x: imageViewFrame.origin.x + imageViewFrame.size.width + distanceBetween, y: verticalMargin, width: self.label.frame.size.width, height: self.frame.size.height - verticalMargin * 2)
self.label.frame = titleViewFrame
}

// MARK: Selections
Expand Down
11 changes: 10 additions & 1 deletion SMSegmentViewController/SMSegmentView/SMSegmentAppearance.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ open class SMSegmentAppearance {
open var titleOnSelectionFont: UIFont
open var titleOffSelectionFont: UIFont

open var titleGravity: SMSTitleGravity

open var contentVerticalMargin: CGFloat


Expand All @@ -50,11 +52,12 @@ open class SMSegmentAppearance {
self.titleOffSelectionColour = UIColor.darkGray
self.titleOnSelectionFont = UIFont.systemFont(ofSize: 17.0)
self.titleOffSelectionFont = UIFont.systemFont(ofSize: 17.0)
self.titleGravity = SMSTitleGravity.right

self.contentVerticalMargin = 5.0
}

public init(contentVerticalMargin: CGFloat, segmentOnSelectionColour: UIColor, segmentOffSelectionColour: UIColor, titleOnSelectionColour: UIColor, titleOffSelectionColour: UIColor, titleOnSelectionFont: UIFont, titleOffSelectionFont: UIFont) {
public init(contentVerticalMargin: CGFloat, segmentOnSelectionColour: UIColor, segmentOffSelectionColour: UIColor, titleOnSelectionColour: UIColor, titleOffSelectionColour: UIColor, titleOnSelectionFont: UIFont, titleOffSelectionFont: UIFont, titleGravity: SMSTitleGravity?) {

self.contentVerticalMargin = contentVerticalMargin

Expand All @@ -65,5 +68,11 @@ open class SMSegmentAppearance {
self.titleOffSelectionColour = titleOffSelectionColour
self.titleOnSelectionFont = titleOnSelectionFont
self.titleOffSelectionFont = titleOffSelectionFont

if let gravity = titleGravity {
self.titleGravity = gravity
} else {
self.titleGravity = .right
}
}
}
7 changes: 7 additions & 0 deletions SMSegmentViewController/SMSegmentView/SMSegmentViewConstants.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,10 @@ public enum SMSegmentOrganiseMode: Int {
case horizontal
case vertical
}

public enum SMSTitleGravity {
case right
case bottom
case left
case top
}

0 comments on commit 65d63e3

Please sign in to comment.