質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.24%

テーブルビューに2段のラベルを設けてテキストを表示する方法⇒2段目の行がずれる不具合

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,471

Tomzy

score 96

イメージ説明**第1画面より第2画面に遷移したとき、TableView02の2段目のlabel2の表示ヶ所が1行ずれて最初の行がブランクになる不具合。
**
まだ、不具合が続いているので、再度質問します。よろしくお願いします。

AAA
TableView02のコードを元に戻し

cell.label2.text = subtexts[selectedIndexPathInViewController.row][indexPath.row]


Xcodeクリーン、シミュレーターのリセット、XcodeのDeriveDataのProjectおよびModuleCodeの削除、ゴミ箱を空に、Xcodeの終了、Macの再起動をやって,再度Xcodeをビルドしましたが、状況は変わりません。

BBB
添付画像により状況を説明します。
第1画面は正常です。
イメージ説明

第2画面の1:
第1画面の2行目をタップした場合表示されますが、第2画面の1行目の2段目がブランクになっていて2行目にずれて表示されています。

第2画面の2:
第1画面の3行目をタップした場合表示されますが、第2画面の1行目の2段目がブランクになっていて2行目にずれて表示されています。
イメージ説明

第2画面の3:
不思議なことに上記2の画面の2行目をタップすると2行目に2段目が消えます。3行目は変わらずです。

イメージ説明

CCC
関係fileのコードを記載します。なお、字数制限があるので//中略 を入れます。

//  ViewController.swift

import iAd

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{
    @IBOutlet var tableView01: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

       // Prepare interstitial Ad
        UIViewController.prepareInterstitialAds()

        // Show iAd
        self.canDisplayBannerAds = true

    tableView01.delegate = self
        tableView01.dataSource = self

    }

// セルに表示するテキスト
let texts = ["動画:動画の見方",
             "動画:電話",
             "動画:カレンダー",
             //中略]

    //テーブルビューのタイトルを表示
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let label = UILabel(frame: CGRect(x:0, y:0, width: tableView.bounds.width, height: 50))

        // 文字位置
        label.textAlignment = NSTextAlignment.Center

        // 文字サイズ
        label.font = UIFont.italicSystemFontOfSize(17)

        // 背景色
        label.backgroundColor = UIColor.redColor()

        // 文字色
        label.textColor =  UIColor.whiteColor()

        // 表示される文字
        label.text = "ご希望の項目を触ってください"

        return label
    }


// セルの行数
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return texts.count
}

// セルの内容を変更
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "cell01")

    cell.textLabel?.text = texts[indexPath.row]

  // 文字色変更
    cell.textLabel?.textColor = UIColor.blackColor()

    // 文字サイズ変更
    //cell.textLabel?.font = UIFont.systemFontOfSize(30)
    // 文字を太字に変更
    cell.textLabel?.font = UIFont.boldSystemFontOfSize(25)

    // cellの背景を透過
    cell.backgroundColor = UIColor.whiteColor()
    // cell内のcontentViewの背景を透過
    //cell.contentView.backgroundColor = UIColor.whiteColor()

    // チェックマークをつける
    //cell.accessoryType = UITableViewCellAccessoryType.Checkmark
    return cell

   }

//テーブルビューのセルがタップされた処理
    var selectedIndexPath: NSIndexPath!

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

   //セルのインデックスパス番号を出力

   print("タップされたセルのインデックスパス:\(indexPath.row)")

   selectedIndexPath = indexPath

        //cellが選択された場合
        //TableView02へ遷移するためにsegueを呼び出す

        //performSegueWithIdentifier("toTableView02", sender: self)
        self.performSegueWithIdentifier("toTableView02", sender: indexPath)

    }

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!) {
        if (segue.identifier == "toTableView02") {

            let subVC = (segue.destinationViewController as? TableView02)!
            subVC.selectedIndexPathInViewController = selectedIndexPath
    }
}
}

//  TableView02.swift

import iAd


     class TableView02: UIViewController, UITableViewDataSource, UITableViewDelegate {
        @IBOutlet var tableView02: UITableView!

    var selectedIndexPathInViewController: NSIndexPath!

    let texts00 = ["01:自動で始まり終わる",
                   "02:途中で止める方法",
                 //中略]

    let texts01 = ["01:電話番号で発信",
                   "02:「連絡先」の登録",
                   "03:「よく使う項目」",
                  //中略]

      let texts02 = ["01:いろいろな画面",
                   "02:イベントの記入方法",
                   "03:上記全動画の通し映写"]

   //中略
    let subtexts00 = ["動画の基本的な見方",
                      "",
                       "",
                       "元の画面に戻る方法",
   //中略]

    let subtexts01 = ["「キーパッド」という数字盤を使う",
                      "住所録を使って発信",
                      "よく使う電話番号の登録",
                     //中略]

    let subtexts02 = ["年画面、月画面、日画面、週画面、イベント(予定)画面",
                      "新規イベント、既存イベントの修正、削除",
                      ""]

    let subtexts03 = //中略

    //teratail助言2追加
        var texts : [[String]]!
        var subtexts : [[String]]!

      override func viewDidLoad() {
        super.viewDidLoad()


        // Prepare interstitial Ad
        UIViewController.prepareInterstitialAds()

        // Show iAd
        self.canDisplayBannerAds = true

        //self.setupFriends()


        texts = [texts00,texts01,texts02,texts03,texts04,texts05,texts06,texts07,texts08]
        subtexts = [subtexts00,subtexts01,subtexts02,subtexts03,subtexts04,subtexts05,subtexts06,subtexts07,subtexts08]

        tableView02.delegate = self
        tableView02.dataSource = self

        let nib = UINib(nibName: "CustomCell", bundle: nil)
        tableView02.registerNib(nib, forCellReuseIdentifier: "Cell")

        }


            func tableView(tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
                return texts[selectedIndexPathInViewController.row].count
            }

            func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {


                //teratailTake One さんのコメントアドバイスにより修正
                //var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as? CustomCell


                let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomCell
                cell.label1.text = exts[selectedIndexPathInViewController.row][indexPath.row]

               //一段目のために選ばれた行番号をプリントする
                print("タップされた 1段用 インデックスパス:\(indexPath.row)")
                cell.label2.text = subtexts[selectedIndexPathInViewController.row][indexPath.row]

                //二段目のために選ばれた行番号をプリントする
                 print("タップされた 2段用 インデックスパス:\(indexPath.row)")

                return cell
                }
 }


CustomCell.swift

import UIKit

class CustomCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    @IBOutlet weak var label1: UILabel!

    @IBOutlet weak var label2: UILabel!
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
      }

}


//  Text.swift

class Test : NSObject{
    var label1:String
    var label2:String

    init(label1:String,label2:String){
        self.label1 = label1
        self.label2 = label2

    }
}


DDD
storyboardの結合を現す
ViewControllerクラスのスクリーンショットと
TableView02クラスのスクリーンショットを添付します。

イメージ説明
イメージ説明

CustomCellのxibのスクリーンショットも添付します。
イメージ説明

EEE
その他ご参考事項を記載します。
第1画面のセルの内容はコードで設定しています。
第2画面のセルの内容はxibで設定しました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

質問の「第2画面の1」の説明箇所に図が貼られておらず、「第2画面の2」の箇所に貼られている図が「第2画面の1」の説明と一致していて、「第2画面の2」の説明に相当する図は、この質問の最初に貼られている図のように見えるのですが、正しい位置に図が貼られているか確認してみてください。
それと、前回の質問の最後のコメントの時に、
print("タップされた 1段用 インデックスパス:\(indexPath.row)")

print("タップされた 2段用 インデックスパス:\(indexPath.row)") 
のprintが表示されないと言っていたと思うのですが、
TableView02を表示した時に、今でもこのprintは表示されないのですか?

もう少し後でじっくり見れる時間ができたらまたコメントします。


(6/13 19:00追加回答)

カスタムセルのxib画面をみたら妙に高さが高いですね。
これ、カスタムセルの高さが高すぎて、というか2段目のラベル(label2)の表示位置が下すぎて、次のセルに重なって表示されているだけのような気がします。カスタムセルの高さとセル内のlabel2の配置位置の定義を見直すことをお勧めします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/13 18:06

    早速レスポンスありがとうございました。
    投稿時から画像が上手く貼れずに困りました。そこで追加も試みたのですが、それも上手く貼れませんでした。
    第1画面は貼れています。
    第2画面の1: はブランクになっています。
    第2画面の2: には第2画面の1の画像が貼ってあります。
    第2画面の3: は意図どおり貼られています。
    従って
    第2画面の1: は第2画面の2: とご理解ください。
    第2画面の2: とは第2画面の3 の2行目の2段目にも文字があったとご理解ください。

    printについてご報告が遅れてすいません。ずっと表示されていないと思っていました。改めて、今見ましたら下記のとおり表示されていました。

    これを見るとindexPath.rowは正常のようですね。
    タップされたセルのインデックスパス:1
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされた 1段用 インデックスパス:3
    タップされた 2段用 インデックスパス:3
    タップされた 1段用 インデックスパス:4
    タップされた 2段用 インデックスパス:4
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされたセルのインデックスパス:2
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされたセルのインデックスパス:0
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされた 1段用 インデックスパス:3
    タップされた 2段用 インデックスパス:3
    タップされた 1段用 インデックスパス:4
    タップされた 2段用 インデックスパス:4
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされたセルのインデックスパス:1
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされた 1段用 インデックスパス:3
    タップされた 2段用 インデックスパス:3
    タップされた 1段用 インデックスパス:4
    タップされた 2段用 インデックスパス:4
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5
    タップされたセルのインデックスパス:2
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされたセルのインデックスパス:2
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされたセルのインデックスパス:0
    タップされた 1段用 インデックスパス:0
    タップされた 2段用 インデックスパス:0
    タップされた 1段用 インデックスパス:1
    タップされた 2段用 インデックスパス:1
    タップされた 1段用 インデックスパス:2
    タップされた 2段用 インデックスパス:2
    タップされた 1段用 インデックスパス:3
    タップされた 2段用 インデックスパス:3
    タップされた 1段用 インデックスパス:4
    タップされた 2段用 インデックスパス:4
    タップされた 1段用 インデックスパス:5
    タップされた 2段用 インデックスパス:5

    よろしくお願いします。

    キャンセル

  • 2016/06/13 19:02

    回答を追加しました。label2の配置位置が下すぎて、次のセルに重なって表示されているような気がします。

    キャンセル

  • 2016/06/14 13:10

    Take One さん ありがとうございました。解決しました。
    第2画面のTableView02をstoryboard上高さが100 customになっているのはそのままにしました。

    CustomCell.xib上AutoLayoutでlabel1の左上右を0 hを50 label2を左下右を0 高さを50に設定しました。

    3.5インチから5.5インチiPad何れも意図どおりの画面になりました。

    下段のlabel2のテキストが幅一杯になった時も自動で改行されています。

    第2画面の行をタップした時下段の文字が消える不具合もなくなりました。

    後から参照するひとの為にも、成功画面とstoryboard xib設定画面のスクリーンショットを添付したいのですが、コメント欄ではできず断念しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.24%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • Swiftに関する質問
  • テーブルビューに2段のラベルを設けてテキストを表示する方法⇒2段目の行がずれる不具合