2017年2月28日火曜日

CALayer覚え書き

よくわかってないんだけど、UIViewとCALayerの違いなどについて。

CALayerはアニメーション実行のFrameworkであるCoreAnimationが提供する仕組みで、その名の通り画像をアニメーションやお絵かきをさせるのに使う。
データとしてはビットマップグラフィックとして持っている。
レイヤーっつーんだから、透明なお絵かき板みたいな概念のものだろう。
CALayerを直接操作するには、事前にQuartzCore/QuartzCoreのFrameworkのimportが必要。

UIViewはお絵かき、アニメーション以外の部分、たとえばタッチした時のイベント処理とかの機能を提供している。

UIViewのインスタンスを作るとCALayerが自動的に作られるため、通常はUIViewに向けたメソッドやプロパティをいじることで、内包しているCALayerを使ったアニメーションも実現できる。

UIViewに別なViewやButtonなどをaddSubviewするように、CALayerに別なCALayerをaddSublayerすることもできる。
透明なお絵かき板を何枚も重ねて、それぞれが直接干渉しない形で動かしたりするイメージだろうか。

間違ってるかもしれないけど、たぶんだいたいこんな感じじゃないかと思う。
もっと詳しくわかったら追記する。

2017年2月18日土曜日

UIBarButtonItemの画像をきれいに表示する

UIBarButtonItemに画像を使用した場合、実サイズで表示されてしまうため、よほど小さい画像にしてやらない限り大きくはみ出してしまう。
かといって小さい画像にしてやると、Retinaディスプレイでもジャギーが目立つ粗いものになり、見た目がよろしくない。

UIButtonやUIImageViewにはContentModeの設定(Scale To FillとかAspectFitとか)ができ、部品の大きさに合わせて画像を縮小表示してくれるのだが、UIBarbuttonItemにはそんなものはない。

一瞬悩んだが、XcodeのAssetsに2x、3xの画像を登録すればいいことがわかった。


画像の大きさは20*20ピクセルがいいらしく、2xでは40*40、3xでは60*60の画像を登録した。

なお、今更ではあるけど、iOS7から(だっけ?)のフラットデザインの方針により、カラー画像を登録してもモノクロになっちゃうので、白く抜きたいところをalpha値 = 0 で描いた画像を使わなきゃいけない。
やり方によっちゃカラーの画像も使えるんじゃないかと思うんだけど、それはまた必要になったら調べるなり。

2017年2月15日水曜日

円周上の座標を求める

単に円を描くならUIBezierPath()を使ったovalメソッドを使うのが簡単なのだが、円周上の座標を求めて処理をしたい場合には、sin、cosを使った計算が必要になる。

半径:r
角度:θ
の場合、

X座標は r*cosθ
Y座標は r*sinθ
で求められる。

角度θはプログラミング言語上ではラジアン角で指定する必要があるので、その変換を含めて実際のコードは以下のようになる。
(degreeには度数を、rには半径を入れておく)

let θ = M_PI / Double(180) * Double(degree)
let x = Double(r) * cos(θ)
let y = Double(r) * sin(θ)

ラジアン角とは?

ラジアン角:円の半径に等しい長さの弧の中心に対する角度(半径と同じ長さだけ円周を描いた時の角度が1ラジアン)

円周率はπなので、360度は直径*πだから、1ラジアンの2倍*円周率ということで、
360度 = 2πラジアン ということになる。

めんどくさいんだけど、数学的にはこっちの方が自然で、式が簡単に書けるんだって。まあその辺りのところは別に勉強するとして。

度数とラジアンの変換は、

360 = 2π だから、
ラジアン角 = 2π / 360 * 度数 であるので、簡単にして、
ラジアン角 = π / 180 * 度数 ということになるわけだ。