Swift/iPad/Xcodeでつまみ部分が画像のスライダーをつくりたいです

♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡

Swift/iPad/Xcodeでつまみ部分が画像のスライダーをつくりたいです。

Main.storyboardのIBにUIViewSliderをおいて、
作成したクラス、
@IBDesignable class UCSlider: UIViewSlider{
を適用しましたがエラーになりました。

継承するクラスをUIViewControllerに変更して下記のようにすると、

swift
1import UIKit
2
3@IBDesignable class UCSlider: UIViewController{
4    
5    override func viewDidLoad() {
6        
7        //スライダ作成
8        let mySlider = UISlider(frame: CGRectMake(0, 0, 200, 30))
9        
10        mySlider.layer.position = CGPointMake(self.view.frame.midX, 100)
11        
12        mySlider.backgroundColor = UIColor.whiteColor()
13        
14        mySlider.minimumValue = 0
15        
16        mySlider.maximumValue = 1
17        
18        mySlider.value = 0.5
19        
20        mySlider.maximumTrackTintColor = UIColor.greenColor()
21        // Sliderの現在位置より右のTintカラーを変える.
22        mySlider.minimumTrackTintColor = UIColor.blackColor()
23        
24        mySlider.addTarget(self, action: "onChangeValueMySlider:", forControlEvents: UIControlEvents.ValueChanged)
25        
26        self.view.addSubview(mySlider)
27        
28    }
29    
30}
31

配置した、UIViewSliderにクラスを指定することはできませんでしたが、指定しなくてもビルドしたら表示されていました。

クラスは指定していなくても勝手に表示されるのでしょうか？

現在、IBで配置したものと、クラスで作成したものの２つが表示されています。

先に、IBで配置した後にクラスでスタイルを変更することは可能でしょうか？
場所の指定が難しいので、先にIBで配置したいです。

その後に、Thumb(つまみ)を画像に変更したいのですが、
そのやりかたも探しましたが見つけられませんでした。

教えていただけると助かります。

よろしくおねがいします٩(๑❛ᴗ❛๑)۶

????質問を受けて追記

エラー内容

♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡

行動規範の内容に同意します

回答1件

ベストアンサー

Main.storyboardのIBにUIViewSliderをおいて、
作成したクラス、
@IBDesignable class UCSlider: UIViewSlider{
を適用しましたがエラーになりました。

UIViewSliderというクラスはUIKitにはないと思いますが、本来UISliderを継承すべきところを誤ってUIViewSliderと記述してエラーになったということじゃないでしょうか? エラーになったというのはどんなエラーメッセージが出たんですか?

配置した、UIViewSliderにクラスを指定することはできませんでしたが、指定しなくてもビルドしたら表示されていました。
クラスは指定していなくても勝手に表示されるのでしょうか？

UIViewControllerを継承するクラスをUIViewSlider(UISlider?)に指定することは当然できませんが、StoryboardのUIViewControllerに指定するか、コードで生成するかいずれかしないと勝手に使用されることはないと思います。StoryboardのUIViewControllerにUCSliderを指定しているんじゃないですか?

先に、IBで配置した後にクラスでスタイルを変更することは可能でしょうか？

「クラスでスタイルを変更する」というのは、たぶん「クラス内に記述したコードでスタイルを変更する」という意味なのだと思いますが、それなら普通に可能です。Storyboardに配置したUIImageViewにコードで画像イメージを設定するのと同じレベルです。

その後に、Thumb(つまみ)を画像に変更したいのですが、
そのやりかたも探しましたが見つけられませんでした。

UISliderに対してsetThumbImage:forStateで画像を設定すればよいだけだと思います。
(Appleのリファレンス)
https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UISlider_Class/index.html#//apple_ref/occ/instm/UISlider/setThumbImage:forState:

具体的な使用方法はObjective-Cのサンプルコードになりますが
http://lab.dolice.net/blog/2013/07/06/objc-ui-slider-thumb-image/
が参考になると思います。
Swiftのサンプルなら、英語になりますが
http://www.alexanderbatalov.com/journal/2015/2/20/how-to-implement-custom-uislider-in-swift
が参考になると思います。

投稿2016/02/29 05:35

TakeOne

総合スコア6299

chu_xxx_lip

2016/02/29 07:02 編集

ありがとうございます???? UIViewSliderというクラスはUIKitにはないと思いますが、本来UISliderを継承すべきところを誤ってUIViewSliderと記述してエラーになったということじゃないでしょうか? エラーになったというのはどんなエラーメッセージが出たんですか? ???? UISliderの間違いですね、すみません。 UISliderだと、３つのエラーが出ます。画像追加しました。 [エラー内容](https://gyazo.com/aaa420b13746b80902bdaa750a70fa40) UIViewControllerを継承するクラスをUIViewSlider(UISlider?)に指定することは当然できませんが、 StoryboardのUIViewControllerに指定するか、コードで生成するかいずれかしないと勝手に使用されることはないと思います。 StoryboardのUIViewControllerにUCSliderを指定しているんじゃないですか? ????確認したところ、 https://gyazo.com/406867cf3a0537b0964d5ce612b9327e ここの黄色い丸の中に、白い四角のマーク[Slider]に指定されていました。これって何なのでしょうか？StoryboardのUIViewControllerでしょうか？素人ですみません。無意識に作っていました。真ん中のに配置している、UISliderにはクラス指定していません。先に、IBで配置した後にクラスでスタイルを変更することは可能でしょうか？「クラスでスタイルを変更する」というのは、たぶん「クラス内に記述したコードでスタイルを変更する」という意味なのだと思いますが ????はい、そうです。 Storyboardに配置したUIImageViewにコードで画像イメージを設定するのと同じレベルです。 ????リンクありがとうございます。参考にして、 self.setThumbImage(UIImage(named: "triangle")!, forState: .Normal)と追記しましたら、 Value of type 'UCSlider' has no member ‘setThumbImage’ というエラーが出ました。

TakeOne

2016/02/29 08:23 編集

> UISliderだと、３つのエラーが出ます。 UISlider(=UIViewを継承したクラス)とUIViewControllerの違いがわかってないのでしょうか? viewDidLoadはUIViewControllerから引き継がれるメソッドですから、UCSliderをUISliderのサブクラスに変更したら`override fun viewDidLoad()`がエラーになるのは当たり前です。このエラーの意味がわからないようなら、UIViewControllerやUIViewについて入門書を読んで1から勉強し直した方がよいと思います。 > ここの黄色い丸の中に、白い四角のマーク[Slider]に指定されていました。 > これって何なのでしょうか？StoryboardのUIViewControllerでしょうか？素人ですみません。そうです。StoryboardのUIViewControllerです。そこにUCSliderを指定しているからUCSliderのviewDidLoadが動作したのです。本来そんなことするつもりじゃなかったんでしょうからその設定は削除してください。削除したら、黄色い丸の白い四角マークの表示は[View Controller]に戻ると思います。 > self.setThumbImage(UIImage(named: "triangle")!, forState: .Normal)と追記しましたら、 > Value of type 'UCSlider' has no member ‘setThumbImage’ > > というエラーが出ました。 UCSliderをUISliderから継承するように修正したら、viewDidLoadのメソッド定義を全部削除し、その代わりに`awakeFromNib()`を追加して、その中にsetThumbImageを記述すればいいです。 override func awakeFromNib() { self.setThumbImage(UIImage(named: "triangle")!, forState: .Normal) } そして、StoryboardのUISliderのクラスをUCSliderに設定してください。それでビルドして実行したら、つまみのイメージがカスタマイズされたスライダーが表示されると思います。 --- エラーの状況を画像付きで詳しく説明してくれるので、何が誤っているのか回答者はアドバイスしやすいのですが、簡単なところでつまずいているので、とりあえず見よう見まねで動くことを経験したら、そこで入門書を見直して、やっていることの意味をおさらいすることをお勧めします。意味がわかっていれば簡単なところでつまずくことが減り、スムーズに進めやすくなるとおもいます。

chu_xxx_lip

2016/03/01 08:51

>UISlider(=UIViewを継承したクラス)とUIViewControllerの違いがわかってないのでしょうか? viewDidLoadはUIViewControllerから引き継がれるメソッドですから、UCSliderをUISliderのサブクラスに変更したら`override fun viewDidLoad()`がエラーになるのは当たり前です。このエラーの意味がわからないようなら、UIViewControllerやUIViewについて入門書を読んで1から勉強し直した方がよいと思います。教えてもらったアップル開発者サイトで確認し直しました。遡ると、NSObjectが一番親でしょうか？その次が、UIResponder。その下に、UIViewとUIViewControllerがあります。 UIViewは部品として使っているのでわかるのですが、UIViewControllerは新規ファイルを使う特に、選んでいるやつという認識しかありません。 import UIKitやimport Foundationもわからないまま使っています。 http://www.amazon.co.jp/Swift%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BUI%E8%A8%AD%E8%A8%88-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E3%80%8C%E6%93%8D%E4%BD%9C%E6%80%A7%E3%80%8D%E3%81%A8%E3%80%8C%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%80%A7%E3%80%8D%E3%82%92%E5%85%BC%E3%81%AD%E5%82%99%E3%81%88%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E9%96%8B%E7%99%BA%E6%89%8B%E6%B3%95-%E6%9F%B4%E7%94%B0-%E6%96%87%E5%BD%A6/dp/479813578X 参考書はこれを購入したのですが、不適切でしたかね？その辺りのことが書かれておらず、プロパティも簡単にしか載っていませんでした。オススメあれば教えてください。どうやって勉強しましたか？ >UCSliderをUISliderから継承するように修正したら、 viewDidLoadのメソッド定義を全部削除し、その代わりに`awakeFromNib()`を追加して、その中にsetThumbImageを記述すればいいです。 override func awakeFromNib() { self.setThumbImage(UIImage(named: "triangle")!, forState: .Normal) } そして、StoryboardのUISliderのクラスをUCSliderに設定してください。それでビルドして実行したら、つまみのイメージがカスタマイズされたスライダーが表示されると思います。説明不足にもかかわらず、状況を正確に判断してくださり、優しく指導いただき感謝感激です。言われた通りにやってみました。そうすると、EXC_BAD_INSTRUCTION (code=EXC_i386_INVOP, subcode=0x0) というエラーが出てクラッシュしてしまいます。 GUIの方の何かが原因でしょうか？現在のコード貼っておきます。 import UIKit @IBDesignable class UCSlider: UISlider{ // override func viewDidLoad() { // // //スライダ作成 // let mySlider = UISlider(frame: CGRectMake(0, 0, 200, 30)) // // mySlider.layer.position = CGPointMake(self.view.frame.midX, 100) // // mySlider.backgroundColor = UIColor.whiteColor() // // mySlider.minimumValue = 0 // // mySlider.maximumValue = 1 // // mySlider.value = 0.5 // // mySlider.maximumTrackTintColor = UIColor.greenColor() // // Sliderの現在位置より右のTintカラーを変える. // mySlider.minimumTrackTintColor = UIColor.blackColor() // // mySlider.addTarget(self, action: "onChangeValueMySlider:", forControlEvents: UIControlEvents.ValueChanged) // // self.view.addSubview(mySlider) override func awakeFromNib() { self.setThumbImage(UIImage(named: "triangle")!, forState: .Normal) } } ─────────────────────── よろしくおねがいします????

chu_xxx_lip

2016/03/01 09:11

考えられる原因＊引数が間違っている。＊アウトレットの接続ミス/アウトレット変数の名前を間違えた＊viewDidLoadがUIViewの初期化前の起動時に呼び出されており、nilのメソッド呼び出しをしようとしていた不要なコードは消したのですが、エラーが消えてくません。。下記を参考にしました Swiftのお勉強にUICatalogをまねぶ 2(UIActivityIndicatorView) | とのログ: http://tono-n-chi.com/blog/2014/06/swift-uicatalog-copy-2/ ちょっと、やったこと/思うこと: iPhoneアプリのデバッグ中にEXC_BAD_INSTRUCTIONで落ちて困った: http://hanagurotanuki.blogspot.jp/2009/07/iphoneexcbadinstruction.html iPhone SDK APP STORE公開までのアプリ開発まとめ。遥か遠い環境設定と開発の道。: http://iphone-howto.blogspot.jp/2009/02/blog-post.html

TakeOne

2016/03/01 14:05 編集

> 参考書はこれを購入したのですが、不適切でしたかね？その本は読んだことないのでちゃんとアドバイスできませんが、本のタイトルから、少し応用テクニックっぽいところまで踏み込んでいるような印象を受けました。そういう応用的なものの前に、もっと基礎的な土台のところ(オブジェクト志向の考え方やSwiftの言語仕様等)を丁寧に解説しているものを一度ちゃんと読んだ方が良さそうな気はしました。 > そうすると、EXC_BAD_INSTRUCTION (code=EXC_i386_INVOP, subcode=0x0) というエラーが出てクラッシュしてしまいます。 EXC_BAD_INSTRUCTIONというのは、実行中にエラーが発生したら大抵このメッセージが表示される(単にエラーが発生したと言っている程度の意味しかない)ので、このメッセージだけで原因を探すのは難しいです。このエラーが発生した時に、Outputウィンドウにもっと詳しいエラーメッセージが出ていませんでしたか? それが出ていれば原因を特定しやすいと思います。また実際のエラー画像を貼り付けてくれたら、どこでエラーが出たかもわかるのでアドバイスしやすいと思います。とはいえ、別件の質問の https://teratail.com/questions/28599 のコードを見ると、UCSliderというクラスを作らないで、UISliderのmySlider02にsetThumbImageすることでつまみ部分の画像を変更する処理はできていると思うので、元々やりたかったことは、もう達成できているんじゃないですか? それはできているけど、UCSliderクラスを作る方法がなぜエラーになってしまうのかをここでちゃんと追求しておきたいということなら、エラー画像等の追加情報を頂ければ、またわかることをアドバイスします。

chu_xxx_lip

2016/03/03 03:03

ありがとうございます！クラスではありませんが画像が表示できましたのでベストアンサーにさせてもらいました???? 一番のやりたいことは、 ”先に、IBで配置した後にクラスでスタイルを変更することは可能でしょうか？場所の指定が難しいので、先にIBで配置したいです。” なので、クラス指定できるようにしたいです。 fatal error: unexpectedly found nil while unwrapping an Optional value (lldb) こちらが実際の画像です！ https://gyazo.com/7ae70352d147540d8277d9658dacb119

TakeOne

2016/03/03 04:19

画像を見ました。その行で"unexpectedly found nil while unwrapping an Optional value"のエラーが出て停止したということなら、UIImage(named: "triangle")がnilとなり、「!」でnilをアンラップしようとしてエラーになった。つまり"triangle.png"という画像ファイルが読み込めなかったということだと思います。ファイル名が正しいか、正しければそのファイルがプロジェクトおよびターゲットに追加されているか確認してみてください。

行動規範の内容に同意します