-->

iOS

恒例になっているTwitterのタイムライン風の画面を作ってみるw

001

新規にプロジェクトを作成して、ストーリボードを開いてテーブルビューをはっ付けておく。
貼ったテーブルビューにTable View Cellをドラッグ&ドロップする。
貼ったテーブルビューセルのアトリビュート・インスペクターでIdentifierにcustomcellと入力する。

003

テーブルビューセルに部品を配置する。
ユーザーアイコンにあたるImageViewを貼って、制約を次のように設定する。Content ModeをAspect Fitにする。

004

Labelを貼って、制約を次のように設定する。フォントサイズを20にする。

005

TextViewを貼って、制約を次のように設定する。Scrolling Enabled、Editableのチェックを外す。

006

新規にCocoa Touch Classを作成してセルのクラスを作る。クラス名はArticleTableViewCell、SubclassはUITableViewCellにしておく。

007

ArticleTableViewCellクラスとストーリボードに貼ったTableViewCellと接続する。
customcellを選んでIdentity Inspectorを選んでClassでArticleTableViewCellを選ぶ。

008

いったんビルドする。

customcellに貼った部品をctlキーを押しながらドラッグ&ドロップしてArticleTableViewCellに繋ぐ。ArticleTableViewCellはこんな感じになる。

import UIKit

class ArticleTableViewCell: UITableViewCell {
    @IBOutlet weak var icon: UIImageView!
    @IBOutlet weak var user: UILabel!
    @IBOutlet weak var comment: UITextView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Assets.xcassetsにユーザーアイコン用のイメージをImageって名前で追加する。

表示するデータのクラスArticleを作る。

import UIKit

class Article: NSObject {
    var icon:UIImage
    var user:String
    var comment:String
    
    init(icon:UIImage, user:String, comment:String) {
        self.icon = icon
        self.user = user
        self.comment = comment
    }
}

ViewControllerクラスにUITableViewDataSourceプロトコルを実装し、ストーリボードのテーブルビューのdataSourceとViewControllerを接続する。ViewControllerクラスはこんな感じ。

import UIKit

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
 
    // ダミーのデータを用意
    var list:[Article] = [
        Article(icon: UIImage(named:"Image")!, user: "user1", comment: "あいうえお"),
        Article(icon: UIImage(named:"Image")!, user: "user1", comment: "あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお")
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // セルの高さを自動的に決まるように設定する
        tableView.estimatedRowHeight = 20
        tableView.rowHeight = UITableViewAutomaticDimension
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // データの数を返す
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count;
    }
    
    // セルにデータを設定して返す
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customcell") as! ArticleTableViewCell
        let row = indexPath.row
        cell.icon.image = list[row].icon
        cell.user.text = list[row].user
        cell.comment.text = list[row].comment
        return cell;
    }
}


このエントリーをはてなブックマークに追加

NSHomeDirectory()でパスが取得できる。ここ以外へのファイルの保存などは制限される。
NSHomeDirectory()で得たパスを基点に用途ごとにフォルダが用意されていて、NSSearchPathForDirectoriesInDomains()で取得できる。

    @IBAction func buttonClick(_ sender: UIButton) {
        // アプリケーションホームディレクトリ
        print(NSHomeDirectory())
        // ドキュメントディレクトリ
        // FileManager.SearchPathDirectoryやFileManager.SearchPathDomainMaskは省略できる。
        print(NSSearchPathForDirectoriesInDomains(FileManager.SearchPathDirectory.documentDirectory, FileManager.SearchPathDomainMask.userDomainMask, true)[0])
        // キャッシュディレクトリ
        print(NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true)[0])
        // テンポラリディレクトリ
        print(NSTemporaryDirectory())
    }


このエントリーをはてなブックマークに追加

画面遷移するとき遷移元ののView Controllerのprepareが呼び出されるのでprepareをオーバーライドしてそこで遷移後のView Controllerに渡す。

[iOS] 画面遷移に追加してみよう。ページ1のボタンを押すと、"PAGE2"ってのを渡してページ2ではラベルにその値を表示することにする。

まず、ページ2のView Controllerクラスを追加して、ストーリボードのページ2と紐付ける。
File - New - FileでCocoa Touch Classを選んでSubclassにUIViewControllerを選んでクラス名をViewController2とする。

001

ストーリボードのページ2とViewController2クラスを紐付けする。
ページ2の図の1の部分を選択。次に2の部分を選択して、ClassでViewController2を選択する。

002

ViewController2クラスに値を渡すためのプロパティを追加する。あと、viewDidLoadでラベルに値を設定するようにする。ViewController2クラスはこんな感じだ。

import UIKit

class ViewController2: UIViewController {
    @IBOutlet weak var label: UILabel!
    
    var message:String = ""

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        label.text = message
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

ページ1のprepareメソッドを追加してViewController2のmessageプロパティに"PAGE2"をセットする。コードはこんな感じだ。

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        let viewController2:ViewController2 = segue.destination as! ViewController2
        viewController2.message = "PAGE2"
    }


このエントリーをはてなブックマークに追加

[iOS] 画面遷移の続きだ。ページ2からページ1へ戻る方法だ。

ページ2に戻るためのボタンを追加する。
ページ1のViewControllerにページ2から戻るときに呼ぶメソッドを追加する。

    @IBAction func unwindToMain(sender: UIStoryboardSegue) {
        
    }

ページ2のボタンをctrlキーを押しながらExitにドラッグ&ドロップする。表示されるポップアップメニューでunwindToMainWithSenderを選ぶ。

001

これでページ2のボタンを押したらページ1に戻るようになる。



このエントリーをはてなブックマークに追加

Single View Applicationを新規につくって最初の画面に表示している画面がわかるようにラベル(ページ1)、別の画面に遷移するためのボタンをはっ付けておく。

ストーリボードでView Controllerをドラッグ&ドロップする。

001

そして、遷移したのがわかるようにラベル(ページ2)をはる。

ページ1のView Controllerをctrlキーを押しながらページ2へドラッグ&ドロップする。表示されるポップアップメニューでPresent Modallyを選ぶ。

002

遷移の矢印を選んでIdentifierをSegue1にする。

003

ページ1のボタンを押したときの処理を次のようにする。

    @IBAction func onClickButton(_ sender: UIButton) {
        self.performSegue(withIdentifier: "Segue1", sender: sender)
    }

これでとりあえず遷移する。

(追記)

ページ1のView Controllerからページ2にctrlキーを押しながらドラッグ&ドロップするのではなくて、ページ1のボタンからページ2にctrlキーを押しながらドラッグ&ドロップして、表示されるポップアップメニューでPresent Modallyを選んでやると、ページ1のボタンを押したときの処理を追加する必要がない。



このエントリーをはてなブックマークに追加

↑このページのトップヘ