简体   繁体   中英

how to programmatically show a colored disk behind a UIImageView, in swift on an iOS device

I have an icon that I programmatically display.
How can I display a solid, colored disk behind the icon, at the same screen position?

Icon is opaque.

I will sometimes programmatically change screen position and disk's diameter and color.

Here's how I programmatically display the icon now.............

DispatchQueue.main.async
{

       ViewController.wrist_band_UIImageView.frame = CGRect(   x: screen_position_x, 
                                                               y: screen_position_y,
                                                               width: App_class.screen_width,
                                                               height: App_class.screen_height)
}

UPDATE #1 for D.Mika below... 在此处输入图像描述

UPDATE #2 for D.Mika below...

import UIKit
            import Foundation


class ViewController: UIViewController 
{
    static var circleView: UIView!

    static let wrist_band_UIImageView: UIImageView = {
       let theImageView = UIImageView()
       theImageView.image = UIImage( systemName: "applewatch" )
       theImageView.translatesAutoresizingMaskIntoConstraints = false 
       return theImageView
    }()

    override func viewDidLoad()     
    {
            super.viewDidLoad()

            view.addSubview( ViewController.wrist_band_UIImageView )
        // Init disk image:
        ViewController.circleView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))
        ViewController.circleView.backgroundColor = .red
        ViewController.circleView.layer.cornerRadius = view.bounds.size.height / 2.0
        ViewController.circleView.clipsToBounds = true
            // Add view to view hierarchy below image view
        ViewController.circleView.insertSubview(view, belowSubview: ViewController.wrist_band_UIImageView)


        App_class.display_single_wearable()
    }
 }

 class App_class
 {
    static var is_communication_established = false
    static var total_packets = 0

    static func display_single_wearable()
    {
                ViewController.wrist_band_UIImageView.frame = CGRect(x: 0, y: 0,
                                                                      width: 100, height: 100)

                ViewController.circleView.frame = CGRect(   x: 0,
                                             y: 0,
                                             width: 100,
                                             height: 100)
                ViewController.circleView.layer.cornerRadius = 100
    }

    static func process_location_xy(text_location_xyz: String)
    {}
} // App_class

在此处输入图像描述

You can display a colored circle using the following view:

circleView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))
circleView.backgroundColor = .red
circleView.layer.cornerRadius = view.bounds.size.height / 2.0
circleView.clipsToBounds = true
// Add view to view hierarchy below image view
view.insertSubview(circleView, belowSubview: wrist_band_UIImageView)

You can change it's position and size by applying a new frame. But you have to change the layer's cornerRadius accordingly.

This is a simple example in a playground: 游乐场样本

Edit: I've modified the sample code to add the view the view hierarchy. BUT, you still need to adjust the circle's frame, when you modify the image view's frame. (and the cornerRadius accordingly). For example

DispatchQueue.main.async
{
    
    ViewController.wrist_band_UIImageView.frame = CGRect(   x: screen_position_x,
                                                            y: screen_position_y,
                                                            width: App_class.screen_width,
                                                            height: App_class.screen_height)
    circleView.frame = CGRect(   x: screen_position_x,
                                 y: screen_position_y,
                                 width: App_class.screen_width,
                                 height: App_class.screen_height)
    circleView.layer.cornerRadius = App_class.screen_width
}

And you need to add a variable to the viewController holding the reference to the circle view, like:

var circleView: UIView!

The following answer works.

The answers from d.mika above did not work. Plus, he was insulting. ;-)

// Show red circle
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: 200, y: 400), radius: CGFloat(40), startAngle: CGFloat(0), endAngle: CGFloat(Double.pi * 2), clockwise: true)
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    
    // Change the fill color
    shapeLayer.fillColor = UIColor.red.cgColor
    // You can change the stroke color
    shapeLayer.strokeColor = UIColor.red.cgColor
    // You can change the line width
    shapeLayer.lineWidth = 3.0
    
    view.layer.addSublayer(shapeLayer)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM