スライダーノブの「座標のポイント」はどこにあるべきですか？
私は 生徒向けのツールを作成しました なので、彼らは音楽を遅くして自分のテンポでそれを学ぶことができます。
ツールにはいくつかのノブがあり、そのうち3つは「ループ」機能と相互作用します。アイデアは、ループの開始と終了を区切る2つのノブと、ループ範囲に到達したときに再配置（戻る）するプレーヤーの位置を持つことです。
私の質問は次のとおりです。ノブの形の「座標のポイント」はどこにあるべきですか？
たとえば、下の画像では、ノブの「中央」をポイントとして距離を測定するために使用しました。これにより、ノブが互いに重なり合い、タッチ領域が減少します。
「座標のポイント」が互いに対して各ノブの内側になる場合、再生ノブをどこに配置すればよいですか？
実世界には、選択と測定ツールの優れた例であるキャリパーがあります。あなたは接近したアプローチを使うことができ、それはあなたの問題を解決するようです。時間表示は使いやすさを向上させ、大きなコントロールはタッチターゲットとして適しています。スワイプ中に、これらを表示するには、コントロールの上に数字を表示する必要があります。
。
[〜＃〜]更新[〜＃〜]
Jonas Dralleが示唆したように、2つのバーは必要ありません。そして、アライメントに関するアンドリュー・マーティンの提案も説明されました。
少し前に似たようなものを実装しました。私にとって最も効果的なのは、ノブの内側のエッジを範囲を定義するための座標と見なすことでした。
このアプローチの問題は、範囲全体を選択できなくなったことです。
私は、追跡バーの側面に偽の視覚的パディングを追加することで解決しました。これらの領域はバーと同じように色付けされていたので、気付かないでしょう。
次に、2つのノブの間に現在の時間を縦線で表示できます。
このトリックにより、コンポーネントの境界内に寛大な相互作用ゾーンを定義することができました。ノブ全体が実際にはドラッグゾーンです。
iMovieはこれを非常にうまく処理します。タイムラインで2つの別々の「サム」を使用する代わりに、両端がドラッグ可能な単純なボックスを使用します。
以下の理由により、ボックスは優れた選択です。1.ボックスの左側と右側は、水平方向のスペースをとらない垂直線であるため、「座標のポイント」は暗黙的です。 2.ボックスの上部と下部は、ループの範囲を明確に示しています。
「再生ヘッド」の現在の位置は、上部にドラッグ可能な三角形が付いた別個の垂直線で示されます。再生/一時停止用、および再生ヘッドをループの開始または終了に移動するための個別のボタンが用意されています。
ループの開始と終了を移動するには、ボックスの端をドラッグするだけです。
ここでのいい点は、ボックスの開始側をボックスの終了側の右側に実際にドラッグすると、新しい終了になる（またはその逆になる）ことです。ユーザーは常に開始点を右に（現在の終了点を越えて）ドラッグすることができ、新しい開始点（前の終了点）は前に中断したところから正確に開始することがわかっているので、これはユーザーが作品を進めるのに最適な方法です。 ！
だから答えは：
水平方向の幅のため、タイムラインと重なる「ノブ」を持つスライダーは使用しないでください。代わりに、iMovieの選択ボックスの側面など、ドラッグ可能な垂直線で位置を示します。
ループの開始と終了のコントロール「スライダー」を参照します。これらは、似ているが異なる機能を実行するためです。
- スライダーは似ているが異なる形状を与える
それらの間の時間はそれらの外側の時間よりも重要であるため（再生時間マーカーは内側になるため）：
- 再生される部分よりも再生されないタイムラインの閉塞部分を優先します（必要な場合）
...そしてこれらの非対称スライダーは、内側の端でタイムラインをカバーしなくなるので、
- ループスライダーの内側の端は、それらの時間基準点である必要があります。
もう少し進んで...
再生時間マーカーの場合、ループの開始マーカーと停止マーカーがなくても、タイムラインを隠さないようにする（マーカーがタイムラインの開始と終了を示すために、正確さのためだけに許可する）のが最善ですが、ループの開始と停止のためスライダーを仕上げるのは、努力する価値があるので、次のようにします。
- タイムライン上にゼロまたはゼロに近い幅（ライン幅）の再生時間マーカーを配置します...上または下に残します
したがって、次のようになります。
v
----]---|-----[---
座標のポイントは、提案する長方形のノブの中心にある必要があります。特定のポイントを選択し、ループプロセス（再生中）を確認するには、精度が必要です。そして、これがこれらのノブがループ機能に対して正しく機能しない理由です。
同じアクションを実行できるが、それらが示している位置に干渉しないある種のノブは、良い解決策です。あなたができる方法に似たもの select text Android：
この例では、ノブが配置されており、選択の開始位置と終了位置を示しています。しかし、これは単なる「特別」なものです。私が考えているのは、ユーザーが結果を取得する場所の外でユーザーが操作するUIを維持することです。
ノブがプレーヤーの上にあることを意図している場合は、プレーヤーのノブに干渉しないように、少なくともそれらを最小限に保ちます。また、正確なポイントを簡単に示す形状（ポイントが中央または側面にあると解釈できる長方形ではなく）
座標を中心に保つ
はい！あなたは絶対にノブの中心を座標にする必要があります。実際には、ノブ自体ではなく、ノブが移動できるパスを変更したい！
ノブが移動する経路をノブの幅の半分だけ右に移動する（おそらくx-posに追加することによって）、ノブ全体の幅をノブの長さから差し引くそれ以外の場合は移動します（おそらくノブx軸の長さから差し引かれます）。 ここで行うことは、ノブの移動経路の両端からノブの幅の半分を削り取ることです！これにより、移動経路が重ならず、スペースの全量を使用します：
これは、デュアルノブのシナリオにも適用されます。各ノブの移動経路が交差する代わりに、それらは代わりに他のノブの手前で停止します。
この例では、エンドツーエンドの移動経路がはるかに簡単にわかります。
これがすべて理にかなっているといいのですが、今日の初めにユーザーディレクトリを削除しました。
スライドルールカーソルのように垂直線でノブを透明にしない限り、仮想ノブの中央に「参照ポイント」を配置しないでください。
...またはOvidiuが示唆するように、それらを括弧のように扱います。
Audacityの直感的な例を参照してください。