UIScrollView non funziona con l'autolayout a livello di codice (usando più di un'immagine)

Question

Svilupperemo un progetto in ios, in modo che sto imparando un layout automatico con scrollview, sta funzionando bene quando ho aggiunto un'immagine, quando sono cercando di aggiungere più di un'immagine, ho avuto una cosa molto strana, la prima immagine è stata allungata a lungo e si sovrappone a un'immagine molto prossima. Ecco il mio codice

UIScrollView *scrollView = [[UIScrollView alloc] init]; 
UIImageView *imageView = [[UIImageView alloc] init]; 
[imageView setImage:[UIImage imageNamed:@"2.png"]]; 

UIImageView *imageView1 = [[UIImageView alloc] init]; 
[imageView1 setImage:[UIImage imageNamed:@"01.png"]]; 
[self.view addSubview:scrollView]; 

[scrollView addSubview:imageView1]; 
[scrollView addSubview:imageView]; 

scrollView.translatesAutoresizingMaskIntoConstraints = NO; 
imageView.translatesAutoresizingMaskIntoConstraints = NO; 
imageView1.translatesAutoresizingMaskIntoConstraints = NO; 

self.imageViewPointer = imageView; 
self.imageViewPointer = imageView1; 
scrollView.maximumZoomScale = 2; 
scrollView.minimumZoomScale = .5; 
scrollView.delegate = self; 

NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(scrollView,imageView,imageView1); 
NSLog(@"Current views dictionary: %@", viewsDictionary); 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]]; 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]|" options:0 metrics: 0 views:viewsDictionary]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-415-[imageView]|" options:0 
                    metrics: 0 views:viewsDictionary]]; 

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView1]-20-|" options:0 metrics: 0 views:viewsDictionary]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageView1]-150-|" options:0 metrics: 0 views:viewsDictionary]]; 

e ho ottenuto l'uscita !!!

Answer 1

La dimensione della zona di scorrimento del vostro ScrollView sarà fissato dai vincoli dei suoi subviews.

Hai 2 vincoli che possono essere utilizzati per specificare l'altezza dell'area scorrevole:

1. "V:|-415-[imageView]|"

   Questo dice Layout automatico per posizionare la vostra immagine 415 punti dalla cima della sua superview e per mettere 0 punti dal fondo della sua superview. Non specifica l'altezza, ma Auto Layout utilizzerà l'altezza dell'immagine contenuta in imageView dato nessun altro vincolo. Notare che imageView può essere allungato se necessario per soddisfare altri vincoli.

2. "V:|[imageView1]-150-|"

   Questo dice Auto Layout di inserire il vostro immagine 0 punti dalla vetta della sua superview e 150 punti dal fondo della sua superview. Non specifica l'altezza. Per questo motivo, Auto Layout è libero di allungare una delle immagini per soddisfare entrambi i vincoli.

Invece, è necessario fornire informazioni su come le immagini sono distanziate l'una rispetto all'altra. Per esempio:

"V:|-20-[imageView1]-20-[imageView]-20-|"

Se si sta aggiungendo queste immagini una alla volta, non c'è bisogno di specificare questo in una sola volta. Si potrebbe aggiungere i vincoli in questo modo:

"V:|-20-[imageView1]"

"imageView1 è a 20 punti dalla vetta della superview"

"V:[imageView1]-20-[imageView]"

"IMAGEVIEW è 20 punti sotto imageView1"

"V:[imageView]-20-|"

"imageView è 20 punti dal bot tom of the superview "

Quando sono state vincolate tutte le viste delle immagini l'una all'altra e nella parte superiore e inferiore di scrollView, Auto Layout sarà in grado di calcolare l'altezza della scrollView.

---

si sta andando ad avere un problema simile con i tuoi larghezze pure. Hai vincolata entrambe le immagini per entrambi i lati del Superview:

"H:|-20-[imageView]|"
"H:|[imageView1]-20-|"

A causa di ciò, Layout automatico allungherà una delle immagini per soddisfare i vincoli. Solo la tua immagine più ampia dovrebbe essere usata per specificare la larghezza della scrollView. Tutti gli altri dovrebbero essere limitati al bordo sinistro del superview e lasciare il trailing |.

Anche in questo caso, se si aggiungono queste immagini una per una e non si sa quale sia la più ampia fino a quando non le hai aggiunte tutte, tieni traccia di quella più ampia che hai visto finora e vincola solo le immagini al bordo sinistro. Poi, quando si è fatto, aggiungere un vincolo per impostare la larghezza della vostra zona di scorrimento in base alla visualizzazione più ampia:

"H:|-20-[imageView]-20-|"

Answer 2

che cosa esattamente si vuole raggiungere? Se si desidera avere un elenco delle immagini, è necessario utilizzare UITableView. Ma in ogni caso, il codice sarà più simile a questo:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]]; 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]]; 

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView]|" options:0 metrics: 0 views:viewsDictionary]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-415-[imageView]" options:0 
                    metrics: 0 views:viewsDictionary]]; 

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageView1]|" options:0 metrics: 0 views:viewsDictionary]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[imageView1]" options:0 metrics: 0 views:viewsDictionary]];