質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

2回答

4508閲覧

scrollbarを常に表示したい

shou-w

総合スコア13

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2020/07/31 09:17

UIScrollView を使用すると、スクロール時のみ scrollbar(scrollIndicator)が表示されます。
しかし、ユーザにスクロールが可能であることを示すためにも、スクロール時だけでなく常時表示したいと考えています。いろいろ調べてはいるのですが解決方法が見つかりません。そもそも可能かどうかもわかっていません。
ご存じの方いらっしゃいましたらよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

※もっと最適な回答があったら申し訳ありません。

公式ドキュメントを確認しても、やはり**「常に表示する」**という設定は見つけられませんでした。
UIScrollViewドキュメント

なので、以下の案(参考サイト含めて)を共有させて頂きます。
既に質問者様の方で確認済みだったり、上手く動かなかったらスルーしてください。


案1:Viewを表示した瞬間に、「flashScrollIndicators」で一時的にスクロールバーを表示する

**「常に表示」**とは違うので回答になってないですが、公式にもメソッドが用意されているので簡単に実装可能。
※手持ちのiPhoneだと、設定画面がこちらの様な動きになってました。

Swift

1〜省略〜 2// スクロールView定義 3@IBOutlet weak var scrollView: UIScrollView! 4 5override func viewDidLoad() { 6 super.viewDidLoad() 7} 8 9override func viewDidAppear(_ animated: Bool) { 10 super.viewDidAppear(animated) 11 12 // View表示と同時に、一時的にスクロールバー表示 13 scrollView.flashScrollIndicators() 14} 15〜省略〜

↓表示例(起動直後に一瞬だけスクロールバーが表示される)
flashScrollIndicators

案2:案1の処理を、タイマーで定期的に呼び出す

以下参考サイトに記載されている様に、タイマーで呼び出せば「常に表示」に似た動きは可能そうです。
※見た目とか処理的に、個人的に微妙な感じがしております。
How to make scrollbar of TextView always visible in Swift

案3:スクロールバーと同じサイズのViewを独自に追加する

Viewを独自に追加して、スクロールバーのFrameと同期させて「常に表示」っぽい見た目にする。
※無理矢理感があるのと、検証も不十分なので利用する場合は自己責任でお願いいたします。。

Swift

1import UIKit 2 3// UIScrollViewのDelegateを追加しておく 4class ViewController: UIViewController, UIScrollViewDelegate { 5 6 @IBOutlet weak var scrollView: UIScrollView! // スクロールView 7 private var scrollBar: UIView = UIView() // 独自に追加するスクロールバー 8 private let SCROLLBAR_TAG = 999 // スクロールバー判定用のタグ(適当な値) 9 10 11 override func viewDidLoad() { 12 super.viewDidLoad() 13 } 14 15 16 override func viewDidAppear(_ animated: Bool) { 17 super.viewDidAppear(animated) 18 19 // スクロールViewのコンテンツサイズ、背景色設定 20 scrollView.contentSize = CGSize(width: self.view.bounds.width, 21 height: self.view.bounds.height * 4) 22 scrollView.backgroundColor = .cyan 23 24 // スクロールバーの一時表示設定 25 scrollView.flashScrollIndicators() 26 27 // スクロールViewのDelegate設定 28 scrollView.delegate = self 29 30 // 常に表示するためのスクロールバー(UIView)を、SubViewとして追加 31 for subView in scrollView.subviews { 32 scrollBar = UIView(frame: subView.frame) 33 scrollBar.backgroundColor = .lightGray 34 scrollBar.tag = SCROLLBAR_TAG 35 scrollView.insertSubview(scrollBar, at: 0) 36 } 37 } 38 39 40 func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { 41 print(#function) 42 // スクロールを開始しようとした時に、追加したスクロールバーを非表示 43 scrollBar.isHidden = true 44 } 45 46 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { 47 print(#function) 48 49 // スクロール動作が減速し始めた時に、追加したスクロールバーのFrameを更新し、再度表示する 50 for v in scrollView.subviews { 51 if v.tag != SCROLLBAR_TAG { 52 scrollBar.frame = v.frame 53 } 54 } 55 scrollBar.isHidden = false 56 } 57}

↓表示例(スクロールバーが常に表示されている様に見える)
サンプル

投稿2020/08/01 13:36

編集2020/08/01 13:39
tsuki01

総合スコア1751

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsuki01

2020/08/01 13:37

すみません、ページ更新しなかったので回答被りました。。
shou-w

2020/08/01 14:05

複数の案を出して頂きありがとうございます。 動作検証まで添付して頂き大変わかりやすかったです。 参考になりました。ありがとうございます。
guest

0

常時表示というのは、iOS のデザインガイド的観点からも適切では無いという議論を見たことがあるので難しいかと思います(技術的には可能かもしれません)。

回答を参考にガイドラインの該当しそうな場所を見てみましたが、明確に常時表示を禁止しているような記述は見当たらなかったので、もしかしたら現状は異なっている可能性もあります。

一方、

を使えば、任意のタイミングで Scroll Indicator を一時表示させることは可能なようですので、必要なタイミングで表示させるのが一つかと思います。

投稿2020/08/01 13:36

TsukubaDepot

総合スコア5086

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shou-w

2020/08/01 14:12 編集

なるほど、常にではないけど必要なタイミングで呼び出すことでスクロールが可能なことをユーザに認識してもらうということですね。リンクも添付してあってわかりやすかったです。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問