개요

이 글은 초보자가 RESTful의 API와 swift로 아이폰을 위한 쿠폰 발송 서비스를 개발하는 순서로 보도됐다.기술 요소를 하나하나 조사하면서 실시하기 때문에 매우 먼 곳으로 돌아가는 실시이다.
지난번swift 정렬형 JSON에서 값 꺼내기에서 쿠폰에 대한 상세한 정보, 사용 가능한 점포 이름, 유효기간 정보를 얻을 수 있기 때문에 TableView를 응용 프로그램 화면에 표시하도록 개조했습니다.

참고 자료

부드럽게 아이폰 앱을 만들기 시작한 교과서 삼교상저 Mynavi

환경

Mac OS 10.15
Swift5
Xcode11.1

단계

Main.스토리보드에서 TableViewCell 설계

배치된 레이블에 개별 정보를 표시하도록 ViewController 개조

동작 확인

Main.스토리보드에서 TableViewCell 설계

현재subtitle이라는 TableView의 표준 디자인을 사용하여 주요 정보를 상세한 정보의 두 가지 규격으로 표시합니다.tableView에 3개 이상의 정보를 표시하려면 표준 디자인이 대응하지 않기 때문에 오리지널 규격의 TableViewCell을 만들어야 합니다.
먼저 배치된 테이블 뷰에 테이블 뷰 Cell을 배치합니다.Xcode의 오른쪽 위 모서리에 있는 + 버튼을 통해 객체 창을 표시할 수 있습니다.

배치된 테이블 보기 Cell의 식별자를 테이블 보기 Cell로 명명합니다.

오른쪽에 있는'show the size inspector'에서 TableViewCell의 높이를 200pt로 설정하고 TableViewCell에 쿠폰 정보를 표시하는 탭을 설정합니다.라벨의 용도는 다음과 같다.

쿠폰 혜택 표시 레이블

쿠폰 설명이 표시된 레이블

사용 가능한 점포의 라벨 보이기

이용개시일과 이용기한을 연결하여 이용가능 기간의 라벨 표시

프로그램에서 각각의 라벨을 식별하기 위해 시퀀스 번호를 표시합니다.

태그 번호의 할당은 다음과 같습니다.

쿠폰 혜택 표시 레이블

쿠폰 설명이 표시된 레이블

사용 가능한 점포의 라벨 보이기

이용개시일과 이용기한을 연결하여 이용가능 기간의 라벨 표시

쿠폰 혜택과 댓글을 여러 줄로 표시하고 싶어서 줄 수를 두 줄로 설정했다.레이블 행에서 행 수를 설정할 수 있습니다.

이로써 TableViewCell의 설계가 완료됩니다.

배치된 레이블에 개별 정보를 표시하도록 ViewController를 변경했습니다.

"10_swift에 쿠폰 표시 화면 설치"에서 만든 프로그램을 변경합니다.
개조한 곳은 함수func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)뿐이다.
먼저 단원 대상 코드Main을 만듭니다.스타일을storyboard를 사용하여 디자인된 Cell(couponCell) 셀 객체로 변경합니다.
변경 전

let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "couponCell")

수정 후withIdentifier: 생성된 TableViewCell의 Identifier 설정으로 지정된 이름(이번에는 couponCell)입니다.

let cell = tableView.dequeueReusableCell(withIdentifier: "couponCell", for: indexPath as IndexPath)

그런 다음 셀 높이를 설정합니다.(Main.storyboard에서도 설정했지만 ViewController에서도 설정하지 않으면 반영할 수 없습니다.)

tableView.rowHeight = 200

그런 다음 각 레이블에 표시할 값을 설정합니다.
태그 객체를 만들 때 cell.viewWithTag( ) 의 "() 에 설정된 tag 의 일련 번호를 입력합니다.레이블에 표시되는 문자열을 설정하는 부분에서 변수coupon는 [String: Any]형이므로 String형으로 변환합니다.코드는 다음과 같습니다.

//ラベルオブジェクトを作る
let labelBenefit = cell.viewWithTag(1) as! UILabel
//ラベルに表示する文字列を設定
labelBenefit.text = (coupon["coupon_benefits"] as! String)

이 네 개의 라벨을 실현하다.
완성된 코드는 여기 있습니다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let coupon = self.coupons[indexPath.row]
        //セルを作る
        let cell = tableView.dequeueReusableCell(withIdentifier: "couponCell", for: indexPath as IndexPath)

        tableView.rowHeight = 200

         //各ラベルに値を設定する
        let labelBenefit = cell.viewWithTag(1) as! UILabel
        labelBenefit.text = (coupon["coupon_benefits"] as! String)

        let labelExplanation = cell.viewWithTag(2) as! UILabel
        labelExplanation.text = (coupon["coupon_explanation"] as! String)

        let labelStore = cell.viewWithTag(3) as! UILabel
        labelStore.text = (coupon["coupon_store"] as! String)

        let labelDay = cell.viewWithTag(4) as! UILabel
        labelDay.text = "有効期間： " + (coupon["coupon_start"] as! String) + " ～ " + (coupon["coupon_deadline"] as! String)

동작 확인

실행할 때 디자인대로 쿠폰이 표시됩니다.

이러면 쿠폰 같아.
다음에는 웹 API 측면을 RESTful API로 변경합니다.