UITextLabel UITextField UIImageViewについて

Question

こんにちは
いつもお世話になっています。
教えてくださる方ありがとうございます。

今回の質問なのですが。
下の写真はiosアプリの一部なのですが、こちらには様々なジャンルが書かれた（UITextLabel or UITextField?）が配置されているのですが、こちらは下にスライドしていくとまた新しいジャンルが出てくるという仕組みなのですがこれはどのように作成することが可能でしょうか。
TabelViewで作成するのかと考えたのですができませんでした。（※できないというのは線がtableviewには線画追加されてしまったり、別々の位置に配置できないと考えたためです）

質問多くなりすみません。
どなたか教えていただけますでしょうか。
お手数ですがよろしくお願いいたします。

Comments

[TsukubaDepot]

> TabelViewで作成するのかと考えたのですができませんでした。

まずは、考えてみたコードを載せること、またその結果と期待した結果の相違を計算されることが、適切な回答を得るために必要なこととなります（どのような手法で実現したいのかという推測と、質問者さんの理解の程度を把握するためにも必要です）。
是非コードを掲載していただけますでしょうか。
それと併用して、たとえば「このアプリのこういう機能」という例示もあれば、いわゆる丸投げ質問にもなりませんのでよろしいかと思います（私が回答できる内容とは限りませんが）。

また、お知りになりたいことはたくさんあるかと思いますが、この2つの質問は回答の内容が根本的に異なってきます。
なので、別のご質問として立てられることをお勧めします（全体的な傾向として、一つの質問が解決しないまま次の質問を立てることは嫌われる傾向にあるようなので、まずは一つ目の質問を立てられ、それが解決してから2つ目に移られるのが良いかと思います）。

[Udemy.seitaro]

Tsukuda Depods様
ご指摘ありがとうございます。
出直してきます。
ご迷惑おかけして申し訳ございません

[Udemy.seitaro]

まずは、考えてみたコードを載せること、またその結果と期待した結果の相違を計算されることが、適切な回答を得るために必要なこととなります（どのような手法で実現したいのかという推測と、質問者さんの理解の程度を把握するためにも必要です）。
⇨こちらなのですが、誤解を招いて申し訳ございません。
tableviewで考えたと申し上げたと思うのですが、tableviewの場合だと写真を見ていただくとわかるのですが線ができて、itemを異なる大きさに配置したり、itemに写真を入れたら線で囲んだりと出来ないと考えこう記述させていただきました。
誠に申し訳ございません。
また、私がお聞きしたいのが丸ごと丸投げにして全てを聞きたあのではなく、例えばTableviewでできるようであればTableviewできると教えていただき参考になるサイトを教えていただきたく思いご質問させていただきました。なかなか調べても自分が求めていることにたどり着かなくこのような形を取らせていただきました。
図々しくて申し訳ございません。
お手数ですがよろしくお願いいたします。
※二問目はアドバイスを頂きましたように別で質問をしてみたいと思います。ありがとうございます。

[TsukubaDepot]

Udemu.seitarouさんに余計なご不安をおかけしたのであれば、それはお詫びしたいとおもいます。

しかし、この手の質問は「丸投げ」という低評価（ご質問の右下にあるボタンから可能）が付きやすい傾向にあります。Swift系の質問ではあまり低評価されることは少ないのですが（それでも、目に余るもの、繰り返し行われるものは低評価されています）、他の言語であれば高い確率で低評価となっています。
無闇に低評価されるより、まずは少しでもお考えになったことを質問に追記された方がご努力された姿勢も見えやすくなるので、そのように指摘いたしました。

> tableviewで考えたと申し上げたと思うのですが、tableviewの場合だと写真を見ていただくとわかるのですが線ができて、itemを異なる大きさに配置したり、itemに写真を入れたら線で囲んだりと出来ないと考えこう記述させていただきました。

これですが、考える前にまずはコードを書かれてみてはいかがでしょうか。
一行も記述せず、ただ「できない」と判断するのは一種の思考停止です。
それよりも、たとえばtableView を使ってここまでは実現できたが、これから先がわからない、ということであれば、適切なアドバイスがつくことは容易に想像いただけるかと思います。
また、コードを拝見すれば、回答のレベルをどの程度まで引きあげられるのか、回答者として想像も付きます。
Udemy.seitaroさんは該当しないと思いますが、中には let も var も、また制御構造の理解もままならないような状態で質問される方もおおく（はっきり言えば学ぶべき基本すら抑えていない）、そのような方に回答してもその後の質疑応答すら成り立たないことも多いのが事実です。

> なかなか調べても自分が求めていることにたどり着かなくこのような形を取らせていただきました。

これも他の方のご質問や同等の事例で多いのですが、「調べました」と表現しても何を調べたのか回答者は把握できないという事実があります。
もっと具体的に「次のようなサイトで調べた」「具体的にこのようなキーワードで調べた」という記載があれば、その検索内容が適切なものなのか判断することは可能です。しかし、その情報がなければ、どこから指摘すれば良いのか判断することはできません。

既にご質問には追記されているようですが（編集 2020/07/13 21:50）、当初のご質問のままだと動作すら想像することが困難です。

例（1）に挙げられているアプリですが、なにか具体的なアプリなのでしょうか。
もしそうであれば、アプリ名を挙げていただいて、どの画面で使われているという説明をする方法もあるかと思います。百聞は一見に如かずといいますが、文章や静止画で何回も説明されるより、動作している様子を見た方が早いことも確実です。
また、図をみると、並んだタグの下に「次へ」のボタンがあるように見受けられます。また右側にはスライダも見えます。そうすると、画面を下方にスライドすることで、別の候補を出すことができるのか、またそのような場合、「次へ」のボタンの動作や振る舞いはどのようになるのか分かりにくいという感想がでてきます。

繰り返しになりますが、無闇に低評価や丸投げという判断を行いたいと思っているわけではありません。
しかし、より適切な回答がつくためには、またteratailの目標である「知識の積み上げ」を行うためには、やはり質問者さんによる具体的で適切なご質問が必要ですので、ぜひご協力いただければと思います。

[TsukubaDepot]

ちなみに、今の時点では私は適切な回答を持ち合わせていません（ちょっと時間がさけず調査する時間がないこともありますし、私自身の知識不足というのもあります）。しかし、他の方にもわかるように質問を修正していただくことで、適切な回答がつくこと、またそれを拝見して私自身のスキルアップにつながるようなことがあればと思っています。
がんばりましょう。

[退会済みユーザー]

何度も回答依頼をいただきましたが、UITextLabelとはなんですか。

TsukubaDepotさんが書いているように、
Udemy.seitaroさんは let も var も、また制御構造の理解もままならないような状態（はっきり言えば学ぶべき基本すら抑えていない）で質問される方なのではないでしょうか。
>そのような方に回答してもその後の質疑応答すら成り立たないことも多いのが事実です。
私もそう感じます。

[Udemy.seitaro]

しかし、この手の質問は「丸投げ」という低評価（ご質問の右下にあるボタンから可能）が付きやすい傾向にあります。
>ご指摘ありがとうございます。今後は気をつけて質問させていただきたいと思います。

これですが、考える前にまずはコードを書かれてみてはいかがでしょうか。
＞以前教えていただいたものなのですが全くスタイルが変わらないのでこの写真を使わせていただきます。
こちらの写真はtableviewを配置する事で文字が表示されていると考えているのですが求めている形式の方のの写真を見ていただくとわかると思うのですが１行ずつ線で仕切られていなかったり、文字が書いてあるところが丸く囲まれていたり、また１行に一つではなく２つのくくりのものがあったりしているのですがこれはtableviewを応用すればできることなのかそれとも違う方法で作成するしかないのか教えていただけたら幸いです。

ご指摘にもありました通りに今回質問させていただいたもので一度質問はやめて基本をしっかり押さえてから出直してきたいと思います
ご迷惑をおかけして申し訳ございません。

[Udemy.seitaro]

tNishikawa様
そのような方に回答してもその後の質疑応答すら成り立たないことも多いのが事実です。
私もそう感じます。
＞ご指摘にもありました通りに今回質問させていただいたもので一度質問はやめて基本をしっかり押さえてから出直してきたいと思います
ご迷惑をおかけして申し訳ございません。

[TsukubaDepot]

まぁ、色々とご意見が出てくるのは当然ですが、やはり（おそらく）独学で限度が出てくるのも理解できます（私は今なお独学ですからその気持ちはわかります）。
一応、Udemy.seitaroさんの過去のご質問は存じあげていますし、回答していますし、本当に全く丸投げする方とは違うと思っています。ただ、今回の場合は要件すら決まっていない点も多いので、あえて指摘しました。

私はどちらかというと自分が学習したいため、知識の蓄積もかねて回答していることが多いのですが、今回のご質問についても私自身の学習を兼ねて既に手をつけ始めていますので、ちょっとまっててみてください。

[Udemy.seitaro]

まぁ、色々とご意見が出てくるのは当然ですが、やはり（おそらく）独学で限度が出てくるのも理解できます（私は今なお独学ですからその気持ちはわかります）〜〜〜〜〜〜
TsukudaDepod様
本当にご指摘ありがとうございます。
丁寧で尚且つ的確でとても感謝しております。
私自身も中学生でまだUdemyでしか勉強したことがなく甘えが出てここで丸投げな質問をしてしまったのだと感じています。他の方にもご迷惑をおかけして申し訳なく思っています。

私はどちらかというと自分が学習したいため、知識の蓄積もかねて回答していることが多いのですが、今回のご質問についても私自身の学習を兼ねて既に手をつけ始めていますので、ちょっとまっててみてください。
＞本当に私なんかに教えていただき誠にありがとうございます。
もし教えていただけるようでしたらこのまま未解決のままで置いておいて問題ないのでしょうか。
お手数をおかけしてもうしわけございませんがよろしくお願い致します。

Answer 1

たとえば、TagListView　のようなフレームワークを使えば似たようなことは可能かもしれません。

• TagListView

ただし、TagListView　は本当にタグを表示するだけなので、スクロール部分は別に実装が必要です。

具体的には TagListView を表示する View をスクロールビューに載せることで実装しています。
TagListView の実装よりも、もしかしたらスクロールビューの実装の方が大変かもしれません。StoryBoard で完結するのですが、私はいまだカンニングしなければ実装できません。

スクロールしたら追加されるというのも詳しくはわかりませんが、おそらくこんな感じかな、という程度のサンプルです。

import UIKit
import TagListView

class ViewController: UIViewController, TagListViewDelegate {
    @IBOutlet weak var tagListView: TagListView!
    @IBOutlet weak var selectButton: UIButton!
    
    var tags = [
        "　???? 動物・ペット　", "　???? コメディ　", "　???? スポーツ　", "　???? ゲーム　",
        "　???? How to・役立つ　", "　❤️ 家族　", "　???? アート　", "　???? ダンス　",
        "　???? ロマンス　", "　???? Beauty　"]
    var selectedTag = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // MARK: tagListView の設定
        tagListView.delegate = self
        // ボタンの形状、間隔
        tagListView.cornerRadius = 20
        tagListView.marginX = 20
        tagListView.marginY = 20
        // 文字装飾関連
        tagListView.textFont = UIFont.systemFont(ofSize: 24)
        tagListView.tagBackgroundColor = .white
        tagListView.textColor = .black
        tagListView.borderColor = .systemGray6
        tagListView.borderWidth = 1
        // 選択された時の装飾
        tagListView.selectedTextColor = .white
        // 影の設定
        tagListView.shadowColor = .systemGray4
        tagListView.shadowOffset = CGSize(width: 2, height: 2)
        tagListView.shadowOpacity = 0.6
        // タグの追加
        tagListView.addTags(tags)
    }
    
    // MARK: 選択されたタグの文字列を表示
    @IBAction func selectButton(_ sender: Any) {
        var selectedTags = ""
        let tags = tagListView.selectedTags()
        // 選択されたタグを文字列として追加
        
        if tags.count != 0 {
            for i in tagListView.selectedTags() {
                selectedTags.append(i.titleLabel?.text ?? "")
            }
        } else {
            selectedTags = "選択なし"
        }
        
        let alertController = UIAlertController(title: "選択されたタグ", message: selectedTags, preferredStyle: .alert)
        let action = UIAlertAction(title: "了解", style: .default, handler: nil)
        alertController.addAction(action)
        
        present(alertController, animated: true, completion: nil)
    }
    
    // MARK: タグを選択された時に呼び出される delegate
    func tagPressed(_ title: String, tagView: TagView, sender: TagListView) {
        print(title)
        
        if tagView.isSelected == false {
            selectedTag = title
            // 選択されたタグの背景色を変更する
            tagView.selectedBackgroundColor = .systemGray4
        } else {
            selectedTag = ""
        }
        
        tagView.isSelected.toggle()
    }
}

追記

アウトレットの設定について

Comments

[Udemy.seitaro]

TsukudaDepod様
本当にご丁寧にありがとうございます。
感謝しかありません。
２つほどご質問があるのですが
Tsukuda様はこれを実装する手段としてTagListViewというのを実装されたと思うのですがこれは何か探す方法というのはあるのでしょうか。
というのも、自分が作りたいものにマッチするようなモノ（今回で言うTagListView）を探す方法があるのかどうか教えていただけますでしょうか。
もう一つが @IBOutlet weak var tagListView: TagListView!のここの部分なのですが＋からobjectを洗濯しようとしたのですがその中にTagListViewというのはなかったのですがどのように紐付けするのでしょうか。

自分の知識不足ゆえご迷惑をおかけして申し訳ございません。
教えていただけたら幸いです。
お手数ですがよろしくお願い致します

[TsukubaDepot]

> TagListViewというのを実装されたと思うのですがこれは何か探す方法というのはあるのでしょうか。

ひたすら検索するしかないかと思います。
たとえば、「タグ Swift」というたった2単語のキーワードでGoogle検索を行うだけで、いくつかの実装方法が出てきます。
それらを一つひとつみていくと（といっても大抵トップ10くらいまでしか見ませんが）、TagListView というフレームワーク（ライブラリ）を使うと見た目もそっくりなタグを作ることができそうだと判断できます。

次は検索キーワードを「TagListView」に変えて検索すると、GitHubのページがトップで引っかかるはずです。
これを見ると、ライブラリの情報や具体的な使い方がわかります。
ざっと見た感じ、これなら簡単に使えそうな感じがするので、あとは Podfile を作り、自分の環境にダウンロードし、ビルドして使うことになります。

> もう一つが @IBOutlet weak var tagListView: TagListView!のここの部分なのですが＋からobjectを洗濯しようとしたのですがその中にTagListViewというのはなかったのですがどのように紐付けするのでしょうか

TagListView は標準のフレームワークではないので、自分でダウンロードしてくる必要があります。
また、InterfaceBuiler と連携して使うとなると、その方法も確認しておく必要があります。
といっても、TagListView の紹介ページは実に完結に、しかし必要な情報が書いてあるので、それを確認するだけで済みます。
https://github.com/ElaWorkshop/TagListView#usage
の部分にありますが、TagListViewをご自身の環境に取り込み、一度ビルド（cmd+Bなど）した後であれば、まずは View を適当な場所に貼り付け、その後その View のカスタムクラスを TagListView にするだけで反映させることは可能です（FSCalendarなども同じような方法でやります）。

私が作ったサンプルはスクロールビューに載せていますが、それはそれなりに面倒なので、まずはStoryBoardにViewをひとつ貼り付け、それをTagListViewにするのが楽かと思います。

過去のご質問を拝見すると、Firebaseをお使いということなので、Podfileの使い方は大丈夫かと思います。
Firebaseの時と同じような感じで TagListView を追加すれば使えるようになります。

[Udemy.seitaro]

TsukudaDepod様
ひたすら検索するしかないかと思います。
＞こちらご丁寧に教えていただきありがとうございます。
やはり１から丁寧に探す必要があるのですね！！
参考にさせていただきます。ありがとうございます。

TagListView は標準のフレームワークではないので、自分でダウンロードしてくる必要があります。
＞こちらなのですが、上に写真を追加させていただいたのですがこのコードをどこかに追加するということでしょうか。
xcode objectを取り込む と検索をかけてみたのですがリモートリポジトリを取り込む方法しか出てきませんでした。お手数ですが、もし上の写真のコードをどこかに追加するようでしたら方法を伝授していただけませんでしょうか。また、もし違うようであれば方法を教えていただけると幸いです。
自分の知識不足ゆえお手数をおかけして申し訳ございません。
よろしくお願い致します

[TsukubaDepot]

過去のご質問で、Firebase を使っていらっしゃるので、Cocoapodsはお使いかと思います。
そうであれば、Firebase の時と同じく、Podfile に必要な情報を記載して、pod install し Xcode を再起動する流れになります。
https://github.com/ElaWorkshop/TagListView#installation

[Udemy.seitaro]

TsukudaDepod様
ご説明ありがとうございます。
私の説明不足でした。誠にすみません。
私がTsukuda様にお伺いしたかったことなのですがpodはダウンロードしていて、次へボタンとの紐付けも完了している状態なのですが、先ほど写真にあげさせていただいたのですがTagListViewとの紐付けるものがわからず○が◉になっていないという状態です。
また、紐付けが完成していないせいか
Thread 1: Exception: "[<UIViewController 0x7fdab1779da0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key selectButton."
というエラーも発生してしまったという状況です。

まとめさせていただくと、TagListViewがプログラムと紐付けが完了していないのですが、紐付けるものはどのようにすれば追加できますでしょうか。

情報量多い上に何度も聞いてしまい申し訳ございません。
お手数ですがよろしくお願い致します。

[TsukubaDepot]

私がお伺いしているのは、cocoapods を使って 「TagListView」 は導入したのでしょうか、ということです。
前述の通り、TagListView は標準のフレームワークではないため、github からダウンロードする必要があります。
それは、Firebase が標準のフレームワークでないため、cocoapods を使って導入するのと同じことなのです。
Firebaseだと
https://firebase.google.com/docs/ios/setup?hl=ja#add-sdks
で説明されているように、Podfile を作成し、そこに

pod 'Firebase/Analytics'

のような感じで必要となるフレームワーク名を追加し、pod install で追加することになります。
同じく、TagListView であれば、

pod 'TagListView'

を追加し、pod init を実行する必要があります。

これらの作業は終了したのでしょうか、あるいは、まだ終了できていないのでしょうか。
まずは、そこを明確にしていただければと思います。
「 pod はダウンロードしていて」とありますが、あまり一般的ではない言い方（pod といった場合に具体的に何を指しているのか明確でないため）なので、念のために確認します。

[Udemy.seitaro]

TsukudaDepod様
誤解を招くような発言申し訳ございません。
写真を追加したのでご確認いただけますでしょうか。
お手数をおかけして申し訳ございませんが、よろしくお願い致します

[TsukubaDepot]

おそらく、追加されているのだと思います（おそらく関係ないフレームワークも相当のこっていると感じられますが、それは本質的な問題ではないので今回は置いておきます）。

そうなると、今度は TagListView を StoryBoard で使えるようにすることとなります。
実は、これについては 17:26 に行ったコメントに書いてありますが、それはご理解いただけましたでしょうか。
再掲すると

また、InterfaceBuiler と連携して使うとなると、その方法も確認しておく必要があります。
といっても、TagListView の紹介ページは実に簡潔に、しかし必要な情報が書いてあるので、それを確認するだけで済みます。
https://github.com/ElaWorkshop/TagListView#usage
の部分にありますが、TagListViewをご自身の環境に取り込み、一度ビルド（cmd+Bなど）した後であれば、まずは View を適当な場所に貼り付け、その後その View のカスタムクラスを TagListView にするだけで反映させることは可能です（FSCalendarなども同じような方法でやります）。

ということです。

なので、
1. StoryBoard で View を貼り付ける
2. View をクリックし、カスタムクラス(Custom Class）を TagListViewにする
という作業を行えば、紐付けが行えるようになります。
ただ、Xcodeは自動保存のタイミングによってはうまく反映されないことがあるので、意図的に（自分で操作して）保存作業を行わないとうまくいかないこともありますから、それはお気をつけください。

[Udemy.seitaro]

TsukudaDepod 様
わざわざ段階に分けて教えてくださりありがとうございます。
無事カスタムクラスを TagListViewにするできたのですが先ほどにも添付させていただいたのですが
Thread 1: Exception: "[<UIViewController 0x7fa53248e250> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key selectButton."
こちらのエラーが出てしまいました。
https://teratail.com/questions/268897　
こちらをみてみたのですがClassはしっかりと合致していたのですが
エラーの内容を教えていただくことは可能でしょうか。
お手数をおかけして申し訳ございません。

[TsukubaDepot]

エラーメッセージをよく見ると「for the key selectButton.」とあります。
私のサンプルだと「次へ」というボタンに対するアウトレットやアクションに相当しますが、この辺りの設定はおかしくなっていませんでしょうか。
参考までに、私の環境での接続状況を回答本文に追記していますので、ぼたんの接続状況をよくご確認ください。

[Udemy.seitaro]

TsukudaDepod様
返信遅くなりすみません。
接続状況を確認したのですが、IBActionとIBOutlet共に接続されていました。
こうなると何か他に原因があるものなのでしょうか。お手数ですがよろしくお願い致します。

[TsukubaDepot]

私が最後に載せたスクリーンショットと同じようなスクリーンショットを載せていただけますでしょうか。
StoryBoardでUI部品の階層関係、および右側にはアウトレットの接続関係がわかるようなショットが一番判断しやすいかと思います。
あと、この手のトラブルで一番解決しやすいのは、一からプロジェクトを作り直すことです。
新しくプロジェクトを作り直し、StoryBoardは新規に作成し、ソースコードだけコピーして流用する方法です。
しかし、まずはスクリーンショットからお願いしたいと思います。

[Udemy.seitaro]

TskudaDepod様
お世話になっています。
あと、この手のトラブルで一番解決しやすいのは、一からプロジェクトを作り直すことです。
＞こちらでstoryboadを一度削除してもう一度viewcontrollerを追加して紐付けしたら通りました。
ご迷惑をおかけして申し訳ございません。

今回の質問でTagViewについて学ばせていただきました。
とても貴重なご意見ありがとうございました。
とてもいい経験になりました。
今後は修正依頼のところにも記載がありましたように少し自分の知識不足があるので本やUdemyなどで勉強したいと考えています。
今回はありがとうございました。
またの機会があればよろしくお願いいたいします。

[TsukubaDepot]

解決したようでよかったです。
私も同じですが、iOSでやってみたいことはたくさんあるかと思います。
しかし、それらは基本的な技術の積み重ねであって、基本的な技術が疎かなまま、上位の技術を身に付けることは難しいかと思います。
大きいことを望むことは否定しませんし、私にその資格はありませんが、それを確実に実現したいのであれば、たとえばStoryBoardでごく簡単な部品を並べ、それらの動作を思うようにできること、クロージャや非同期の処理について、簡単な例で理解を深めること、オプショナル値の扱いに不安があれば、自分で簡単なサンプルを書いてその挙動を確かめられるなど、基礎と復習は重要になります。
Udemyやyoutubeなどの教材も否定しませんし、Udemyはいくつか教材を見たこともありますのでその内容も多少は把握していますが、初心者向けといいながら基礎を飛ばして難しい内容に挑戦しているコースも見受けられます。
まずは、本当に基本的なことを繰り返し実践し、大きなことに挑戦するときには、その内容が「どのような基礎技術の集合で成り立っているのか」が理解できるようになってから挑戦する、というのが結局は早道かと思います。

そういう私も技術はさっぱりなので適切な回答やアドバイスを行えているのかは自信がありませんし、むしろ私が勉強させてもらっているところもありますが、もし今後もなんらかのお役に立てればと思います。