Ios AutoLayout 2 - ContainerView와 NSMutableAttributedString

Ios AutoLayout 2 - ContainerView와 NSMutableAttributedString

● 들어가기 전

지난번 포스팅에서는 오토레이아웃으로 만들 간단한 프로젝트에 대한 소개를 했다. 이번 포스팅에서는 간단한 이슈가 나오는데 ContainerView와 NSMutableAttributedString을 이용해서 해결하는 과정을 포스팅 해보겠다. 부모 View를 만들어서 그안에 image view를 넣어 오토레이아웃을 지정해 줄것이다. 그리고 그림 아래 text는 NSMutableAttributedString 속성을 통해 작성할것이다. 이슈는 아래와 같다. 아이폰을 옆으로 기울이면 그림만 보이고 글은 아래로 숨어 버린다. 이 이슈를 부모 containerview를 이용해서 해결해보자.

● 실습순서

1.이미지 속성지정

2.부모 containerView 만들어주기

3.imageView를 부모 containerView에 넣어주기

4.제약조건 지정

5.NSMutableAttributedString을 이용해서 text 다루기

● 이미지 속성 추가

아래 코드를 이미지 객체 안에 넣어준다. AspectFit은 사진의 비율을 유지하면서 사진 전체가 보이게 하는 속성이다.

imageView.contentMode = .scaleAspectFit

● 부모 view 만들어주기

부모뷰를 만들어서 제약조건을 설정해준다. 그리고 부모뷰에 이미지뷰 객체를 넣어준다. 

viewdidLoad에서 view에 넣어준 이미지는 삭제해준다.

        //부모뷰 생성
        let containerView = UIView()
        containerView.backgroundColor = .yellow
        view.addSubview(containerView)
        // 오토레이아웃 활성화
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        //부모뷰에 이미지 뷰 넣어주기
        containerView.addSubview(myImageView)

● 다른 객체의 제약조건 재조정

텍스트뷰의 탑은 위에서 만든 부모뷰의 바닥에 고정시켰다. 이미지 뷰의 x축, y축은 부모뷰에게 고정시켰다. 그리고 부모뷰의 높이는 view의 반으로 줬다.

    private func setupLayout() {
        
        let containerView = UIView()
        containerView.backgroundColor = .yellow
        view.addSubview(containerView)
        // 오토레이아웃 활성화
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        //부모뷰에 이미지 뷰 넣어주기
        containerView.addSubview(myImageView)
        
        
        myImageView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        myImageView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        myImageView.heightAnchor.constraint(equalTo: containerView.heightAnchor, multiplier: 0.5).isActive = true
        
        //부모뷰의 높이를 view의 절반으로 맞춰줬다.
        containerView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5).isActive = true
        
        
        //myTextView의  topAnchor를 이미지뷰 아래에 맟추고 120 만큼 간격 띄어주기
        myTextView.topAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 120).isActive = true
        myTextView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 24).isActive = true
        myTextView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -24).isActive = true
        myTextView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
    }

● NSMutableAttributedString 이용해서 텍스트 만들기

밑에 textView.text = 이부분의 로직을 지우고 위에 attributedText ~~ 추가

        let textView = UITextView()

        let attributedText = NSMutableAttributedString(string: "ios기초 레슨 프로그램",
                                attributes: [NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 18)])
        
        attributedText.append(NSAttributedString(string: "\n\n\n 할아버지 할머니도, 엄마도 아빠도 쉽게 배울 수 있는 아이폰 개발 강좌~!! 모두 열공 가즈아~~~~!",
         attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 13), 
        NSAttributedStringKey.foregroundColor: UIColor.gray]))
        
        textView.attributedText = attributedText
        
        //textView.text = "ios기초 레슨 프로그램"
        //textView.font = UIFont.boldSystemFont(ofSize: 18)

● 실행

제약조건을 설정한데로 잘나온다. 옆으로 눕혀도 제약조건에 맞게 잘나오는 것을 볼 수 있다.

● 마무리

이번 포스팅에서는 view안에 view를 넣어서 제약조건을 설정하는 법을 살펴보았다. 그리고 NSMutableAttributedString를 이용해서 text를 처리하는 법도 알아보았다.