Bagaimana cara menggunakan tata-letak otomatis untuk memindahkan tampilan lain saat suatu tampilan disembunyikan?

Saya telah mendesain Sel khusus saya di IB, mensubklasifikasikan dan menghubungkan outlet saya ke kelas khusus saya. Saya memiliki tiga subview dalam konten sel yaitu: UIView (cdView) dan dua label (titleLabel dan emailLabel). Bergantung pada data yang tersedia untuk setiap baris, kadang-kadang saya ingin UIView dan dua label ditampilkan di sel saya dan kadang-kadang hanya dua label. Apa yang saya coba lakukan adalah menetapkan batasan seperti itu jika saya mengatur properti UIView menjadi tersembunyi atau saya akan menghapusnya dari superview dua label akan pindah ke kiri. Saya mencoba mengatur batasan utama UIView menjadi Superview (konten sel) untuk 10px dan batasan utama UILabel untuk 10 px ke tampilan berikutnya (UIView). Kemudian dalam kode saya

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(IndexPath *)indexPath {
...
Record *record = [self.records objectAtIndex:indexPath.row];

if ([record.imageURL is equalToString:@""]) {
     cell.cdView.hidden = YES;
}

Saya menyembunyikan cell.cdView saya dan saya ingin label untuk pindah ke kiri namun mereka tetap berada di posisi yang sama di Cell. Saya mencoba menghapus cell.cdView dari superview tetapi tidak berhasil juga. Saya telah melampirkan gambar untuk menjelaskan tentang saya.

Saya tahu bagaimana melakukan ini secara terprogram dan saya tidak mencari solusi itu. Yang saya inginkan adalah menetapkan batasan dalam IB dan saya berharap bahwa subview saya akan bergerak secara dinamis jika tampilan lain dihapus atau disembunyikan. Apakah mungkin untuk melakukan ini di IB dengan tata letak otomatis?

.....

Itu mungkin, tetapi Anda harus melakukan sedikit pekerjaan ekstra. Ada beberapa hal konseptual untuk keluar dari jalan pertama:

• Tampilan tersembunyi, meskipun tidak menggambar, tetap berpartisipasi dalam Tata Letak Otomatis dan biasanya mempertahankan bingkai mereka , meninggalkan tampilan terkait lainnya di tempat mereka.
• Saat menghapus tampilan dari superview-nya, semua kendala terkait juga dihapus dari hierarki tampilan itu.

Dalam kasus Anda, ini kemungkinan berarti:

• Jika Anda mengatur tampilan kiri Anda untuk disembunyikan, label tetap di tempatnya, karena tampilan kiri itu masih memakan tempat (meskipun itu tidak terlihat).
• Jika Anda menghapus tampilan kiri Anda, label Anda mungkin akan dibiarkan ambigu terbatas, karena Anda tidak lagi memiliki batasan untuk tepi kiri label Anda.

Yang perlu Anda lakukan adalah membatasi label Anda dengan bijaksana . Biarkan kendala Anda saat ini (ruang 10pts ke tampilan lain), tetapi tambahkan kendala lain: jadikan tepi kiri label Anda 10pts dari tepi kiri superview mereka dengan prioritas yang tidak diperlukan (prioritas tinggi default mungkin akan bekerja dengan baik).

Kemudian, ketika Anda ingin mereka bergerak ke kiri, hapus tampilan kiri sama sekali. Batasan 10pt wajib untuk tampilan kiri akan menghilang bersama dengan tampilan yang terkait dengannya, dan Anda akan dibiarkan hanya dengan kendala prioritas tinggi yang labelnya berjarak 10 poin dari superview mereka. Pada pass tata letak berikutnya, ini akan menyebabkan mereka melebar ke kiri sampai mereka memenuhi lebar superview tetapi untuk jarak Anda di sekitar tepi.

Satu peringatan penting: jika Anda ingin tampilan kiri Anda kembali dalam gambar, Anda tidak hanya harus menambahkannya kembali ke hierarki tampilan, tetapi Anda juga harus membangun kembali semua kendala pada saat yang sama. Ini berarti Anda memerlukan cara untuk mengembalikan batasan spasi 10pt antara tampilan dan labelnya setiap kali tampilan itu ditampilkan lagi.

Menambah atau menghapus kendala selama runtime adalah operasi kelas berat yang dapat memengaruhi kinerja. Namun, ada alternatif yang lebih sederhana.

Untuk tampilan yang ingin Anda sembunyikan, atur batasan lebar. Batasi tampilan lain dengan celah horizontal mengarah ke tampilan itu.

Untuk menyembunyikan, perbarui .constantbatasan lebar ke 0.f. Tampilan lain akan secara otomatis bergerak ke kiri untuk mengambil posisi.

Lihat jawaban saya yang lain di sini untuk perincian lebih lanjut:

Bagaimana cara mengubah batasan label selama runtime?

Bagi mereka yang hanya mendukung iOS 8+ , ada properti boolean baru yang aktif . Ini akan membantu untuk mengaktifkan hanya kendala yang diperlukan secara dinamis

Stopkontak PS Constraint harus kuat , tidak lemah.

Contoh:

@IBOutlet weak var optionalView: UIView!
@IBOutlet var viewIsVisibleConstraint: NSLayoutConstraint!
@IBOutlet var viewIsHiddenConstraint: NSLayoutConstraint!

func showView() {
    optionalView.isHidden = false
    viewIsVisibleConstraint.isActive = true
    viewIsHiddenConstraint.isActive = false
}

func hideView() {
    optionalView.isHidden = true
    viewIsVisibleConstraint.isActive = false
    viewIsHiddenConstraint.isActive = true
}

Juga untuk memperbaiki kesalahan di storyboard Anda harus menghapus Installedcentang pada kotak centang untuk salah satu kendala ini.

UIStackView (iOS 9+)
Satu opsi lagi adalah membungkus pandangan AndaUIStackView. Setelah tampilan disembunyikanUIStackViewakan memperbarui tata letak secara otomatis

UIStackViewreposisi pandangannya secara otomatis ketika hiddenproperti diubah pada salah satu dari subview-nya (iOS 9+)

UIView.animateWithDuration(1.0) { () -> Void in
   self.mySubview.hidden = !self.mySubview.hidden
}

Lompat ke 11:48 dalam video WWDC ini untuk demo:

Misteri Tata Letak Otomatis, Bagian 1

Proyek saya menggunakan @IBDesignablesubkelas khusus UILabel(untuk memastikan konsistensi dalam warna, font, inset, dll.) Dan saya telah menerapkan sesuatu seperti berikut:

override func intrinsicContentSize() -> CGSize {
    if hidden {
        return CGSizeZero
    } else {
        return super.intrinsicContentSize()
    }
}

Ini memungkinkan subclass label untuk mengambil bagian dalam Tata Letak Otomatis, tetapi tidak mengambil ruang ketika disembunyikan.

Untuk Googler: membangun jawaban Max, untuk menyelesaikan masalah padding yang banyak orang perhatikan, saya hanya menambah tinggi label dan menggunakan tinggi itu sebagai pemisah alih-alih padding aktual. Gagasan ini dapat diperluas untuk skenario apa pun yang berisi tampilan.

Berikut ini contoh sederhana:

Dalam hal ini, saya memetakan ketinggian label Penulis ke yang sesuai IBOutlet:

@property (retain, nonatomic) IBOutlet NSLayoutConstraint* authorLabelHeight;

dan ketika saya mengatur ketinggian batasan untuk 0.0f, kami mempertahankan "padding", karena ketinggian tombol Play memungkinkan untuk itu.

hubungkan batasan antara uiview dan label sebagai IBOutlet dan atur anggota prioritas ke nilai yang lebih rendah saat disembunyikan = YES

Apa yang akhirnya saya lakukan adalah membuat 2 xibs. Satu dengan tampilan kiri dan satu tanpa itu. Saya mendaftarkan keduanya di controller dan kemudian memutuskan mana yang akan digunakan selama cellForRowAtIndexPath.

Mereka menggunakan kelas UITableViewCell yang sama. Kelemahannya adalah bahwa ada beberapa duplikasi konten antara xibs, tetapi sel-sel ini cukup mendasar. Sisi baiknya adalah saya tidak memiliki banyak kode untuk mengelola penghapusan tampilan secara manual, memperbarui kendala, dll.

Secara umum, ini mungkin solusi yang lebih baik karena tata letak mereka berbeda secara teknis dan karenanya harus memiliki xib yang berbeda.

[self.table registerNib:[UINib nibWithNibName:@"TrackCell" bundle:nil] forCellReuseIdentifier:@"TrackCell"];
[self.table registerNib:[UINib nibWithNibName:@"TrackCellNoImage" bundle:nil] forCellReuseIdentifier:@"TrackCellNoImage"];

TrackCell *cell = [tableView dequeueReusableCellWithIdentifier:(appDelegate.showImages ? @"TrackCell" : @"TrackCellNoImage") forIndexPath:indexPath];

Dalam hal ini, saya memetakan ketinggian label Penulis ke IBOutlet yang sesuai:

@property (retain, nonatomic) IBOutlet NSLayoutConstraint* authorLabelHeight;

dan ketika saya mengatur ketinggian batasan menjadi 0,0f, kami mempertahankan "padding", karena ketinggian tombol Play memungkinkan untuk itu.

cell.authorLabelHeight.constant = 0;

Gunakan dua UIStackView Horizontal dan Vertical, ketika beberapa tampilan subview dalam stack disembunyikan, subview stack lainnya akan dipindahkan, gunakan Distribution -> Fill Proportionally for Vertical stack dengan dua UILabels dan perlu tetapkan lebar dan tinggi konstan untuk UIView pertama

Coba ini, saya telah menerapkan kode di bawah ini,

Saya punya satu View di ViewController yang menambahkan tiga tampilan lainnya, Ketika ada tampilan yang disembunyikan dua tampilan lainnya akan bergerak, Ikuti langkah-langkah di bawah ini. ,

File 1.ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIView *viewOne;
@property (strong, nonatomic) IBOutlet UIView *viewTwo;
@property (strong, nonatomic) IBOutlet UIView *viewThree;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewOneWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewTwoWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewThreeWidth;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *viewBottomWidth;
@end

2.ViewController.m

 #import "ViewController.h"
 @interface ViewController ()
{
  CGFloat viewOneWidthConstant;
  CGFloat viewTwoWidthConstant;
  CGFloat viewThreeWidthConstant;
  CGFloat viewBottomWidthConstant;
}
@end

@implementation ViewController
@synthesize viewOne, viewTwo, viewThree;

- (void)viewDidLoad {
  [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a 
  nib.

  /*
   0  0   0
   0  0   1
   0  1   0
   0  1   1
   1  0   0
   1  0   1
   1  1   0
   1  1   1
   */

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:YES];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:YES];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:NO];
  //    [viewTwo setHidden:YES];
  //    [viewThree setHidden:YES];


  //    [viewOne setHidden:YES];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:NO];

  //    [viewOne setHidden:YES];
  //    [viewTwo setHidden:NO];
  //    [viewThree setHidden:YES];

 //    [viewOne setHidden:YES];
 //    [viewTwo setHidden:YES];
 //    [viewThree setHidden:NO];

//    [viewOne setHidden:YES];
//    [viewTwo setHidden:YES];
//    [viewThree setHidden:YES];

 [self hideShowBottomBar];
  }

- (void)hideShowBottomBar
{
  BOOL isOne = !viewOne.isHidden;
  BOOL isTwo = !viewTwo.isHidden;
  BOOL isThree = !viewThree.isHidden;

  viewOneWidthConstant = _viewOneWidth.constant;
  viewTwoWidthConstant = _viewTwoWidth.constant;
  viewThreeWidthConstant = _viewThreeWidth.constant;
  viewBottomWidthConstant = _viewBottomWidth.constant;

   if (isOne && isTwo && isThree) {
    // 0    0   0
    _viewOneWidth.constant = viewBottomWidthConstant / 3;
    _viewTwoWidth.constant = viewBottomWidthConstant / 3;
    _viewThreeWidth.constant = viewBottomWidthConstant / 3;
    }
    else if (isOne && isTwo && !isThree) {
     // 0    0   1
    _viewOneWidth.constant = viewBottomWidthConstant / 2;
    _viewTwoWidth.constant = viewBottomWidthConstant / 2;
    _viewThreeWidth.constant = 0;
    }
   else if (isOne && !isTwo && isThree) {
    // 0    1   0
    _viewOneWidth.constant = viewBottomWidthConstant / 2;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = viewBottomWidthConstant / 2;
    }
    else if (isOne && !isTwo && !isThree) {
    // 0    1   1
    _viewOneWidth.constant = viewBottomWidthConstant;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = 0;
   }
   else if (!isOne && isTwo && isThree) {
    // 1    0   0
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = viewBottomWidthConstant / 2;
    _viewThreeWidth.constant = viewBottomWidthConstant / 2;
   }
   else if (!isOne && isTwo && !isThree) {
    // 1    0   1
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = viewBottomWidthConstant;
    _viewThreeWidth.constant = 0;
   }
   else if (!isOne && !isTwo && isThree) {
    // 1    1   0
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = viewBottomWidthConstant;
   }
   else if (isOne && isTwo && isThree) {
    // 1    1   1
    _viewOneWidth.constant = 0;
    _viewTwoWidth.constant = 0;
    _viewThreeWidth.constant = 0;
   }
  }

 - (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
 }
 @end

Semoga Jadi logika ini akan membantu seseorang.

Dalam kasus saya saya mengatur konstan dari ketinggian kendala untuk 0.0fdan juga mengatur hiddenproperti untuk YES.

Untuk menunjukkan tampilan (dengan subview) lagi saya melakukan yang sebaliknya: Saya mengatur tinggi konstan ke nilai non-nol dan mengatur hiddenproperti NO.

Saya akan menggunakan stackview horizontal. Itu dapat menghapus bingkai ketika subview disembunyikan.

Pada gambar di bawah, tampilan merah adalah wadah aktual untuk konten Anda dan memiliki ruang trailing 10pt ke superview oranye (ShowHideView), lalu sambungkan ShowHideView ke IBOutlet dan tampilkan / sembunyikan / hapus secara programatik.

1. Ini adalah ketika tampilan terlihat / diinstal.

2. Ini adalah saat tampilan disembunyikan / tidak diinstal.

Ini solusi saya yang lain menggunakan kendala prioritas. Idenya adalah mengatur lebar ke 0.

1. buat tampilan kontainer (oranye) dan atur lebar.

2. buat tampilan konten (merah) dan atur spasi 10pt ke superview (oranye). Perhatikan trailing space constraint, ada 2 trailing constraint dengan prioritas berbeda. Rendah (= 10) dan Tinggi (<= 10). Ini penting untuk menghindari ambiguitas.

3. Atur lebar tampilan oranye ke 0 untuk menyembunyikan tampilan.

Seperti yang disarankan no_scene, Anda pasti dapat melakukan ini dengan mengubah prioritas kendala saat runtime. Ini jauh lebih mudah bagi saya karena saya memiliki lebih dari satu pandangan yang menghalangi yang harus dihapus.

Berikut cuplikan menggunakan ReactiveCocoa:

RACSignal* isViewOneHiddenSignal = RACObserve(self.viewModel, isViewOneHidden);
RACSignal* isViewTwoHiddenSignal = RACObserve(self.viewModel, isViewTwoHidden);
RACSignal* isViewThreeHiddenSignal = RACObserve(self.viewModel, isViewThreeHidden);
RAC(self.viewOne, hidden) = isViewOneHiddenSignal;
RAC(self.viewTwo, hidden) = isViewTwoHiddenSignal;
RAC(self.viewThree, hidden) = isViewThreeHiddenSignal;

RAC(self.viewFourBottomConstraint, priority) = [[[[RACSignal
    combineLatest:@[isViewOneHiddenSignal,
                    isViewTwoHiddenSignal,
                    isViewThreeHiddenSignal]]
    and]
    distinctUntilChanged]
    map:^id(NSNumber* allAreHidden) {
        return [allAreHidden boolValue] ? @(780) : @(UILayoutPriorityDefaultHigh);
    }];

RACSignal* updateFramesSignal = [RACObserve(self.viewFourBottomConstraint, priority) distinctUntilChanged];
[updateFramesSignal
    subscribeNext:^(id x) {
        @strongify(self);
        [self.view setNeedsUpdateConstraints];
        [UIView animateWithDuration:0.3 animations:^{
            [self.view layoutIfNeeded];
        }];
    }];

Dalam hal ini membantu seseorang, saya membangun kelas pembantu untuk menggunakan format visual batasan . Saya menggunakannya di aplikasi saya saat ini.

AutolayoutHelper

Mungkin sedikit disesuaikan dengan kebutuhan saya, tetapi Anda mungkin menemukan itu berguna atau Anda mungkin ingin mengubahnya dan membuat pembantu Anda sendiri.

Saya harus berterima kasih kepada Tim atas jawabannya di atas , jawaban ini tentang UIScrollView dan juga tutorial ini .

Inilah cara saya akan menyelaraskan uiviews saya untuk mendapatkan solusi Anda:

1. Seret jatuhkan satu UIImageView dan letakkan di sebelah kiri.
2. Seret jatuhkan satu UIView dan letakkan di sebelah kanan UIImageView.
3. Seret drop dua UILabel di dalam UIView yang kendala memimpin dan trailingnya nol.
4. Setel batasan utama UIView yang berisi 2 label ke superview, bukan UIImagView.
5. JIKA UIImageView disembunyikan, tetapkan konstan kendala utama ke 10 px ke superview. ELSE, tetapkan konstan kendala utama ke 10 px + UIImageView.width + 10 px.

Saya membuat aturan praktis saya sendiri. Setiap kali Anda harus menyembunyikan / menampilkan uiview apa pun yang batasannya mungkin terpengaruh, tambahkan semua subview yang terpengaruh / tergantung di dalam uiview dan perbarui konstanta kendala terkemuka / trailing / atas / bawah secara terprogram.

Ini adalah pertanyaan lama tapi tetap saya harap ini akan membantu. Datang dari Android, di platform ini Anda memiliki metode praktisisVisible untuk menyembunyikannya dari tampilan tetapi juga tidak memiliki bingkai yang dipertimbangkan saat autolayout menggambar tampilan.

menggunakan ekstensi dan "extended" uiview Anda bisa melakukan fungsi serupa di ios (tidak yakin mengapa itu tidak ada di UIKit) di sini implementasi di swift 3:

    func isVisible(_ isVisible: Bool) {
        self.isHidden = !isVisible
        self.translatesAutoresizingMaskIntoConstraints = isVisible
        if isVisible { //if visible we remove the hight constraint 
            if let constraint = (self.constraints.filter{$0.firstAttribute == .height}.first){
                self.removeConstraint(constraint)
            }
        } else { //if not visible we add a constraint to force the view to have a hight set to 0
            let height = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal , toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 0)
            self.addConstraint(height)
        }
        self.layoutIfNeeded()
    }

cara yang tepat untuk melakukannya adalah menonaktifkan batasan dengan isActive = false. namun perhatikan bahwa menonaktifkan batasan menghilangkan dan melepaskannya, jadi Anda harus memiliki outlet yang kuat untuk itu.

Solusi termudah adalah dengan menggunakan UIStackView (horizontal). Tambahkan ke tumpukan tampilan: tampilan pertama dan tampilan kedua dengan label. Kemudian atur properti isHidden dari tampilan pertama ke false. Semua kendala akan dihitung dan diperbarui secara otomatis.

Saya pikir ini adalah jawaban yang paling sederhana. Harap verifikasi bahwa itu berfungsi:

        StackFullView.layer.isHidden = true
        Task_TopSpaceSections.constant = 0.   //your constraint of top view

periksa di sini https://www.youtube.com/watch?v=EBulMWMoFuw