Adding view from Xib to a transparent view, why it shows darker? - ios

Here is code
self.viewD = DayViewCalendar(frame: CGRect(x: 0, y: 0, width:
self.containerView.frame.size.width, height:
self.containerView.frame.size.height))
this is opaque is false and background is clear.
self.viewD.isOpaque = false
self.viewD.backgroundColor = UIColor.clear
self.containerView.addSubview(self.viewD)
Also for container same
container.isOpaque = false
container.backgroundColor = UIColor.clear
Output :
if i don't add ViewD than container is transparent, as in image
Question
Why Tow Transparent UIViews are not Transparent, it show slightly darker
Please suggest me where I am doing mistake

Here is something which could help you in the long run.
https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/debugging_with_xcode/chapters/special_debugging_workflows.html
This could help you debug view components and tell you which view exactly is the causing the gray area in your UI.
Hope this helps. Happy debugging

Related

Color unselected segment of UISegmentedControl without hiding selection

I wanted to color each segment in my UISegmentedControl in a different color. I used the following Swift code (there were some changes with segmentedControl in iOS 13):
segmentedControl.selectedSegmentTintColor = .white
let col: UIColor = .yellow
var subViewOfSegment: UIView = segmentedControl.subviews[2] as UIView
subViewOfSegment.layer.backgroundColor = col.cgColor
This works in general, one segment is now coloured. However, the selected segment is not shown anymore. The selected segment is supposed to be white, but it seems to be overlaid by the colour. The following image show how it looks when I select each segment from left to right:
I already tried subViewOfSegment.backgroundColor = col instead (same effect) or subViewOfSegment.tintColor = col (no effect at all in iOS 13) but I can't get the colors without hiding the selection. On other posts I only find this answer which doesn't say how to color unselected segments.
iOS 13 (Xcode 13.4) Segment Control 100% Working
mySegmentedControl.selectedSegmentTintColor = .white
let subView = mySegmentedControl.subviews[1] as UIView
subView.layer.backgroundColor = UIColor.yellow.cgColor
let subViewOfSegment: UIView = segmentedControl.subviews[1] as UIView
subViewOfSegment.backgroundColor = UIColor.red
subViewOfSegment.layer.zPosition = -999
> above solution is not proper but one of the way you can achieve it. you need manage one more label while select segment is red"`
`
You can do it by using the following code:
init(){
UISegmentedControl.appearance().backgroundColor = .yellow
}
var body: some View{
your code…
}
if you want to change the selected segment’s color, you can use:
UISegmentedControl.appearance().selectedSegmentTintColor = .blue
to change it. I hope these codes can help you :D
For detail, you can visit here.
Using Apple APIs, you could try drawing an image with the 4 colors and set that as background using setBackgroundImage(_:for:barMetrics:).
Here's some code to draw a 40x10 image with just one color to get you started:
let rect = CGRect(origin: CGPoint(x: 0, y:0), size: CGSize(width: 40, height: 10))
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()!
context.setFillColor(color.cgColor)
context.fill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
To get an image with your four colors, you need to repeat context.setFillColor(<varying color>) and context.fill(<varying rect>) four times.
The image should stretch, which means you it only needs to have four equally sized colored rectangles; you don't need to create it in the exact size of the segmented control.
You can then set the selected segment color using the selectedSegmentTintColor property.

UITableViewCell stacking layers

I have a custom UITableViewCell that contains an image, I added an extension to UIImageView that adds a layer to it to overlay a lighter color.
func overlay(widht: CGFloat, height: CGFloat, color: UIColor) {
let colorOverlay = CALayer()
colorOverlay.frame = CGRect(x: 0, y: 0, width: widht, height: height)
colorOverlay.backgroundColor = color.cgColor
self.layer.addSublayer(colorOverlay)
self.layer.masksToBounds = true
}
The issue here is that every time the cell gets reused, the layer gets added and thus they get stacked until, well, the image is no longer visible and all that's visible is a gray rectangle
self.image.overlay(widht: self.image.frame.width, height: self.image.frame.height, color: UIColor.gray)
How could I prevent the layer from stacking? Or how could I add an overlaying color to the image without using CALayer() that works with reusable cells
The problem should be you are adding the overlay to your image view every time you config your cell. Keep in mind, UITableView reuse the same cell instance if applicable. Doing through what to control your visual output is totally open. But make sure if your code run twice won't lead to any difference or to limit the execution of that piece of code only once is what you should focus here.

Shrink UIView from top

I have a uiview that is overlaying and blocking interaction with my view on top of the superview. I've tried bringing the blocked view to the front but that doesn't work either.
Here's the code for the blocking view:
self.gesstureView = UIView(frame: screenBounds)
if let gestureView = self.gesstureView, let controlDockView = self.controlDockView, let controlTopView = self.controlTopView {
gestureView.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
gestureView.frame.size.height -= controlDockView.frame.height
gestureView.contentMode = .center
gestureView.backgroundColor = UIColor.red
self.view.addSubview(gestureView)
Heres the code for the view that's blocked:
let topHeight = screenBounds.height * 0.15
self.controlTopView = UIView(frame: CGRect(x: 0, y: 0, width: screenBounds.width, height: topHeight))
if let controlTopView = self.controlTopView {
controlTopView.backgroundColor = UIColor.clear
controlTopView.autoresizingMask = [.flexibleTopMargin]
controlTopView.addBlurEffect()
self.view.addSubview(controlTopView)
// does not work view is still hidden
self.view.bringSubview(toFront: controlTopView)
Thanks for the sample code!
The problem is that you add your gestureView to the view hierarchy after you brought controlTopView to front. So controlTopView will actually be the second view this is why it is not visible.
To solve the problem either add controlTopView lastly or bring it to the front after you've added everything.
view.addSubview(previewView)
view.addSubview(controlDockView)
view.addSubview(gestureView)
view.addSubview(controlTopView)
Just in case -- have you checked if your controlTopView is not visible simply because it has nothing visible to draw? In your code snippet, the controlTopView only has a transparent background color and a blur effect (which wouldn't do anything to the solid red behind it).
The best way to really see whats going on is to use the UI debugger in Xcode. It will show you what is obscuring what. Also, it is very likely that the UIViews are being drawn in an order you are not anticipating.
You should resize and select the hidden view....if its actually there.

How to add an overlay layer to a UIImageView but not on the transparent part of the image?

I have this UIImageView:
self.princessImageView.image = UIImage(named: "princess")!
Now I am trying to add a coloured layer with an alpha of 0.3 on this image. I tried this:
let overlayView: UIView = UIView(frame: CGRect(x: 0,
y: 0,
width: self.princessImageView.frame.size.width,
height: self.princessImageView.frame.size.height))
overlayView.backgroundColor = UIColor.blue.withAlphaComponent(0.3)
self.princessImageView.addSubview(overlayView)
But I'm getting this result.
I understand that of course it's because I'm setting an overlay on the whole view. Is there any way so I can set the overlay only on the non-transparent part of the image ?
Thanks for your help.
You need to play with blending modes for that.
Apple documentation : link
Some relevant stuff which might help : link1
link2

How to make UIButton a circle?

I have been trying to make the UIButton in the cells a perfect circle. Unfortunately the circle has been formed based on the background image rather than the UIButton frame.
The code I have for creating a circle:
cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 100, 100)
cell.StoryViewButton.layer.masksToBounds = false
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
cell.StoryViewButton.clipsToBounds = true
The output looks like this:
What can I do to get the perfect circle button frames that I want?
Try something like this
cell.StoryViewButton.layer.masksToBounds = true
cell.StoryViewButton.layer.cornerRadius = cell.StoryViewButton.frame.width/2
If you need to create a circle of view you have to set masksToBounds to true, do not set clipsToBounds
Hope this will help you.
Swift 4
You could apply the following function to any view, including buttons.
func makeViewCircular(view: UIView) {
view.layer.cornerRadius = view.bounds.size.width / 2.0
view.clipsToBounds = true
}
Great.
That didn't work for me at first as I applied it in the viewDidLoad, though. At this point, constraints are still playing with the size of your buttons and the corner radius is applied to a button it thinks is twice the size, resulting in the odd shapes you have. To apply the right values to the right measurements, place the code in override func viewDidLayoutSubviews().
I know this may be a more specific case within my personal process, yet I'm sure it'll help somebody.
There is the working code.I test it. Hope it helps.
I am not sure why but I check that by changing height and width of the frame in here "CGRectMake(50, 8, 120, 120)" that the height and width of the frame and height and width of a button should be same to get the perfect circle.
cell.StoryViewButton.setImage(image, forState: .Normal)
cell.StoryViewButton.frame = CGRectMake(50, 8, 120, 120)
cell.StoryViewButton.layer.cornerRadius = self.btn.frame.width/2;
cell.StoryViewButton.layer.masksToBounds = true
Hope it helps.

Resources