SwiftでUISliderのデザインをカスタマイズする方法 [UISlider] [swift2.2]
今回はUISliderのデザインをカスタマイズする方法を残しておきます。
Githubは以下です。
GitHub - anthrgrnwrld/customSlider
また今回は、Objective-Cで書かれた以下のページを参考に Storyboard + Swift で作成しました。
ポイント & コード
- Sliderの画像の指定はUISliderのメソッド setThumbImage, setMinimumTrackImage, setMaximumTrackImageにて行います。
- 画像の作成の際、Sliderバーの長さを伸ばすため、stretchableImageWithLeftCapWidthというメソッドを使用するのが便利です。
(参考URL)
- コード
import UIKit class ViewController: UIViewController { @IBOutlet weak var mySlider: UISlider! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. setCustomSlider() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func setCustomSlider() { //スライダー初期化 mySlider.minimumValue = 0.0 mySlider.maximumValue = 1.0 mySlider.value = 0.5 //スライダーのデザインをカスタマイズ let imageForThumb = UIImage(named: "slider_thumb.png") let imageMinBase = UIImage(named: "slider_left.png") let imageMaxBase = UIImage(named: "slider_right.png") let imageForMin = imageMinBase?.stretchableImageWithLeftCapWidth(4, topCapHeight: 0) let imageForMax = imageMaxBase?.stretchableImageWithLeftCapWidth(4, topCapHeight: 0) mySlider.setThumbImage(imageForThumb, forState: .Normal) mySlider.setThumbImage(imageForThumb, forState: .Highlighted) mySlider.setMinimumTrackImage(imageForMin, forState: .Normal) mySlider.setMaximumTrackImage(imageForMax, forState: .Normal) } }
UIImageとCGImageの違いでハマったこと [pixel] [point] [swift2.2]
以前、UIImageから一部を切り取る方法について本ブログにて書かせて頂きました。
anthrgrnwrld.hatenablog.com
ザクッと方法を説明しますと、targetとなるUIImageをCGImageへ変換し、そのCGImageと切り取るrectを指定し、 CGImageCreateWithImageInRect
を使用して切り取りを実行しています。
この度、UIImageを切り取りたい事案があり、ここで書いた方法で実行しましたが、想定した切り取り位置でimageが切り取られない現象が発生しました。
何で?と思いデバッグしてみたところ、「ん〜?どうやら指定した座標、長さの1/2で切り取られてるぞ〜?」ということに気づきました。実行環境はiPhone6です。ここでピンときました。
そこでググってみたところ、以下のようになっていることを理解しました。
- UIImageの長さや位置の指定はpoint単位で行う
- CGImageの長さや位置の指定はpixel単位で行う
- retinaディスプレイは1pointで複数pixelとなる(iPhone6の場合には2pixel)
参考ページは以下です。
1point当たり何pixelになるかは実行するiOSデバイスによって異なります。
以下のコードで調べることが出来ます。
scaleが1point当たりのpixel数にあたります。
let scale = imageSize.height / viewSize.height
よって、
- UIImageを基準に指定したRectのx,y,width,heightにそれぞれscaleをかけたRectを準備する
- その算出されたRectを
CGImageCreateWithImageInRect
の引数に指定する
を行うことで、想定通りに動作されるようになります。
swiftのzip関数で二つの配列の組み合わせを作成する [swift2.2] [Zip2Sequence]
swiftにはzipという関数で、二つの配列を組み合わせた構造体(のようなもの)を作成することが出来ます。
下の例のコードでは、ランダムなInt型の配列array1とString型の配列array2を組み合わせ、zippedArrayという組み合わせを作成したものです。
let array1 = [3,78,5,8,6,7,2] let array2 = ["s", "w", "i", "f", "t"] var zippedArray = zip(array1, array2)
全組み合わせをprintしてみましょう。
コードは以下です。
zippedArray.forEach { print("\($0.0), \($0.1)") }
実行結果は以下のようになります。
3, s 78, w 5, i 8, f 6, t
上記の実効結果からわかる通り、配列のメンバー数が異なる場合には、少ない方に合わせて多い方がカットされるようです。
swiftで乱数を生成する [swift2.2]
swiftで乱数を発生させる方法についてのメモ。
random()
とか arc4random()
とか他にも色々ありそうだし、結局何を使えばいいの?
て事で調べました。
Swiftでお絵描きアプリを作成する(第4回UIImageのカメラロールへの保存) [Array][swift2.2]
前回に引き続きお絵描きアプリを作成しようと思います。
今回で本シリーズは最終回です。
作成するお絵描きアプリの機能は以下!
- 拡大が可能!(前々々回済み)
- ペンの色、太さが変更可能!(前々回済み)
- Redo/Undoが可能!(前回済み)
- 描いた絵の保存が可能!(今回)
前回まででお絵描きアプリとしてはほぼ完成しました。
しかし何かが足りない...?
そうだ!保存機能がない!
...ということで保存機能を追加することにしました。
「UIImageのカメラロールへの保存」はお絵描きアプリだけでなく、他のアプリでも使いたくなる機能ですね。
Githubは以下です。
▶︎GitHub - anthrgrnwrld/drawWithExpand at 66fafc321ba11a57a8560a4149579dd6d8b25985
過去の本シリーズの記事は以下です。
まだ読んでない、という方は以下の方も見てみて下さい!
Swiftでお絵描きアプリを作成する(第3回Redo/Undoの実装) [Array][swift2.2]
前回に引き続きお絵描きアプリを作成しようと思います。 作成するお絵描きアプリの機能は以下!
- 拡大が可能!(前々回済み)
- ペンの色、太さが変更可能!(前回済み)
- Redo/Undoが可能!(今回)
- 描いた絵の保存が可能!(次回以降)
前々回はお絵描き部分の実装、前回はペンの色、太さの変更可能にしました。
今回はRedo/Undoを可能にしたいと思います。
前回、前々回をまだ読んでいないというあなたは以下もチェックしてみて下さい。
Githubは以下です。
▶︎GitHub - anthrgrnwrld/drawWithExpand at thirdBranch
続きを読む
Swiftでお絵描きアプリを作成する(第2回ペンの色・太さを変更可能にする) [UISlider][UIButton][UIBezierPath][swift2.2]
前回に引き続きお絵描きアプリを作成しようと思います。
作成するお絵描きアプリの機能は以下!
- 拡大が可能!(前回済み)
- ペンの色、太さが変更可能!(今回)
- Redo/Undoが可能!(次回以降)
- 描いた絵の保存が可能!(次回以降)
前回は拡大可能なお絵描き部分を作成しました。
今回はお絵描きを行う際にペンの色、太さを変更出来るようにしようと思います。
前回をまだ読んでいないというあなたは以下もチェックしてみて下さい。
anthrgrnwrld.hatenablog.com
Githubは以下です。
GitHub - anthrgrnwrld/drawWithExpand at secondBranch