15 - UIKit(view 레이아웃, Autoresizing)

디렉토리:
1. 코드 레이아웃
2. View에서 코드 레이아웃
3. Autoresizing
정상으로 돌아오다
1. 코드 레이아웃
순수한 코드 레이아웃은 VC 아래와 V 아래로 나뉜다
     [MX1-layout-code]
VC에서viewDidLayoutSubviews 방법을 덮어쓰고 방법에서 레이아웃을 쓰면 일반적으로 레이아웃할 컨트롤을 속성으로 끌어올립니다
인터페이스 크기가 변할 때(세로 화면이 가로 화면으로 변하고 도구 모음이나 각종bar가 나타납니다...)이 메서드를 호출합니다.이 방법은 운행 후에 호출될 것이니 주의해라. 단지 인터페이스에 변화가 발생한 후에 다시 호출될 뿐이고 최종 구조는 여기서 작용한다.
이 방법의 호출은 Storyboard 레이아웃 뒤에 있습니다.
AutoLayout 끄기 주의
1.1 계산 좌표
1>버튼 2개 고정 폭
     2> ImageView:
상하좌우 영원히 70,50,20,20
3>3개의 작은 버튼(20x20)을 오른쪽 아래 구석에 두십시오.

//           (     ,         bar....),      。               ，               。



-(void)viewDidLayoutSubviews{



    [super viewDidLayoutSubviews];



    // NSLog(@"11111");



    CGRect frame = self.button1.frame;



    CGFloat buttonWidth = (self.view.bounds.size.width - 20 * 2 - 10) / 2;



    frame.size.width = buttonWidth;



    self.button1.frame = frame;



    frame.origin.x += buttonWidth + 10;



    self.button2.frame = frame;



   



    frame = CGRectZero;



    frame.origin = CGPointMake(20, 70);



    frame.size = CGSizeMake(self.view.bounds.size.width - 20 - 20, self.view.bounds.size.height - 70 - 50);



    self.imageView.frame = frame;



   



    frame.size = CGSizeMake(20, 20);



    frame.origin.x = self.view.bounds.size.width - 20 - 10 - 10  - 20 * 3;



    frame.origin.y = self.view.bounds.size.height - 20 - 20;



    self.btn1.frame = frame;



    frame.origin.x = self.view.bounds.size.width - 20 - 10 - 20 * 2;



    self.btn2.frame = frame;



    frame.origin.x = self.view.bounds.size.width - 20 - 20;



    self.btn3.frame = frame;



    NSLog(@"   viewDidLayoutSubviews  ");



}

1.2 다양한 Bar의 영향
     [MX2-Bar-Code]
iOS 7에서 시작되는 모든 VC 클래스에는 다음과 같은 두 가지 속성이 있습니다.
                .topLayoutGuide
                .bottomLayoutGuide
이 두 속성은 VC 위와 아래의 다양한 Bar가 차지하는 공간을 저장합니다.
이 두 속성은 모두 UIlayoutSupport 프로토콜을 준수하는 대상입니다. 이 프로토콜은 Bar가 차지하는 공간을 나타내는 속성인length를 규정합니다.
일반적으로 이 두 속성은 VC가 상하의 각종 Bar 아래로 침투하는 상황에서 Bar가 차지하는 공간을 계산하는 데 사용된다
Bar 아래에 VC가 침투하지 않도록 Xcode에서 설정할 수 있습니다. (네 번째 검사기에서 under bottom bars를 삭제합니다.)이때.top Layout Guide 및.bottom Layout Guider의length는 모두 0입니다.
따라서 VC가 Bar의 아래로 침투하든 안 하든 좌표에 이 두 속성을 넣는 것은 옳다.
보충:
VC 속성을 설정할 수 있습니다.
                      .edgesForExtendedLayout = ….
VC가 Bar 아래로 침투하는지 여부를 설정합니다.

-(void)viewDidLayoutSubviews{



    [super viewDidLayoutSubviews];



    //         



    self.edgesForExtendedLayout = UIRectEdgeNone;



    CGRect frame = self.button.frame;



    frame.origin.x = self.view.bounds.size.width - 20 - frame.size.width;



    frame.origin.y = 20;//                     top bars



    self.button.frame = frame;



}

1.3 직접 그린 도형
인터페이스 크기가 변하면 자동으로 그려진 도형에도 레이아웃 문제가 생길 수 있다.
           [MX3-Redraw]
view 보기에는 속성이 있습니다: 콘텐츠 모드입니다. 이 속성은view의 크기가 바뀔 때 어떤 반응을 할지 결정합니다.
기본값은 Scale To Fill 좌우 모두 밀어내기
ImageView에서 일반적으로 Aspect Filt/Aspect Fill을 선택하는 경우
사용자 정의 도면의 경우 Redraw로 설정해야 뷰 크기가 변경되면 도면이 다시 그려집니다.

//    view mode Redraw，                     



- (void)drawRect:(CGRect)rect



{



    // Drawing code



    CGContextRef context = UIGraphicsGetCurrentContext();



    CGContextSaveGState(context);



    UIBezierPath *path = [UIBezierPath bezierPath];



    [path moveToPoint:CGPointMake(40, 40)];



    [path addLineToPoint:CGPointMake(120, 40)];



    [path addLineToPoint:CGPointMake(40, 120)];



    [path closePath];



    [[UIColor redColor] setStroke];



    [path stroke];



    CGContextRestoreGState(context);



}

정상으로 돌아오다
2. View에서 코드 레이아웃
2.1 View 클래스에는 layoutSubviews 가 있으며 뷰의 모든 하위 뷰 레이아웃에 적용됩니다.
보기의 크기가 바뀌면 다음 세 가지 방법이 자동으로 순서대로 호출됩니다
                      1>   VC: viewWillLayoutSubviews
                      2>   V:  layoutSubviews
                      3>   VC: viewDidLayoutSubviews
                View:
drawRect:setNeedsDisplay 그리기
layoutSubviews:레이아웃setNeedsLayout
[MX4-ViewLayout] 사용자 정의 보기(Cell)를 코드로 레이아웃

//          setNeedsLayout     ,      ,        

-(void)layoutSubviews{

    [super layoutSubviews];

    CGFloat x = self.downLoadedIcon.frame.origin.x;

    if (self.music.downloaded) {

        x += 20;

    }

    CGRect frame;

    if (self.music.highQuality) {

        frame = self.highQualityIcon.frame;

        frame.origin.x = x;

        self.highQualityIcon.frame = frame;

        x += 20;

    }

    frame = self.subLabel.frame;

    frame.origin.x = x;

    self.subLabel.frame = frame;

}

정상으로 돌아오다
3. Autoresizing
3.1 Autoresizing 소개
오래된 레이아웃 기술로 예전에는spring/struct 레이아웃이라고 불렀어요.
조작이 간단하고 기능이 제한되어 현재도 여전히 유효하다
AutoLayout 기술과 함께 사용할 수도 있습니다.
3.2 작동 원리
부모 보기의 변화에 따라 부모 보기의 변화 비례에 따라 하위 보기의 크기를 바꾸거나 다른 계산식으로 하위 보기의 프레임을 확정합니다.
3.3 어떻게
           [MX5-Autoresizing]
외부 네 개의 빨간색 선은 하위 뷰의 경계 간격을 구속합니다.
안쪽의 두 줄은 하위 보기가 부모 보기의 변화에 따라 신축될 수 있는지를 표시하는 데 쓰인다
           [MX6-Autoresizing]
3.4 코드와 함께 사용
Autoresizing 기술이 요구 사항을 충족하지 못할 경우 코드로 보완 가능
3.5 Autoresizing을 코드별로 사용
각 뷰에는 Autoresizing 설정을 설명하는 autoresizingMask 속성이 있습니다.

- (void)viewDidLoad

{

    [super viewDidLoad];



    self.button.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth;

}

부록:
OC 언어의 열거 정의의 일반적인 사용법:
     typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
    UIViewAutoresizingNone                 = 0, //0
    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,//1
    UIViewAutoresizingFlexibleWidth        = 1 << 1,//2
    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,//4
    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,//8
    UIViewAutoresizingFlexibleHeight       = 1 << 4,//16
    UIViewAutoresizingFlexibleBottomMargin = 1 << 5 //32
  };
 
   1 << 1  :
   0000 0001 << 1 : 0000 0010 (2)
   1 << 2  :
   0000 0001 << 2 : 0000 0100 (4)
     UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight
           0000 0010
           0000 0100
           0001 0000
        -------------
           0001 0110      6
작업:
1. H01 리소스 패키지를 참고하여 재생 인터페이스를 실현하고 코드로 레이아웃
2. 그림 낙서
PhotoDraw 프로젝트 참조