Can't get UILabel to word wrap - swift3

I have used Interface Builder to get UILabelViews to word wrap, but this is my first attempt to do it programmatically. I believe the issue is that although I'm setting:
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
I'm setting a line height which might conflict with these properties?
override func layoutSubviews() {
super.layoutSubviews()
imageViewContent.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
imageViewContent.loadImageWithURL(imageName!)
label.frame = CGRect(x: 0, y: 0, width: frame.size.width-10, height: 21)
label.center = imageViewContent.center
label.textAlignment = .center
label.clipsToBounds = true
label.layer.cornerRadius = 10.0
label.textColor = .white
label.font = UIFont(name: "AvenirNext-DemiBold", size: 15)
label.backgroundColor = UIColor.black.withAlphaComponent(0.5)
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
label.text = photoName
}

As I suspected, hardcoding the height of the label prevented it from word wrapping. I've created a labelHeight variable and added a function at the bottom of the class to calculate the labelHeight based on the content, font size, and labelWidth I set. Code works fine now:
class NTWaterfallViewCell :UICollectionViewCell, NTTansitionWaterfallGridViewProtocol{
var photoName = ""
var imageName : String?
var labelHeight: CGFloat = 0.0
var imageViewContent : UIImageView = UIImageView()
var label = UILabel()
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.lightGray
contentView.addSubview(imageViewContent)
contentView.addSubview(label)
}
override func layoutSubviews() {
super.layoutSubviews()
imageViewContent.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
imageViewContent.loadImageWithURL(imageName!)
label.text = photoName
labelHeight = heightForText(photoName, width: frame.size.width-10)
label.frame = CGRect(x: 0, y: 0, width: frame.size.width-10, height: labelHeight)
label.center = imageViewContent.center
label.textAlignment = .center
label.clipsToBounds = true
label.layer.cornerRadius = 10.0
label.textColor = .white
label.font = UIFont(name: "AvenirNext-DemiBold", size: 15)
label.backgroundColor = UIColor.black.withAlphaComponent(0.5)
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
}
func heightForText(_ text: String, width: CGFloat) -> CGFloat {
let font = UIFont(name: "AvenirNext-DemiBold", size: 15)
let rect = NSString(string: text).boundingRect(with: CGSize(width: width, height: CGFloat(MAXFLOAT)), options: .usesLineFragmentOrigin, attributes: [NSFontAttributeName: font], context: nil)
return ceil(rect.height)
}
}

Related

Gradient not redrawing properly

I am attempting to have a CGRect that has a dynamic gradient. When I use the view models gradient I am able to observe the gradient changing. However the view does not change as expected.
If I use hardcoded gradients in the view which toggle between red and blue I see that the view is redrawing with the updated gradient.
What am I missing?
View Model:
#Published var forceRedraw: Bool = false
#Published var annGradient: Gradient = Gradient(colors: [.red]) {
didSet {
print("ViewModel", annGradient.stops.first!, annGradient.stops.last!)
forceRedraw.toggle()
}
}
View:
struct SchematicView: View {
#EnvironmentObject var vM: AppViewModel
#State var refresh: Bool = false
var body: some View {
VStack(alignment: .center) {
Spacer()
ScrollView {
if refresh {
Canvas { context, size in
let w = size.width
let h = size.height
let grad = vM.annGradient
print("View1", grad.stops.first!, grad.stops.last!)
let annPath = CGRect(x: w/2, y: 0, width: 100, height: h)
context.fill(Path(annPath), with: .linearGradient(grad, startPoint: CGPoint(x: 0, y: 0), endPoint: CGPoint(x: 0, y: h)))
}.frame(width: 300, height: 500)
} else {
Canvas { context, size in
let w = size.width
let h = size.height
let grad = vM.annGradient
print("View2", grad.stops.first!, grad.stops.last!)
let annPath = CGRect(x: w/2, y: 0, width: 100, height: h)
context.fill(Path(annPath), with: .linearGradient(grad, startPoint: CGPoint(x: 0, y: 0), endPoint: CGPoint(x: 0, y: h)))
}.frame(width: 300, height: 500)
}
}
.syncBool($vM.forceRedraw, with: $refresh)
.onAppear(perform: {
refresh = vM.forceRedraw
})

How to move scrollview with buttons only in SwiftUI

Previously I did with Swift4 UIScrollView which scrolled with buttons and x offset.
In Swift4 I have:
Set Scrolling Enabled and Paging Enabled to false.
Created the margins, offsets for each frame in UIScrollView and changed the position with buttons Back and Next.
Here is the code:
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var buttonSound: UIButton!
#IBOutlet weak var buttonPrev: UIButton!
#IBOutlet weak var buttonNext: UIButton!
#IBOutlet weak var scrollView: UIScrollView!
var levels = ["level1", "level2", "level3", "level4"]
let screenWidth = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height
var currentLevel = 1
var previousLevel: Int? = nil
override func viewDidLoad() {
super.viewDidLoad()
//Defining the Various Swipe directions (left, right, up, down)
let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(self.handleGesture(gesture:)))
swipeLeft.direction = .left
self.view.addGestureRecognizer(swipeLeft)
let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(self.handleGesture(gesture:)))
swipeRight.direction = .right
self.view.addGestureRecognizer(swipeRight)
addHorizontalLevelsList()
customizeButtons()
resizeSelected()
}
func addHorizontalLevelsList() {
var frame : CGRect?
for i in 0..<levels.count {
let button = UIButton(type: .custom)
let buttonW = screenWidth/3
let buttonH = screenHeight/2
frame = CGRect(x: CGFloat(i+1) * (screenWidth/2) - (buttonW/2),
y: buttonH - 100,
width: buttonW,
height: buttonH)
button.frame = frame!
button.tag = i+1
button.backgroundColor = .lightGray
button.addTarget(self, action: #selector(selectTeam), for: .touchUpInside)
button.setTitle(levels[i], for: .normal)
scrollView.addSubview(button)
}
scrollView.contentSize = CGSize(width: (screenWidth/2 * CGFloat(levels.count)),
height: screenHeight)
scrollView.backgroundColor = .clear
self.view.addSubview(scrollView)
}
func customizeButtons(){
buttonPrev.frame = CGRect(x: 0,
y: (screenHeight/2) - 40,
width: 80, height: 80)
buttonNext.frame = CGRect(x: screenWidth - 80,
y: (screenHeight/2) - 40,
width: 80, height: 80)
buttonPrev.superview?.bringSubviewToFront(buttonPrev)
buttonNext.superview?.bringSubviewToFront(buttonNext)
}
#objc func selectTeam(button: UIButton) {
button.transform = CGAffineTransform(scaleX: 0.6, y: 0.6)
UIView.animate(withDuration: 1.0,
delay: 0,
usingSpringWithDamping: CGFloat(0.20),
initialSpringVelocity: CGFloat(6.0),
options: UIView.AnimationOptions.allowUserInteraction,
animations: {
button.transform = CGAffineTransform.identity
},
completion: { Void in() }
)
print(levels[button.tag])
let vc = PopTypeVC(nibName: "PopTypeVC", bundle: nil)
vc.modalPresentationStyle = UIModalPresentationStyle.overCurrentContext
self.present(vc, animated: true)
}
#IBAction func prevLevel(_ sender: Any) {
if currentLevel > 0 {
currentLevel -= 1
scroll()
}
}
#IBAction func nextLevel(_ sender: Any) {
if currentLevel < levels.count {
currentLevel += 1
scroll()
}
}
func scroll(){
print(currentLevel)
print(previousLevel as Any)
scrollView.setContentOffset(CGPoint(x: currentLevel * Int(screenWidth/2), y: 0), animated: true)
resizeSelected()
}
// The #objc before func is a must, since we are using #selector (above)
#objc func handleGesture(gesture: UISwipeGestureRecognizer) -> Void {
if gesture.direction == UISwipeGestureRecognizer.Direction.right {
prevLevel(self)
}
else if gesture.direction == UISwipeGestureRecognizer.Direction.left {
nextLevel(self)
}
}
func resizeSelected(){
if previousLevel != nil {
let previousFrame = CGRect(x:CGFloat(previousLevel!) * (screenWidth/2) - (screenWidth/3)/2,
y: (screenHeight/2) - 100,
width: screenWidth/3,
height: screenHeight/2)
scrollView.viewWithTag(previousLevel!)?.frame = previousFrame
}
let currentFrame = CGRect(x: CGFloat(currentLevel) * (screenWidth/2) - (screenWidth/3)/2 - 10,
y: (screenHeight/2) - 110,
width: screenWidth/3 + 20,
height: screenHeight/2 + 20)
scrollView.viewWithTag(currentLevel)?.frame = currentFrame
previousLevel = currentLevel
}
}
The problem is I can't do this with SwiftUI:
struct ContentView: View {
static var levels = ["level1",
"level2",
"level3",
"level4"]
var currentLevel = 1
var previousLevel: Int? = nil
let screenW = UIScreen.main.bounds.width
let screenH = UIScreen.main.bounds.height
let margin1 = 50
let margin2 = 100
let margin3 = 20
let sceneButtonW = 100
let buttonPadding = 40
var body: some View {
ZStack {
// Horizontal list
VStack {
Spacer()
.frame(height: margin2)
ScrollView(.horizontal, showsIndicators: false) {
HStack{
Spacer()
.frame(width: buttonPadding + sceneButtonW/2)
ForEach(0..<ContentView.levels.count) { i in
cardView(i: i).tag(i+1)
}
Spacer()
.frame(width: buttonPadding + sceneButtonW/2)
}
}
Spacer()
.frame(height: margin3)
}
}
.background(Image("bg")
.resizable()
.edgesIgnoringSafeArea(.all)
.aspectRatio(contentMode: .fill))
}
}
Question: Are there any methods to disable automatic scrolling at all and use offsets at ScrollView with SwiftUI?
This already built solution for SwiftUI
https://github.com/fermoya/SwiftUIPager
However, there is no real example.

Image Slider with UIScrollView

I am making an image slider that slides automatically every 2 seconds. The code I have wrote moves immediately to the next image without the slide animation, I want to fix it somehow by showing the scrollview scrolling, this is my code:
var imagesArray = [UIImage]()
static var i = 0
override func viewDidLoad() {
super.viewDidLoad()
imagesArray = [image1, image2, image3, image4]
for i in 0..<imagesArray.count{
let imageview = UIImageView()
imageview.image = imagesArray[i]
imageview.contentMode = .scaleAspectFit
let xPosition = self.view.frame.width * CGFloat(i)
imageview.frame = CGRect(x: xPosition, y: 0, width: self.imagesScrollView.frame.width, height: self.imagesScrollView.frame.height)
imagesScrollView.contentSize.width = imagesScrollView.frame.width * CGFloat(i+1)
imagesScrollView.addSubview(imageview)
}
}
override func viewDidAppear(_ animated: Bool) {
let scrollingTimer = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(MenuViewController.newStartScrolling), userInfo: nil, repeats: true)
scrollingTimer.fire()
func newStartScrolling()
{
if MenuViewController.i == imagesArray.count {
MenuViewController.i = 0
}
let x = CGFloat(MenuViewController.i) * imagesScrollView.frame.size.width
imagesScrollView.contentOffset = CGPoint(x: x, y: 0)
MenuViewController.i += 1
}
Thank you.
Please try this code.
override func viewDidAppear(_ animated: Bool) {
imagesArray = [UIImage(named: "apple.jpg")!, UIImage(named: "empire.jpg")!, UIImage(named: "ottawa.jpg")!]
imagesScrollView.contentSize = CGSize(width: imagesScrollView.frame.width * CGFloat(imagesArray.count), height: imagesScrollView.frame.height)
for i in 0..<imagesArray.count{
let imageview = UIImageView()
imageview.image = imagesArray[i]
imageview.contentMode = .scaleAspectFill
imageview.clipsToBounds = true
let xPosition = self.imagesScrollView.frame.width * CGFloat(i)
imageview.frame = CGRect(x: xPosition, y: 0, width: self.imagesScrollView.frame.width, height: self.imagesScrollView.frame.height)
print(imageview)
imagesScrollView.addSubview(imageview)
}
let scrollingTimer = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(ViewController.newStartScrolling), userInfo: nil, repeats: true)
scrollingTimer.fire()
}
func newStartScrolling()
{
if ViewController.i == imagesArray.count {
ViewController.i = 0
}
let x = CGFloat(ViewController.i) * imagesScrollView.frame.size.width
imagesScrollView.setContentOffset(CGPoint(x: x, y: 0), animated: true)
ViewController.i += 1
}
you have to use func setContentOffset(_ contentOffset: CGPoint, animated: Bool) method to change content offset using animation.
#IBOutlet weak var imageView:UIImageView!
var i=Int()
override func viewDidLoad() {
super.viewDidLoad()
Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(imageChange), userInfo: nil, repeats: true)
// Do any additional setup after loading the view.
}
#objc func imageChange(){
self.imageView.image=images[i]
if i<images.count-1{
i+=1
}
else{
i=0
}
}

TableView Expand/Collapse with Swift 3

I did collapse/expand table cell in swift 3. But, I would like to add some padding bottom to the title header. In my screenshot, there is no padding between Title 1 and Title 2.
Another problem is that how can I move arrow image to the right?
Here is my code.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView.init(frame: CGRect(x: 0, y: 0, width: 300, height: 28))
var imageView = UIImageView()
if (expandSections.contains(section)) {
imageView = UIImageView.init(frame: CGRect(x: 7, y: 5, width: 25, height: 25))
imageView.image = UIImage(named: "down_image")
} else {
imageView = UIImageView.init(frame: CGRect(x: 7, y: 5, width: 25, height: 25))
imageView.image = UIImage(named: "up_image")
}
let headerTitle = UILabel.init(frame: CGRect(x: 38, y: 4, width: 250, height: 28))
headerTitle.text = sectionData[section]
headerTitle.textColor = UIColor.white
let tappedSection = UIButton.init(frame: CGRect(x: 0, y: 0, width: headerView.frame.size.width, height: headerView.frame.size.height))
tappedSection.addTarget(self, action: #selector(sectionTapped), for: .touchUpInside)
tappedSection.tag = section
headerView.addSubview(imageView)
headerView.addSubview(headerTitle)
headerView.addSubview(tappedSection)
headerView.backgroundColor = UIColor.lightGray
return headerView
}
Try this, In here I added another view inside of headerView. Then only u can add padding in headerView.
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView.init(frame: CGRect(x: 0, y: 0, width: 300, height: 28))
let internalView = UIView.init(frame: CGRect(x: 0, y: 0, width: 300, height: 25))
var imageView = UIImageView()
if (expandSections.contains(section)) {
imageView = UIImageView.init(frame: CGRect(x: internalView.frame.size.width - 10 , y: 5, width: 25, height: 25))
imageView.image = UIImage(named: "down_image")
} else {
imageView = UIImageView.init(frame: CGRect(x: internalView.frame.size.width - 10 , y: 5, width: 25, height: 25))
imageView.image = UIImage(named: "up_image")
}
let headerTitle = UILabel.init(frame: CGRect(x: 38, y: 4, width: 250, height: 28))
headerTitle.text = sectionData[section]
headerTitle.textColor = UIColor.white
let tappedSection = UIButton.init(frame: CGRect(x: 0, y: 0, width: headerView.frame.size.width, height: headerView.frame.size.height))
tappedSection.addTarget(self, action: #selector(sectionTapped), for: .touchUpInside)
tappedSection.tag = section
internalView.addSubview(imageView)
internalView.addSubview(headerTitle)
internalView.addSubview(tappedSection)
headerView.addSubview(internalView)
headerView.backgroundColor = UIColor.lightGray
return headerView
}

Not showing merged image and text in swift 3

Hi I am new to swift 3 and Xcode 8 I have an issue in my below code Build get succeeded and it runs well in a simulator but image and text are not get showed what I did wrong?
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
generateImageWithText(text: "HelloWorld")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
#discardableResult
func generateImageWithText(text: String) -> UIImage
{
let image = UIImage(named: "apple_led.png")!
let imageView = UIImageView(image: image)
imageView.backgroundColor = UIColor.black
imageView.frame = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: 100, height: 100))
let label = UILabel(frame: CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: 50, height: 50)))
label.backgroundColor = UIColor.white
label.textAlignment = .center
label.textColor = UIColor.blue
label.text = text
UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0);
imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
label.layer.render(in: UIGraphicsGetCurrentContext()!)
let imageWithText = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext();
print(image)
print(text)
print(label)
return imageWithText!
}
}
Try this
func mergeImageAndText(text: NSString, atPoint: CGPoint) -> UIImage{
let demoImage = UIImage(named: "test.png")!
// Setup the font specific variables
let textColor = UIColor.white
let textFont = UIFont(name: "Helvetica", size: 14)!
// Setup the image context using the passed image
let scale = UIScreen.main.scale
UIGraphicsBeginImageContextWithOptions(demoImage.size, false, scale)
// Setup the font attributes that will be later used to dictate how the text should be drawn
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
] as [String : Any]
demoImage.draw(in: CGRect(x: 0, y: 0, width: 50, height:50))
let rect = CGRect(x: atPoint.x, y: atPoint.y, width: demoImage.size.width, height: demoImage.size.height)
// Draw the text into an image
text.draw(in: rect, withAttributes: textFontAttributes)
// Create a new image out of the images we have created
let newImage = UIGraphicsGetImageFromCurrentImageContext()
// End the context now that we have the image we need
UIGraphicsEndImageContext()
//Pass the image back up to the caller
return newImage!
}
Method Call:
let imagenew = self.mergeImageAndText(text: "TEST", atPoint: CGPoint(x: 10, y: 10))