ios - tra - formula calcolo percentuale




Come creare una percentuale della larghezza totale usando l'autolayout? (2)

Con l'introduzione di UIStackView , Apple ha reso il lavoro molto più semplice.

Metodo 1: Utilizzo di pennino / StoryBoard:

Devi solo aggiungere tre viste nel builder dell'interfaccia e incorporarle in stackview

Xcode ► Editor ► Incorpora in ► StackView

Seleziona stackView e dai un vincolo con l'altezza iniziale, finale, superiore e uguale con safeArea

Fai clic sull'area ispettore Attributi e imposta StackView orizzontale e distribuzione per riempire in modo proporzionale

[ 3

Dare un vincolo di tre viste con in testa, in coda, in alto, in basso con rispettivi lati.

Metodo 2: al livello di programmazione:

import UIKit
class StackViewProgramatically: UIViewController {
    var propotionalStackView: UIStackView!
    ///Initially defining three views
    let redView: UIView = {
        let view = UIView()//taking 42 % initially
        view.frame = CGRect(x: 0, y: 0, width: 42 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .red
        return view
    }()

    let greenView: UIView = {
        let view = UIView()//taking 42* initially
        view.frame = CGRect(x: 42 * UIScreen.main.bounds.width/100, y: 0, width: 25 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .green
        return view
    }()
    let blueView: UIView = {
        let view = UIView()//taking 33*initially
        view.frame = CGRect(x: 67 * UIScreen.main.bounds.width/100, y: 0, width: 33 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .blue
        return view
    }()

    ///Changing UIView frame to supports landscape mode.
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        DispatchQueue.main.async {
            self.redView.frame = CGRect(x: 0, y: 0, width: 42 * self.widthPercent, height: self.screenHeight)
            self.greenView.frame = CGRect(x: 42 * self.widthPercent, y: 0, width: 25 * self.widthPercent, height: self.screenHeight)
            self.blueView.frame = CGRect(x: 67 * self.widthPercent, y: 0, width: 33 * self.widthPercent, height: self.screenHeight)
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        //Adding subViews to the stackView
        propotionalStackView = UIStackView()
        propotionalStackView.addSubview(redView)
        propotionalStackView.addSubview(greenView)
        propotionalStackView.addSubview(blueView)
        propotionalStackView.spacing = 0
        ///setting up stackView
        propotionalStackView.axis = .horizontal
        propotionalStackView.distribution = .fillProportionally
        propotionalStackView.alignment = .fill
        view.addSubview(propotionalStackView)
    }
}
//MARK: UIscreen helper extension
extension NSObject {

    var widthPercent: CGFloat {
        return UIScreen.main.bounds.width/100
    }

    var screenHeight: CGFloat {
        return UIScreen.main.bounds.height
    }
}

Produzione:

Funziona con paesaggio e ritratto

Progetto dimostrativo - https://github.com/janeshsutharios/UIStackView-with-constraints

https://developer.apple.com/videos/play/wwdc2015/218/

Devo creare tre colonne dinamiche, ciascuna con una percentuale fissa della larghezza totale. Non terzi, ma valori diversi. Ad esempio, l'illustrazione seguente mostra tre colonne: la prima è larga 42%, la seconda è larga 25% e la terza è larga 33%.

Per un pixel da 600 pixel sul viewcontroller, sarebbero rispettivamente 252, 150 e 198 pixel.

Tuttavia, per eventuali dimensioni di visualizzazione successive (ad esempio iPhone 4 orizzontale (960 di larghezza) o iPad 2 verticale (768 di larghezza), vorrei che le percentuali relative fossero le stesse (non le larghezze di pixel sopra citate).

C'è un modo per farlo usando gli Storyboard (cioè senza codice)? Posso farlo facilmente in codice, ma il mio obiettivo è mettere quanto più possibile questa logica di visualizzazione nello Storyboard.


Penso che questo possa essere spiegato in modo più dettagliato in modo che possa essere applicato più facilmente a qualsiasi numero di visualizzazioni che richiedono layout a percentuale fissa all'interno di una superview.

Vista a sinistra

  • Ancorato a SuperView.Leading
  • Definisce la percentuale fissa come moltiplicatore sul SuperView.Height

Visualizzazioni intermedie

  • Definisce la percentuale fissa come moltiplicatore sul SuperView.Height
  • Pins è a left a destra del suo vicino

Vista a destra

  • Non definisce una percentuale fissa (è il resto della vista disponibile)
  • Pins è a left a destra del suo vicino
  • Pins è right a SuperView.Trailing

Tutte le viste

  • Definire le loro altezze non fisse ancorando alla Top Layout Guide.Top Top Layout Guide.bottom . Top Layout Guide.bottom e Top Layout Guide.bottom . Nella risposta sopra, si noti che questo può essere fatto anche impostando un'altezza uguale alla vista vicina.




autolayout