2

ボタンコントロールに表示するには長すぎるテキストのスクロールに関する情報を見つける可能性のある例やリソースはありますか?私はこれらの線に沿って何かを考えています。

  • オーバーフローを示すために、末尾に「...」を付けて、現在の四角形に収まるだけのテキストを表示します。
  • たとえば1秒間一時停止してから、テキストをゆっくりと右端までスクロールして、文字列の右側の部分を表示します。
  • オーバーフローを示すために、先頭に「...」を付けて、現在の四角形に収まるだけのテキストを表示します。
  • すべてを逆にやり直します。

特定のモバイルデバイスで「コア」または組み込みの「アニメーション」フレームワークを使用してこれを行う簡単な方法はありますか?

[編集]人々は私が達成しようとしていることが適切かどうかにもっと焦点を合わせていると思うので、もう少し詳細を追加したいと思いました。ボタンは雑学クイズゲームの答えのためのものです。特定のUI機能は実行しませんが、回答を表示するためのものです。Apple自身がiPodNanoのiQuizトリビアゲームでこれを行っており、ボタンの幅よりも長い答えに対する非常にエレガントなソリューションだと思います。

その「...」の場合、これは難しい部分です。この要件を削除したとしましょう。ボタンのラベルをフルサイズにして、ボタンのクライアントrectにクリップし、いくつかのアニメーションメソッドを使用してクリッピングrect内でスクロールすることはできますか?これにより、楕円を除いたほぼ同じ効果が得られます。

4

5 に答える 5

2

鈍感になりたくなければ、問題を再考する必要があるかもしれません。ボタンには、明確で予測可能な機能が必要です。テキストを保存して表示する場所ではありません。画面に説明を表示し、その下に標準的なボタンを配置することはできますか?

于 2008-09-29T01:41:22.317 に答える
2

ソースコードの例で更新:

すぐに使用できるソース コードの例を次に示します。(実際には、画像とnibファイルといくつかのソースコードを含む完全に圧縮されたXcodeプロジェクト)、iPhone用ではなく、Core Animationを使用せず、いくつかの単純なNSImageとNSImageViewを使用するだけです. それはただの安っぽいハックであり、あなたが要求した機能をすべて実装していません (申し訳ありませんが、あなたのためにソース コードを書く気はありません :-P)、恐ろしいコード レイアウト (ねえ、私はこれを数分かかるので、これ以上の効果は期待できません ;-)) これは、これがどのように行われるかのデモンストレーションにすぎません。コア アニメーションでも実行できますが、このアプローチの方が簡単です。ボタン アニメーションを NSImageView に構成するのは、NSView をサブクラス化してそのコンテキストに直接描画するほど良くはありませんが、はるかに簡単です (可能な限り単純なソリューションをハックしたかっただけです)。また、右端までスクロールすると、元に戻ることはありません。そのため、左にドットを描いてから 2 秒後に起動する別の NSTimer をスクロールして開始する別の方法が必要です。

Xcode でプロジェクトを開き、実行をクリックするだけです。次に、ソースコードを見てください。実際にはそれほど複雑ではありません (ただし、最初に再フォーマットする必要がある場合があります。レイアウトは最悪です)。


私の答えへのコメントのために更新:

Apple UI 要素をまったく使用しない場合、問題は見当たりません。その場合、ボタンはボタンではなく、クリック可能なビュー (Cocoa を使用している場合は NSView) です。NSView を MyAnswerView としてサブクラス化し、ペイント メソッドを上書きして、必要に応じてビューにペイントすることができます。マルチライン テキスト、スクロール テキスト、アニメーション化された 3D テキストなど、完全にあなたの想像力次第です。

これは例です。誰かが NSView をサブクラス化して、デフォルトでは存在しない完全なカスタム コントロールを作成する方法を示しています。コントロールは次のようになります。

代替テキスト

左上隅に面白いものが見えますか? それがコントロールです。仕組みは次のとおりです。

代替テキスト


それはあなたの質問に対する答えではないので言いたくないのですが、「そうしないでください!」。Apple には、ユーザー インターフェイスの実装方法に関するガイドラインがあります。それらを無視することは自由ですが、Apple ユーザーはこれらのガイドラインに従って UI を使用することに慣れており、それらに従わないと、Apple ユーザーが見苦しく魅力的でないと感じるアプリケーションが作成されます。

Apple のヒューマン インターフェイス ガイドラインは次のとおりです。

そこから引用させてください

押しボタンの内容とラベル

プッシュ ボタンには常にテキストが含まれ、画像は含まれません。ボタンにアイコンやその他の画像を表示する必要がある場合は、「ベベル ボタン」で説明されているように、代わりにベベル ボタンを使用してください。</p>

プッシュ ボタンのラベルは、実行するアクション (保存、閉じる、印刷、削除、パスワードの変更など) を説明する動詞または動詞句にする必要があります。プッシュ ボタンが 1 つの設定で機能する場合は、ボタンにできるだけ具体的なラベルを付けます。たとえば、「Choose Picture…」は「Choose…」よりも役に立ちます。ボタンはすぐにアクションを開始するため、ラベルに「now」(たとえば、Scan Now)を使用する必要はありません。

「インターフェイス要素のラベルとテキストの大文字化」で説明されているように、プッシュ ボタンのラベルにはタイトル スタイルの大文字化が必要です。プッシュ ボタンがすぐに別のウィンドウ、ダイアログ、またはアプリケーションを開いてアクションを実行する場合は、ラベルに省略記号を使用できます。たとえば、図 15-8 に示すように、[メール] 設定では、.Mac システム設定を開くため、省略記号を含むプッシュ ボタンが表示されます。

ボタンには、トリビア ゲームの答えではなく、1 つの動詞または動詞句を含める必要があります。2 ~ 5 個の回答がある場合は、ラジオ ボタンを使用してユーザーに回答を選択させ、[OK] ボタンを使用してユーザーに回答を受け入れさせる必要があります。5つ以上の回答については、ガイドラインに従って代わりにポップアップセレクターを検討する必要がありますが、この場合はかなり醜いと思います.

回答が非常に長く、分割する必要がある場合は、回答ごとに 1 つの列、1 つの行、および各セルが複数行のテーブルを使用することを検討できます。したがって、ユーザーはテーブルの行をクリックして選択します。これにより、テーブルのセルが強調表示され、[OK] ボタンをクリックして終了します。または、ユーザーが表のセルを選択するとすぐに、直接続行することもできます (ただし、この方法では、ユーザーが偶発的なクリックを修正する機会を利用できます)。一方、MacOS X では、複数行のセルを含むテーブルはかなりまれです。iPhone ではいくつか使用されますが、通常はテキストがほとんどありません (最大で 2 行)。

于 2008-09-29T10:36:57.130 に答える
2

ここにアイデアがあります: 楕円 (...) の代わりに、両側にグラデーションを使用して、余分なテキストが背景色にフェードアウトするようにします。次に、3 つの CALayer を使用してこれを行うことができます。1 つはテキスト用、2 つはフェード効果用です。

フェード マスクは、透明から背景色へのグラデーションを持つ四角形になります。テキストレイヤーの上に配置する必要があります。テキストはテキストレイヤーに描画され、説明した方法で前後にスライドしてアニメーション化するだけです. パスを記述する CGPath オブジェクトを作成し、テキスト レイヤーに追加する CAKeyframeAnimation オブジェクトに追加できます。

これが「簡単」だと思うかどうかは、Core Animation をどれだけ知っているかによって異なりますが、API を習得すれば、それほど悪くなく、苦労する価値があることがわかると思います。

于 2008-10-01T04:18:54.077 に答える
0

標準APIを使用してそれを行うことはできません.UILineBreakModeを使用することはできません. さらに、スタイル ガイドによると、省略記号は、ボタンを押すと詳細情報の入力を求められることを示しています。提案された省略記号の使用は、このガイドラインに違反しています。

あなたが説明した動作を実装するには、いくつかのカスタム ロジックが必要ですが、とにかくそれが道だとは思いません。

于 2008-09-29T01:38:05.087 に答える
0

これはあまり良い UI プラクティスではありませんが、それでもやりたい場合は、ボタンのようにスタイルされたクリック可能な div を介して行うのが最善の策です。

div の幅を明示的な値に設定し、オーバーフローを非表示に設定してから、一定間隔で実行するスクリプトを使用して、この div の scrollLeft プロパティを調整します。

于 2008-09-29T01:43:13.390 に答える