At first glance they look like regular UIButtons however they got a label below it. Also the background of the button seems to be a blurred effect.
So my thoughts are that they are put in a CollectionView (Horizontal). With each cell containing a UIButton and a UILabel. Although that may work the UIButton doesn't seem to get the move effect for free.
Is that custom behavior? And if so, how are you able to create such an effect?
I bet it is not an UICollectionView but a horizontal UIStackView of custom views in which there is a UIButton and UILabel vertically aligned.
Here you have an example, using stackViews:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.distribution = .equalSpacing
stackView.alignment = .center
stackView.spacing = 30
view.addSubview(stackView)
["One", "Two", "Three", "Caramba"].forEach {
let buttonStackView = UIStackView()
buttonStackView.axis = .vertical
buttonStackView.distribution = .fillProportionally
buttonStackView.alignment = .center
buttonStackView.spacing = 15
let button = UIButton(type: .system)
button.setTitle($0, for: .normal)
buttonStackView.addArrangedSubview(button)
let label = UILabel()
label.text = $0
label.font = UIFont.systemFont(ofSize: 20)
buttonStackView.addArrangedSubview(label)
stackView.addArrangedSubview(buttonStackView)
}
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}
}
Having a custom view instead of a vertical uistackview for each button would allow to customize its layout when focused, including Parallax effect.
For adding parallax effect to each button in the stack, take a look to How to get Parallax Effect on UIButton in tvOS?
Related
I want to make a scroll view programmatically in xcode and want to add anchor constraints using safe area layout guide Auto Layout. And want to add some text views button and map init but could not find any proper way to do this. I have tried many codes. What is the proper code for this?
Please try below code for programmatically create Scroll view and add UIView inside XCode
Swift 4.0
import UIKit
class ViewController: UIViewController {
let scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
let myView: UIView = {
let view = UIView()
view.backgroundColor = .yellow
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
// add the scroll view to self.view
self.view.addSubview(scrollView)
// constrain the scroll view to 8-pts on each side
scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true
scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true
//Frame for UIView here
myView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
scrollView.addSubview(myView)
}
}
I've got this extension for my collection view that makes horizontal scroll but I want to change it on vertical scroll??
extension viewRe : UIScrollViewDelegate
{
func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
{
let layout = self.recipesCollView?.collectionViewLayout as! UICollectionViewFlowLayout
let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing
var offset = targetContentOffset.memory
let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing
let roundedIndex = round(index)
offset = CGPoint(x: roundedIndex * cellWidthIncludingSpacing - scrollView.contentInset.left, y: -scrollView.contentInset.top)
targetContentOffset.memory = offset
}
}
With this extension I'm trying to make the cells to stick to the TOP of the view even when he scrolls because the paging is enabled. So whenever the user scrolls i would like the cell to stick to the top and so on when the user scrolls.
#donnyWals is right. If you are using a UICollectionView just change its UICollectionViewFlowLayout
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = . Horizontal
let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
or if you have an existent UICollectionView
if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
layout.scrollDirection = .Horizontal
}
Follow the official API:
UICollectionView
UICollectionViewFlowLayout
I have set up my UIImageView using the below setup. I am trying to draw on the view but can not get anything to appear. I am new to Xcode and want my view to automatically change depending on what the screen size is. When I have used the storyboard I could not figure out how to get the view to change with the screen size and/or rotation. As a result I figured it would be easier to make that happen in the ViewController.swift file. When the program wasn't working I tried to see if the view was appearing on the screen. When I made one of the views red, I still could not see anything on the screen. I am very confused. I am open to any feedback. I appreciate you taking time to read this and am looking forward to assistance.
Thanks,
T
import UIKit
import CoreGraphics
class ViewController: UIViewController {
var ResultImageView = UIImageView ( frame: UIScreen.mainScreen().bounds)
var DrawingImageView = UIImageView ( frame: UIScreen.mainScreen().bounds)
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
ResultImageView.userInteractionEnabled = true
ResultImageView.backgroundColor = UIColor.redColor()
DrawingImageView.userInteractionEnabled = true
}
I think the problem is you have to create the imageview in viewDidAppear if you're setting the screen size, because the screen size hasn't been set and orientated where you're setting it. Try the below and hope this issue gets resolved soon :)
var ResultImageView = UIImageView()
var DrawingImageView = UIImageView()
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(true)
ResultImageView = UIImageView (frame: self.view.frame)
DrawingImageView = UIImageView (frame: self.view.frame)
ResultImageView.userInteractionEnabled = true
self.view.addSubview(ResultImageView)
self.view.addSubview(DrawingImageView)
ResultImageView.backgroundColor = UIColor.redColor()
DrawingImageView.userInteractionEnabled = true
}
I want to change the background and text of the button on click, I tried several SO solutions but they haven't worked, you can see what I tried in my project:
https://github.com/jzhang172/modalTest
I tried debugging it by putting a simple print statement and it looks like it doesn't ever go to it.
UIButton's have a method for setting the title color. So if you had a UIButton IBOutlet named myBtn:
myBtn.setTitleColor(UIColor.blackColor(), forState: .Highlighted)
and to change the text of the button on touch:
myBtn.setTitle("This button was touched", forState: .Highlighted)
As far as setting the background color, you could add an extension for your UIButton which allows you to do this:
extension UIButton {
private func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor)
CGContextFillRect(context, rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
func setBackgroundColor(color: UIColor, forUIControlState state: UIControlState) {
self.setBackgroundImage(imageWithColor(color), forState: state)
}
}
Then you could do:
myBtn.setBackgroundColor(UIColor.grayColor(), forUIControlState: .Highlighted)
Hope this helps!
SOLUTION:
1) Create an IBAction from your UIButton and also an IBOutlet called button.
EDIT: As per your request (How to trigger the even when the button is TOUCHED, not RELEASED?):
2) Do this:
#IBAction func changes (sender: UIButton) {
button.backgroundColor = UIColor.blueColor()
button.setTitle("Button Title", forState: UIControlState.Normal)
}
Your UIButton #IBOutlet closePop is hooked up to a single #IBAction of the exact same name (closePop()). That closePop() IBAction ONLY dismisses the helpViewController - it doesn't do anything about the text or button color.
Your other #IBAction function like, in which you try to set the color & print "Is this even working?", is not hooked up to the button, and is never called.
I can make the navigation bar black or any other color but when I try white, it just makes it grey. For the curious, here's the code I'm using:
[[UINavigationBar appearance] setBarTintColor:[UIColor whiteColor]];
What's going on here?
Found the solution. Just setting the translucency off did the trick.
[[UINavigationBar appearance] setTranslucent:NO];
When I stop and think about it, it should have been obvious.
If you want to set the colour of a individual bar put the following in your .m file:
Creating the navigation controller:
UINavigationController *myNavigationController = [[UINavigationController alloc] initWithRootViewController:tableViewController];
Changing the color of the bar:
myNavigationController.navigationBar.backgroundColor = [UIColor blueColor];
setBarTintColor is a tint, meaning that it's tinted — which is why you see gray instead of white (if not overlaying white). If you want to fill the navigation bar with a solid color then try using setBackGroundColor:
[[UINavigationBar appearance] setBackgroundColor:[UIColor whiteColor]];
If you still wanted some control with the alpha values you could use:
[[UINavigationBar appearance] setBackgroundColor:[UIColor colorWithWhite:1.0 alpha:1.0]];
Beginning with iOS 7, navigation bars, tab bars, and tool bars
(henceforth referred to as 'bars') are configured to be translucent by
default. A translucent bar mixes its barTintColor with gray before
combining it with a system-defined alpha value to produce the final
background color that is used to composite the bar with the content it
overlies.
↳ UIColor Class Reference
I made new class CustomViewController.swift, like this:
import UIKit
class CustomViewController: UINavigationController {
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
let nav = self.navigationBar
nav.barStyle = UIBarStyle.black
nav.barTintColor = UIColor.white
//nav.tintColor = UIColor.white
nav.backgroundColor = UIColor.white
nav.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
}
}
It's not work till I remove in another class lines that overvrite my changes:
//nc.navigationBar.shadowImage = UIImage()
//nc.navigationBar.setBackgroundImage(#imageLiteral(resourceName: "bar_background"), for: .default)
For iOS13, the new way to customize navigation bar is to use UINavigationBarAppearance.
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.backgroundColor = .white
// or navBarAppearance.configureWithTransparentBackground()
navigationController?.navigationBar.standardAppearance = navBarAppearance
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithDefaultBackground()
navigationController?.navigationBar.standardAppearance = navBarAppearance
}
Note:
.scrollEdgeAppearance will be used if your view contains a
scrollview and it’s scrolled at the top
.compactAppearance for
iPhone in landscape
.standardAppearance for the rest