FacebookアプリやGoogle+で使われているCardUIを実装してみました。

正直ブログで色々紹介するには量が多いので、GitHubに上げました。

よかったら、参考にしてみてください。

NinjaAdMax / SampleCardUI


ちなみにこのサンプルで使っている画像はすべてぱくたそ - フリー写真素材・無料ダウンロードの画像を利用しています。

このサンプルの画像を使う場合はぱくたその利用規約に同意した上で使用してください。


こんなUIになります。

ScreenShot95

わかりにくい点だけご紹介します。

UITableViewでnibを使う

こんな感じで使えました。

1
self.tableView.registerNib(UINib(nibName: "ImageDataTableViewCell", bundle: nil), forCellReuseIdentifier: "ImageDataTableViewCell")

これをoverride func viewDidLoad()の時にでも実行すれば大丈夫でした。

で、Cellを生成するときは

1
let cell = tableView.dequeueReusableCellWithIdentifier("ImageDataTableViewCell", forIndexPath: indexPath) as ImageDataTableViewCell

これで、nibを使ったレイアウトで出来ます。

角丸をつける

InterfaceBuilderUIViewを置いて、さらにその下にUIViewを置いてそのUIViewに角丸をつけています。

こんな階層になってます。

ScreenShot96

で、ImageDataTableViewCellのクラスは以下のようにしました。

ImageDataTableViewCell.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import UIKit
class ImageDataTableViewCell: UITableViewCell {
@IBOutlet weak var mainView: UIView!
@IBOutlet weak var imageModelLabel: UILabel!
@IBOutlet weak var imageNameLabel: UILabel!
@IBOutlet weak var profileImageView: UIImageView!
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
}
func setImageData(imageData: ImageData) {
self.backgroundColor = UIColor.clearColor()
self.mainView.backgroundColor = UIColor.whiteColor()
self.mainView.layer.cornerRadius = 10.0
self.mainView.layer.masksToBounds = true
self.imageModelLabel.text = imageData.model
self.imageNameLabel.text = imageData.name
self.profileImageView.image = UIImage(named: imageData.imageURL!)
}
}

これの

1
2
self.mainView.layer.cornerRadius = 10.0
self.mainView.layer.masksToBounds = true

これで角丸にしました。

JSONファイルの読み込み

いちいち文字打ったりするのがめんどくさかったので、.jsonファイルを用意して、それを読み込んでモデルを作成しました。

ImageData.json
1
2
3
4
5
6
7
8
9
10
{
"data" : [
{
"name": "湯室で壁ギュ。それは彼女の求愛行為だった",
"model": "大川竜弥 Lala",
"imageURL": "001"
},
~省略~
]
}

読み込んで、使うときは以下のようにしました。

1
2
3
4
5
6
7
8
9
10
11
12
let path = NSBundle.mainBundle().pathForResource("ImageData", ofType: "json")
var error: NSError? = nil
if let data = NSData(contentsOfFile: path, options: nil, error: &error) {
if let json = NSJSONSerialization.JSONObjectWithData(data, options: nil, error: &error) as? NSDictionary {
if let array = json["data"] as? NSArray {
for obj: AnyObject in array {
// dictionaryがJSONオブジェクトになります。
let dictionary = obj as NSDictionary
}
}
}
}

終わりに

特に難しいことはしませんでした。

想像通りにInterfaceBuilderを使ってやったら、そのまんまうまく出来ました。

なにかわからないことがあったらサンプルを試してみてください。

NinjaAdMax / SampleCardUI


ちなみにこのサンプルで使っている画像はすべてぱくたそ - フリー写真素材・無料ダウンロードの画像を利用しています。

このサンプルの画像を使う場合はぱくたその利用規約に同意した上で使用してください。


以上になります。

参考

Swift Table View Animations Tutorial: Drop-In Cards - Ray Wenderlich

ついにTableViewCellの高さが自動で調整してくれるようになった件!!! | Qiita

iOS

「iOS」のおすすめ記事