TableView Expand/Collapse with Swift 3 - swift3

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
}

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 add textfield as a custom view in leftBarButtonItems, here textfield need to be capable to typing

how to add a new view that view having textfield and buttons in it and how this view can be added in leftbarbuttonitmes, and textfield need to be capable to typing.
Right now I have added this view to leftbarbuttonitems successfully but my textfield is not capable to type. Is there any way by which we can type if we add in leftbarbuttonitems.
Here it is: Just paste below code in your viewDidLoad method.
let viewLeftButton: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 160.0, height: 32.0))
let textField: UITextField = UITextField(frame: CGRect(x: 0, y: 0, width: 100.0, height: viewLeftButton.frame.size.height))
textField.borderStyle = .roundedRect
textField.font = UIFont.systemFont(ofSize: 14.0)
textField.placeholder = "Type here..."
let button: UIButton = UIButton(frame: CGRect(x: textField.frame.size.width + 8, y: 0, width: 44.0, height: viewLeftButton.frame.size.height))
button.setTitle("Click", for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 14.0)
button.setTitleColor(.blue, for: .normal)
viewLeftButton.addSubview(textField)
viewLeftButton.addSubview(button)
self.navigationItem.hidesBackButton = true
let leftBarButton = UIBarButtonItem(customView: viewLeftButton)
self.navigationItem.leftBarButtonItem = leftBarButton

Can't get UILabel to word wrap

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)
}
}

Material Swift tags input field [duplicate]

heyhey,
since a few days I attempt to create the "Material-Design-Chip", but only with half success.
The attempt with the most success I had, is to make a subclass from "Button" (Button is a subclass from UIButton created from cosmicmind in his MaterialDesign-Framework for swift).
For the people who doesn't know I mean with "chips": click here
my examples:
The simple / non-deletable chip
import UIKit
import Material
class ChipButton: Button {
override func prepare() {
super.prepare()
cornerRadiusPreset = .cornerRadius5
backgroundColor = UIColor.lightGray
titleColor = Color.darkText.primary
pulseAnimation = .none
contentEdgeInsets = EdgeInsets(top: 0, left: 12, bottom: 0, right: 12)
isUserInteractionEnabled = false
titleLabel?.font = RobotoFont.regular
isOpaque = true
}
}
and to create this button:
let button = ChipButton()
button.title = "default chip"
view.layout(button).height(32).center(offsetY: -150)
The contact-chip / icon-chip
import UIKit
import Material
class ChipIconButton: ChipButton {
/*override func prepare() {
super.prepare()
contentEdgeInsets = EdgeInsets(top: 0, left: 16, bottom: 0, right: 12)
}*/
public convenience init(image: UIImage?, title: String?){
self.init()
prepare(with: image, title: title)
}
private func prepare(with image: UIImage?, title: String?) {
self.image = image
self.title = title
self.imageView?.backgroundColor = UIColor.darkGray // this works
self.imageView?.cornerRadiusPreset = .cornerRadius4 // this works
self.imageView?.tintColor = Color.black // this doesn't work
self.imageEdgeInsets = EdgeInsets(top: 0, left: -8, bottom: 0, right: 12)
self.titleEdgeInsets = EdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
self.contentEdgeInsets = EdgeInsets(top: 0, left: 8, bottom: 0, right: 12)
}
}
here I want to
resize the UIImageView to the height of the chip (which is 32 points)
I tried with self.imageView?.frame = CGRect(x: 50, y: 50, width: 32, height: 32) but nothing changed
resize the UIImage little bit smaller (to 20 points)
to change the tintColor of the UIImage
I tryed with self.imageView?.tintColor = Color.black but nothing changed
The deletable chip
import UIKit
import Material
class ChipDeleteableButton: ChipButton {
override func prepare() {
super.prepare()
self.image = #imageLiteral(resourceName: "ic_close_white_24px")
self.title = title
//self.frame = CGRect(x: 50, y: 50, width: 32, height: 32)
self.imageView?.backgroundColor = UIColor.darkGray
self.imageView?.cornerRadiusPreset = .cornerRadius4
self.imageView?.tintColor = Color.black
self.imageEdgeInsets = EdgeInsets(top: 0, left: self.frame.size.width, bottom: 0, right: 0)
self.titleEdgeInsets = EdgeInsets(top: 0, left: 0, bottom: 0, right: self.frame.size.width)
self.contentEdgeInsets = EdgeInsets(top: 0, left: 8, bottom: 0, right: 12)
}
}
here I tried to switch the positions of the label and with imageEdgeInsets and titleEdgeInsets, but self.frame.size.width returns a incorrect width (maybe couse of AutoLayout but i'm not sure)
help
hope that somebody can help me!
ps. I'm little newbe at swift/xcode
The simple / non-deletable chip
here nothing changed.
look at the question.
The contact-chip / icon-chip
import UIKit
import Material
class ChipIconButton: ChipButton {
public convenience init(image: UIImage?, title: String?){
self.init()
prepare(with: image, title: title)
}
private func prepare(with image: UIImage?, title: String?) {
//self.imageView?.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
let myThumb = image?.resize(toWidth: 20)?.resize(toHeight: 20)
let shapeView = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
shapeView.backgroundColor = UIColor.darkGray
shapeView.cornerRadiusPreset = .cornerRadius5
shapeView.zPosition = (self.imageView?.zPosition)! - 1
self.addSubview(shapeView)
self.image = myThumb?.withRenderingMode(.alwaysTemplate)
self.title = title
self.imageView?.tintColor = self.backgroundColor
self.imageEdgeInsets = EdgeInsets(top: 0, left: -28, bottom: 0, right: 0)
self.titleEdgeInsets = EdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
self.contentEdgeInsets = EdgeInsets(top: 0, left: 20, bottom: 0, right: 12)
}
}
and the creation-snipped:
open func prepareChipIconButton () {
let icon: UIImage? = #imageLiteral(resourceName: "ic_close_white_24px")
let button = ChipIconButton(image: icon, title: "icon chip")
view.layout(button).height(32).center(offsetY: 0)
}
The deletable chip
import UIKit
import Material
class ChipDeleteableButton: ChipButton {
override func prepare() {
super.prepare()
let img = #imageLiteral(resourceName: "ic_close_white_24px").resize(toHeight:18)?.resize(toWidth: 18)
let myThumb = img?.withRenderingMode(.alwaysTemplate)
self.image = myThumb
self.title = title
self.imageView?.tintColor = self.backgroundColor
self.isUserInteractionEnabled = true
self.addTarget(self, action: #selector(clickAction), for: .touchUpInside)
self.imageView?.isUserInteractionEnabled = false
}
open func swapLabelWithImage() {
let rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)
self.imageEdgeInsets = EdgeInsets(top: 0, left: (rightLableSize?.width)! - 4, bottom: 0, right: 0)
self.titleEdgeInsets = EdgeInsets(top: 0, left: -54, bottom: 0, right: 0)
self.contentEdgeInsets = EdgeInsets(top: 0, left: 20, bottom: 0, right: 4)
let shapeView = UIView(frame: CGRect(x: self.imageEdgeInsets.left + 19, y: 6, width: 20, height: 20))
shapeView.backgroundColor = UIColor.darkGray
shapeView.cornerRadius = shapeView.frame.size.width/2
shapeView.zPosition = (self.imageView?.zPosition)! - 1
shapeView.isUserInteractionEnabled = false
self.addSubview(shapeView)
}
internal func clickAction(sender: ChipDeleteableButton) {
print("do something")
}
}
and the creation-snipped:
open func prepareChipDeleteableButton () {
let button = ChipDeleteableButton()
button.title = "deleteable chip"
button.swapLabelWithImage()
view.layout(button).height(32).center(offsetY: 150)
}
more info:
the creation-function r called in my ViewController, in viewWillAppear()
why i have a extra-function for my deletable-chip? - because i let AutoLayout do his job and after that i can get the necessary "String-width" of its label with let rightLableSize = self.titleLabel?.sizeThatFits((self.titleLabel?.frame.size)!)

How to make a CGRect animate

How can I create an animation like this one?
override func draw(_ rect: CGRect)
{
let xPointRect = viewWithTag(1)?.alignmentRect(forFrame: rect).midX
let yPointRect = viewWithTag(1)?.alignmentRect(forFrame: rect).midY
let widthSize = self.viewWithTag(1)?.frame.size.width
let heightSize = self.viewWithTag(1)?.frame.size.height
let sizeRect = CGSize(width: widthSize! * 0.8, height: heightSize! * 0.4)
let rectPlacementX = CGFloat(sizeRect.width/2)
let rectPlacementY = CGFloat(sizeRect.height/2)
let context2 = UIGraphicsGetCurrentContext()
context2?.setLineWidth(2.0)
context2?.setStrokeColor(UIColor.red.cgColor)
context2?.move(to: CGPoint(x: (xPointRect! - rectPlacementX), y: (yPointRect! - rectPlacementY)))
context2?.addLine(to: CGPoint(x: (xPointRect! + rectPlacementX), y: (yPointRect! + rectPlacementY)))
context2?.setLineDash(phase: 3, lengths: dashArray)
context2?.strokePath()
context2.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
UIView.animate(withDuration: 1.0,
delay: 0,
usingSpringWithDamping: 0.15,
initialSpringVelocity: 6.0,
options: .allowUserInteraction,
animations: { context2.transform = CGAffineTransform.identity },
completion: nil)
}
My current code is not working because context2 doesn't contain a member .transfer since it is a CGRect.
How can I make this line animate? Any idea?
A CGRect is not visible, so I do not see why you want to animate it.
I assume what you want to animate the frame of a UIView.
You can change many properties of a UIView in an animation block. Also it's frame:
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
someParentView.addSubview(view)
UIView.animate(withDuration: 2.5) {
someUIView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
}