[Swift] TableViewCell에 ImageView를 추가하여 URL에 지정된 이미지를 표시합니다.

개요


이 글은 초보자가 RESTful의 API와 swift로 아이폰을 위한 쿠폰 발송 서비스를 개발하는 순서로 보도됐다.기술 요소를 하나하나 조사하면서 실시하기 때문에 매우 먼 곳으로 돌아가는 실시이다.
지난번쿠폰이 생성된 이미지도 보내는 API입니다. 응용 프로그램도 API에서 얻은 이미지를 화면에 표시할 수 있도록 개조했다.참고 자료아이폰 앱을 만들기 쉬운 교과서
  • [Swift 입문 문법편]형 배우(as, as!, as?)장악하다
  • [Swift4] URL에 UIIMage로 이미지 지정하기
  • 환경


    Mac OS 10.15
    Swift5
    Xcode11.1

    단계

  • TableViewCell에 UIimageView 추가
  • 추가 UIIMageView에 이미지 먼저 표시
  • json에서 가져온 URL로 이미지 표시
  • 동작 확인
  • TableViewCell에 UIIMageView 추가


    Xcode Main을 엽니다.스토리보드에서 TableVIewCell에 UIimageView를 추가합니다.디자인을 함께 수정하여 지금까지의 쿠폰 문자 메시지에 이미지를 표시합니다.
    TableViewCell의 Row Height를 200px에서 400px로 변경하여 세로 길이를 늘립니다.그리고 긴 부분에 UIimageView를 추가합니다.Autoresizing을 사용하여 사각을 고정합니다.그런 다음 추가 UIimageView에 tag를 추가합니다.Label에서 4번까지 사용하기 때문에 5번을 할당했습니다.

    다음은 ViewController입니다.swift를 열고 tableView 높이tableView.rowHeight = [数字]의 일부분을 Main으로 지정합니다.스토리보드에서 지정한 TableViewCell의 Row Height 값으로 변경합니다.
    tableView.rowHeight = 400 // Row Heightで指定した長さに変更
    

    추가 UIimageView에 이미지 먼저 표시


     ViewController.swift의 tableView에 UIimageView에 이미지를 표시하는 처리를 추가합니다.아래와 같이 추가되었습니다.기본적으로 같은 방법은 라벨에 대한 값을 설정하는 것이다.
    위에서 만든 이미지 저장용 폴더에 샘플 이미지를 저장하고 먼저 베타로 이미지 파일의 전체 경로를 지정합니다.
    
    // クーポン画像を表示
            let couponImageView = cell.viewWithTag(5) as! UIImageView
            let imageFileUrl = "/Users/XXXXX/workspace/amiApp/images/coupon-image-001.png"
            couponImageView.image = UIImage(named: imageFileUrl)
    
    변경 사항을 저장한 후 Xcode에서 응용 프로그램을 실행하면 쿠폰 정보 아래에 그림이 표시됩니다.

    이미지 파일의 경로를 썼기 때문에 모든 쿠폰에 같은 이미지가 표시됩니다.그리고 레이아웃이 좀 붕괴돼서 나중에 수정하고 싶어요.

    응답 json에서 가져온 URL로 이미지 표시


    TableViewCell과 UIimageView의 쓰기 방법이 문제가 없다는 것을 알았기 때문에 로컬 폴더의 경로가 아니라 API의 응답으로 얻은 이미지 파일의 URL을 사용하여 이미지를 얻을 수 있습니다.
    URL 가져오기에서 표시되는 코드는 다음과 같습니다.
            // URLで指定されたクーポン画像を表示
            let couponImageView = cell.viewWithTag(5) as! UIImageView
            if let urlString = coupon["image"] as? String {
                let url = URL(string: urlString)
    
                do{
                    let imageData = try Data(contentsOf: url!)
                    couponImageView.image = UIImage(data: imageData)
                } catch {
                    print("Error : Cat't get image")
                }
            } else {
                couponImageView.image = UIImage(named: "no-coupon-image.png") //nilの場合は固定画像表示
            }
            return cell
        }
    
    
    몇 가지 요점이 있다.
    첫 번째는 if let urlString = coupon["image"] as? String { 〜 부분이다.응답에 지정된 이미지 파일이 없는 URL이 NULL 참조로 인해 응용 프로그램이 떨어지는 것을 방지하기 위해 as? 를 사용하는 브로드캐스트와 선택적 바인딩을 조합하여 이미지 파일이 지정된 URL이 없는 경우 대체 이미지를 표시합니다.as? 캐릭터를 분배할 때 지정한 형식이면 선택할 수 있는 형식(nil을 포함할 수 있음)을 되돌려주고, 지정한 형식이 아니라면nil을 되돌려줍니다.
    선택할 수 있는 귀속 형식은 다음과 같습니다. "선택할 수 있는 변수"가nil이 아닐 때만 임의로 처리할 수 있습니다.else와 조합을 통해nil인지 nil인지 구분하여 처리할 수도 있다.
    If let [任意の定数] = [オプショナル型の変数] {
        オプショナル型の変数がnilじゃなかった場合に実施したい処理
    } 
    
    요점의 두 번째는 let imageData = try Data(contentsOf: url!) 부분이다.는 URL을 사용하여 이미지를 추출하는 작업입니다.이미지를 가져올 수 있는 경우couponImageView.image = UIImage(data: imageData), 이미지를 ImageView에 표시합니다.

    동작 확인


    변경 사항을 저장한 후 Xcode에서 응용 프로그램을 실행하면 쿠폰 정보 아래에 그림이 표시됩니다.URL이 설정되지 않은 두 번째 쿠폰에는 응용 프로그램 옆에 있는 임시 이미지가 표시됩니다.또 시뮬레이터를 아이폰11 프로 맥스에서 아이폰11 프로로 바꾸면 레이아웃이 잘 어울린다.

    이렇게 하면 쿠폰 프로그램을 설치할 수 있다.다음은 만든 API를 클라우드 서버에 공개하고 싶습니다.

    좋은 웹페이지 즐겨찾기