web-dev-qa-db-ja.com

iOSの部分ページコンテンツに適したスクロールヒントは何ですか？

私は、画面の下半分（横長の右半分）がアプリの「ライブ」部分であるエクササイズアプリを開発しています。これは、各運動の経過時間を示すドーナツグラフとカウンターと共にタイマーを実行します。上半分（または横長の左半分）は指示を示します。

同様の質問を探していても、次のように画面の一部のみを占めるスクロール可能なコンテンツ（テーブルビュー）がある場合には適していないと思われます。

app screenshot

この場合、テキスト方向のセクション[〜＃〜] c [〜＃〜]は表示されません。私が読んだいくつかの解決策は次のとおりです。

  1. スクロールバーを「点滅」させる（通常はページのロード時）。それは信頼できないようです。その人がそのときに注意を払っていない場合はどうなりますか？また、複数の演習があるため、これは何度も繰り返す必要があります。
  2. 下にあるドットの列（ホーム画面でアプリページが提案される方法に似ています。これは、間違った軸に沿って線形であるため、私が望んでいることとはまったく異なります。また、離散的なビューの場合はさらに多くなります。
  3. 矢印。通常は上下ですが、不動産を放棄するのは嫌です。したがって、おそらく次のようなものです：

suggest solution using arrows

好奇心から私は＃1を試しました、そして私が疑ったように、それは不十分です。また、垂直スクロールバーを恒久的にオンにしようとしてもうまくいきませんでした（とにかくそれを望んでいるわけではありません）。

矢印の使用は簡単に実装できるようで、私はこれに不慣れです。しかし、私は観察と提案を受け入れます。ありがとうございました。

更新：参考までに、私は下部にフェードアウトを実装することを選択しました。これにはいくつかの方法がありますが、iOS 8.0以降を対象とするアプリの場合、これが最も効果的でした。マスクのサイズや位置を変更する必要がありません！

// Add gradient mask to view
func AddGradientMask(targetView: UIView)
{
    let gradientMask = CAGradientLayer()

    gradientMask.frame = targetView.bounds
    gradientMask.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor]
    gradientMask.locations = [0.8, 1.0]

    let maskView: UIView = UIView()
    maskView.layer.addSublayer(gradientMask)

    targetView.maskView = maskView 
}

私の場合、ユーザーがスクロールを開始したらマスクを削除します。これは以下で行われます：

    func scrollViewWillBeginDragging(scrollView: UIScrollView) {

    exerDetailsTableView.maskView = nil

}

ここで、ビューは@IBOutletとして定義されています。

@IBOutlet weak var exerDetailsTableView: UITableView!
navigationiosscrolling
3
Stonetip

ショッピングアプリでこれに類似した問題が発生しました。アイテムのカードがページスペースの完全な部分であり、デフォルトの状態にあるページの最後のアイテムが折りたたみ（改ページ）をちょうど終えたということです。ユーザーのテスト中に、ほとんどのユーザーは、表示されたページが完成しているように見えたので、さらにスクロールできることに気付かなかったため、利用可能なアイテムが不足していると報告しました。

これを解決するには、カードの高さを変更して、ページのデフォルト状態の最後の項目が常に画面の端で半分切り取られるようにして、ユーザーが自然にスクロールして残りを表示するようにします。

ページのテキスト部分をスクロールすることだけを話していると想定して、ユーザーに強制的にスクロールさせる方法の1つをモックアップしました。

Version of suggested screen with end of text masked to stimulate a natural scroll response from the user

もちろん、短すぎてスクロールできないコンテンツは、マスクされた領域に出てはなりません。

また、折りたたみ時に段落スペースを使用して長いコンテンツが読み込まれないようにする必要もあります。これにより、必ずしも正しくマスクされず、スクロールのない短いコンテンツと見なされる場合があるためです。

ページ全体をスクロールするつもりなら、代わりにページの下部をマスクするか、単にページの上部のテキストコンテンツを展開して、下部がページ領域を超えないようにすることができます。

4
Andrew Martin

あなたの画像から、フォールドの下にさらにコンテンツがあるかもしれない唯一の手掛かりは、Cを説明する行方不明の段落ですが、注意深く（画像にA、B、Cがあることに注意してください）、ある程度の推論（説明がある場合） AとBについては、Cについても1つあるはずです）。

それ以外の場合、デザインはこのページが完成したことをいくつかの方法で示します。

  • 最後の要素は、次のセクションに移動するボタンです（少なくとも、それは私が考えていることです。ここではビデオを期待していません）。
  • 画像は完全に表示されます。
  • 画像は情報の新しい「カテゴリ」を開始するため、テキストは完全に見えます。

Cの説明とAとBの説明が分かれているのはなぜですか。私はおそらく問題を軽減する他のいくつかのレイアウトを考えることができます：

  • A-Cの説明を最初に置きます。つまり、非表示になったCの説明を画像の上に移動します。
  • 画像を最初に配置します。つまり、AとBの説明を画像の下に移動します。
  • 画像と説明を揃えます。つまり、画像を3つに分割し、画像と説明を並べて配置します。
0
virtualnobi

Appleが行う方法：Moreボタン）を検討することをお勧めします。以下はAppStoreからのスクリーンショットで、クリックするとコンテンツが下に拡大します。= Appleは、iTunesでもこの戦略を使用しています。

実装するのは簡単ではありませんが、試してみる価値はあると思います:)

enter image description here

0
Stephenye