ボタン上のオーバーフローテキストをスクロールする簡単な方法は?
-
02-07-2019 - |
質問
ボタンコントロールで表示するには長すぎるテキストのスクロールに関する情報を見つける可能性のある例やリソースはありますか?私はこれらの線に沿って何かを考えています。
- オーバーフローを示すために、末尾に「...」を付けて、現在の四角形に収まるだけのテキストを表示します。
- たとえば1秒間一時停止してから、テキストを右端までゆっくりとスクロールし、文字列の右側の部分を表示します。
- 現在の四角形に収まるだけのテキストを表示し、先頭に「...」を付けてオーバーフローを示します。
- すべてを逆にやり直します。
" core"を使用してこれを行う簡単な方法はありますか?または組み込みの「アニメーション」特定のモバイルデバイス上のフレームワーク?
[編集] 人々が私が成し遂げようとしていることが適切であるかどうかに人々がより集中していると思うので、いくつかの詳細を追加したかった。このボタンは、トリビアゲームの回答用です。特定のUI機能は実行されませんが、答えを表示するためのものです。 Apple自身がiPod NanoのiQuizトリビアゲームでこれを行っており、ボタンの幅よりも長い回答に対する非常にエレガントなソリューションだと思います。
「...」がこれの難しい部分である場合。この要件を削除したとしましょう。ボタンのラベルをフルサイズにすることができますが、ボタンのクライアント四角形にクリップし、いくつかのアニメーションメソッドを使用してクリップ四角形内でスクロールできますか?これにより、楕円を除いたほぼ同じ効果が得られます。
解決
アイデアは次のとおりです。楕円(...)の代わりに、両側にグラデーションを使用して、余分なテキストが背景色にフェードアウトするようにします。次に、3つのCALayersでこれを実行できます。1つはテキスト用で、2つはフェード効果用です。
フェードマスクは、透明から背景色に変化するグラデーションを備えた長方形になります。テキストレイヤーの上に配置する必要があります。テキストはテキストレイヤーに描画され、その後、記述した方法でテキストを前後にスライドさせてアニメーション化します。パスを記述するCGPathオブジェクトを作成し、テキストレイヤーに追加するCAKeyframeAnimationオブジェクトに追加できます。
これが「簡単」だと思うかどうかCore Animationをどれだけよく知っているかに依存しますが、APIを学ぶと、これはそれほど悪くなく、トラブルに見合う価値があると思います。
他のヒント
鈍角になりたくない場合は、問題を再考する必要があります。ボタンには明確で予測可能な機能が必要です。テキストを保存および表示する場所ではありません。おそらく、下に素敵な標準ボタンを備えた説明を画面に表示できますか?
ソースコードの例で更新:
ソースコードの例を使用する準備ができているサンプルがいくつかあります(実際には、イメージを含む完全なzip形式のXcodeプロジェクトおよびnibファイルといくつかのソースコード)、iPhone用ではなく、Core Animationを使用せず、単純なNSImageとNSImageViewをいくつか使用するだけです。それは単に安いハックであり、あなたが要求したすべての機能を実装していません(申し訳ありませんが、あなたのためにソースコードを書く気はありません:-P)、恐ろしいコードレイアウト(ちょっと、私はこれを一緒にハックしました数分ですので、これ以上期待することはできません;-))そして、これは単にこれを行う方法のデモンストレーションです。 Core Animationでも実行できますが、このアプローチは簡単です。 NSImageViewにボタンアニメーションを作成することは、NSViewをサブクラス化してそのコンテキストに直接ペイントするほど優れていませんが、はるかに単純です(可能な限り単純なソリューションを一緒にハックしたかっただけです)。また、一度右にスクロールすると、スクロールバックしません。そのため、ドットを左に描いてから2秒後に起動する別のNSTimerをスクロールバックして起動する別のメソッドが必要です。
Xcodeでプロジェクトを開いて、実行をクリックするだけで完了です。次に、ソースコードを見てください。それほど複雑ではありません(ただし、最初に再フォーマットする必要があるかもしれませんが、レイアウトが悪いです)。
私の回答へのコメントのために更新:
Apple UI要素をまったく使用しない場合、問題は見当たりません。その場合、ボタンはボタンではなく、クリック可能なビュー(Cocoaを使用している場合はNSView)です。 NSViewをMyAnswerViewとしてサブクラス化し、paintメソッドを上書きして、必要に応じてビューにペイントできます。複数行テキスト、スクロールテキスト、3Dテキストアニメーション、完全に想像力次第です。
これは例。NSViewをサブクラス化して、デフォルトでは存在しない完全なカスタムコントロールを作成する方法を示します。コントロールは次のようになります。
左上隅に面白いものがありますか?それはコントロールです。仕組みは次のとおりです。
それはあなたの質問に対する答えではないので、言いたくありませんが、「それをしないでください!」。 Appleは、ユーザーインターフェイスの実装方法に関するガイドラインを持っています。それらを自由に無視できますが、Appleユーザーはこれらのガイドラインに従うUIを使用することに慣れており、これらのガイドラインに従わないと、Appleユーザーがthatくて魅力のないアプリケーションを作成します。
そこから引用させてください
プッシュボタンの内容とラベル
プッシュボタンには常にテキストが含まれます。 画像が含まれていません。必要なら アイコンまたは他の画像を表示する ボタン、代わりにベベルボタンを使用し、 “「ベベルボタン」で説明しています。”
プッシュボタンのラベルは を説明する動詞または動詞句 実行するアクション—保存、閉じる、印刷、 削除、パスワードの変更など。もし プッシュボタンは単一の 設定、ボタンにラベルを付ける 特に可能な限り; “選択 写真…、”たとえば、もっと “選択…”ボタンだから すぐにアクションを開始します “今&”を使用する必要はありません (たとえば、今すぐスキャン)ラベル。
プッシュボタンラベルには タイトルスタイルの大文字化 “で説明されている インターフェースエレメントラボ
UILineBreakModeではなく、標準APIを使用してこれを実行できないことを確認してください。さらに、スタイルガイドには、ボタンが押されたときに詳細情報を要求することを示す省略記号が示されています。たとえば、[ファイルを開く...]はファイルの名前を要求します。省略記号の使用の提案は、このガイドラインに違反しています。
説明した動作を実装するには、カスタムロジックが必要ですが、とにかくそうする方法だとは思いません。
これはUIの優れたプラクティスではありませんが、それでも実行したい場合は、ボタンのようにスタイル設定されたクリック可能なdivを介して実行することをお勧めします。
divの幅を明示的な値に設定し、オーバーフローを非表示に設定してから、間隔で実行するスクリプトを使用して、このdivのscrollLeftプロパティを調整します。