在移動設備應用程序中使用滾動條

在移動設備應用程序中使用滾動條的注意事項

一般，若是屏幕的可見區域沒法顯示所有內容，應用程序將顯示滾動條。使用 Scroller 控件能夠在應用程序中添加滾動條。其餘組件（例如 Spark List 控件）支持滾動，所以您無需使用 Scroller 組件。有關更多信息，請參閱 Scrolling Spark containers。

滾動條的點擊區域是指屏幕上放置鼠標以執行滾動操做的區域。在基於桌面或瀏覽器的應用程序中，點擊區域是滾動條的可見區域。在移動設備應用程序中，即便屏幕的可見區域沒法顯示所有內容，也會隱藏滾動欄。隱藏滾動欄可以使應用程序使用屏幕的全屏寬度和高度。

移動設備應用程序必須區分用戶的意圖，用戶是要與控件交互（例如選擇 Button 控件）仍是要進行滾動。移動設備應用程序中有關滾動條的一個注意事項是：Flex 組件常常更改其外觀以響應用戶交互。

例如，當用戶按 Button 控件時，按鈕的外觀將會更改，以指示該按鈕已被選定。用戶釋放按鈕時，按鈕將其外觀更改回未選定的狀態。可是，在進行滾動時，若是用戶觸摸屏幕上 Button 所在的位置，您並不但願按鈕的外觀發生變化。

 Adobe 工程師 Steven Shongrunden 在 Saving scroll position between views in a mobile Flex Application 中介紹了一個處理滾動條的示例。

滾動術語

如下術語用於介紹移動設備應用程序中的滾動：

內容

 

對於可滾動組件（例如 Group 容器或 List 控件），指整個組件區域。根據屏幕大小和應用程序佈局，可能會僅顯示部份內容。

 

視口

 

當前可見的組件內容區域中的一部分。

 

拖動

 

用戶觸摸可滾動區域，而後移動手指以便內容沿手勢移動時發生的觸摸手勢。

 

速度

 

拖動手勢的移動速率和方向。以沿 X 和 Y 軸每毫秒的像素爲單位。

 

拋開

 

用戶在拖動手勢達到特定速度後擡起手指時的拖動手勢，此時可滾動內容仍繼續移動。

 

跳動

 

拖動或拋開手勢能夠將可滾動組件的視口移至組件內容以外。而後，視口顯示空白區域。當您釋放手指或拋開速度達到零時，視口將跳躍回其靜止點，而且視口有內容填充。移動隨着視口接近靜止點而減慢，所以能平穩中止。

 

移動設備應用程序中的滾動模式

可滾動組件（例如 List 和 Scroller）基於組件的 pageScrollingEnabled 和 scrollSnappingMode 屬性設置支持不一樣類型的滾動。這些屬性僅在 interactionMode 樣式設置爲 touch 時有效。

下表介紹了滾動模式：

pageScrollingEnabled	scrollSnappingMode	模式
false（默認值）	無（默認值）	默認狀況下，滾動以像素爲基礎。最終的滾動位置基於拖動或拋開手勢位於任何像素位置。例如，您滾動 List 控件。當您擡起手指時滾動即結束，即便僅部分 List 項可見也是如此。
false	leadingEdge、center、trailingEdge	滾動以像素爲基礎，可是內容基於 scrollSnappingMode 的值與最終位置對齊。 例如，能夠經過將 scrollSnappingMode 設置爲值 leadingEdge 來垂直滾動 List。List 控件與最終滾動位置對齊，其中頂部列表元素對齊到列表頂部。
true	none	滾動以頁面爲基礎。可滾動組件的視口大小決定着頁面大小。不管採用什麼手勢，一次只能滾動一個頁面。 至少滾動組件可見區域的 50% 才能使該頁面滾動到下一頁。若是您滾動的區域少於 50%，則該組件仍保留在當前頁面。或者，若是滾動速度足夠高，會顯示下一頁。若是滾動速度不夠高，組件仍保留在當前頁面。 若是內容大小不是視口大小的整數倍，則會向最後一頁中添加另外的內邊距以使其徹底適合視口的大小。
true	leadingEdge、center、trailingEdge	滾動以頁面爲基礎，可是組件基於 scrollSnappingMode 的值與最終位置對齊。爲確保遵照對齊模式，滾動距離始終都不能徹底等於頁面大小。

移動設備應用程序中的滾動示例

在如下示例中，使用 Scroller 組件將 Group 容器封裝在移動設備應用程序中。Group 容器將包含較大圖像的 Image 控件做爲其子代。經過將 Group 容器封裝在 Scroller 中，您能夠滾動圖像：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SparkMobilePixelScrollerHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">

    <s:Scroller width="200" height="200">
        <s:Group> 
            <s:Image width="300" height="400" 
                source="@Embed(source='../assets/logo.jpg')"/> 
        </s:Group>        
    </s:Scroller>     
</s:View>

請注意，在該示例中，將忽略 pageScrollingEnabled 和 scrollSnappingMode 屬性的任何設置。所以，該示例使用默認的像素滾動模式，而且您能夠滾動到圖像中的任何像素位置。

下一示例中顯示的 List 控件將設置 pageScrollingEnabled 和 scrollSnappingMode 屬性：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\views\SparkMobilePageScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="Adobe Product List">
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
            
            protected function myList_changeHandler(event:IndexChangeEvent):void {
                navigator.pushView(views.ProductPricelView,myList.selectedItem);
            }
            
        ]]>
    </fx:Script>    
    
    <s:List id="myList" labelField="Product"
        height="200" width="100%" 
        borderVisible="true" 
        scrollSnappingMode="leadingEdge"
        pageScrollingEnabled="true"
        change="myList_changeHandler(event);">
        <s:dataProvider> 
            <s:ArrayCollection> 
                <fx:Object Product="Adobe AIR" Price="11.99"/> 
                <fx:Object Product="Adobe BlazeDS" Price="11.99"/> 
                <fx:Object Product="Adobe ColdFusion" Price="11.99"/> 
                <fx:Object Product="Adobe Flash Player" Price="11.99"/> 
                <fx:Object Product="Adobe Flex" Price="Free"/> 
                <fx:Object Product="Adobe LiveCycleDS" Price="11.99"/> 
                <fx:Object Product="Adobe LiveCycle ES2" Price="11.99"/> 
                <fx:Object Product="Open Source Media Framework"/> 
                <fx:Object Product="Adobe Photoshop" Price="11.99"/> 
                <fx:Object Product="Adobe Illustrator" Price="11.99"/> 
                <fx:Object Product="Adobe Reader" Price="11.99"/> 
                <fx:Object Product="Adobe Acrobat" Price="11.99"/> 
                <fx:Object Product="Adobe InDesign" Price="Free"/> 
                <fx:Object Product="Adobe Connect" Price="11.99"/> 
                <fx:Object Product="Adobe Dreamweaver" Price="11.99"/> 
                <fx:Object Product="Open Framemaker"/> 
            </s:ArrayCollection> 
        </s:dataProvider> 
    </s:List>
</s:View>

該示例使用具備 leadingEdge 對齊設置的頁面滾動。所以，當您滾動 List 時，該 List 一次能夠滾動一頁。頁面更改時，控件與最終滾動位置對齊，其中頂部列表元素對齊到列表頂部。

與 StageText 相關的滾動注意事項

StageText 容許您在移動設備應用程序中使用本機文本輸入，但不容許使用標準文本字段控件。可是，可滾動的容器容納不下使用 StageText 的文本輸入控件，如 TextInput 或 TextArea 控件。所以，要在可滾動容器中使用文本輸入控件，請從新設計控件外觀，以使其不使用 StageText。

對於沒有使用 StageText 的 TextInput 和 TextArea 控件，Flex 附帶了一些外觀。請在可滾動容器中對這些控件使用下列外觀：

• spark.skins.mobile.TextInputSkin 外觀，用於不使用 StageText 的 TextInput。

• spark.skins.mobile.TextAreaSkin 外觀，用於不使用 StageText 的 TextArea。

下例顯示了一個在可滾動容器中使用 TextInput 和 TextArea 控件的 View 容器：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileStageTextScrollHomeView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    title="HomeView">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <!-- Create CSS class selectors that reference the skins
         that do not rely on StageText. -->
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        
        .myTextInputStyle {
            skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
        }
        .myTextAreaStyle {
            skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
        }
    </fx:Style>
    
    <!-- Apply the class selectors to the TextInput and TextArea controls. -->
    <s:Scroller width="100%" height="100%"> 
        <s:VGroup height="250" width="100%"
                  paddingTop="10" paddingLeft="5" paddingRight="10">
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 1: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 2: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 3: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="Text Input 4: " 
                    fontWeight="bold"/>
                <s:TextInput width="225"
                    styleName="myTextInputStyle"/>
            </s:HGroup>
            <s:HGroup verticalAlign="middle">
                <s:Label text="TextArea 1: " 
                    fontWeight="bold"/>
                <s:TextArea width="225" height="100"
                    styleName="myTextAreaStyle "/>
            </s:HGroup>
        </s:VGroup>
    </s:Scroller>
</s:View>

事件和滾動條

Flex 組件經過事件來指示已發生了用戶交互。而後，組件能夠更改其外觀或執行其它操做，來對用戶交互作出響應。

應用程序開發人員依賴事件來處理用戶交互。例如，一般使用 Button 控件的 click 事件來運行事件處理函數，以對用戶選擇按鈕作出響應。當用戶選擇 List 中的某一項時，使用 List 控件的 change 事件來運行事件處理函數。

Flex 滾動機制依賴於 mouseDown 事件。這意味着滾動機制會偵聽 mouseDown 事件以肯定是否要啓動滾動操做。

將用戶手勢解釋爲滾動操做

應用程序在一個可滾動容器中包含多個 Button 控件：

1. 使用手指按下 Button 控件。按鈕將分派 mouseDown 事件。

2. Flex 將對用戶交互的響應延遲預約義的時間段。經過延遲期，能夠確保用戶正在選擇按鈕而不是嘗試滾動屏幕。

   若是在延遲期間，您移動手指的量多於預約義量，則 Flex 將該手勢解釋爲滾動操做。手指必須移動約 0.08 英寸的距離，該手勢纔會被解釋爲滾動。此距離大約至關於 252 DPI 設備上的 20 個像素。

   因爲您在延遲期結束前移動了手指，因此 Button 控件不會識別該交互。該按鈕不會分派事件或更改其外觀。

3. 延遲期結束後，Button 控件將識別用戶交互。該按鈕將更改其外觀，以指示其已被選定。

   使用控件的 touchDelay 屬性配置延遲的持續時間。默認值爲 100 毫秒。若是將 touchDelay 屬性設置爲 0，則無延遲，且滾動會當即啓動。

4. 延遲期到期且 Flex 已分派鼠標事件後，移動手指的距離能夠大於 20 像素。Button 控件將恢復爲正常狀態，並啓動滾動操做。

   在這種狀況下，因爲延遲期結束，所以按鈕會更改其外觀。可是，一旦移動手指的距離大於 20 像素，即便延遲期到期後，Flex 也會將手勢解釋爲滾動操做。

注： Flex 組件除支持鼠標事件外，還支持許多不一樣類型的事件。使用組件時，您肯定應用程序對這些事件的反應方式。對於  mouseDown 事件，用戶的預期行爲不明確。用戶可能要與組件交互，或者要進行滾動。因爲存在此不明確性，所以 Adobe 建議偵聽  click 或  mouseUp 事件，而不是  mouseDown 事件。

處理滾動事件外觀和項呈示器中的文本控件

要在滾動操做開始時發出信號，分派 mouseDown 事件的組件將分派冒泡的 touchInteractionStarting 事件。若是未取消該事件，組件將分派冒泡的 touchInteractionStart 事件。

當組件檢測到 touchInteractionStart 事件時，不得嘗試響應用戶手勢。例如，當 Button 控件檢測到 touchInteractionStart 事件時，將關閉基於初始 mouseDown 事件而設置的任何可視指示符。

若是組件不但願啓動滾動，組件能夠在 touchInteractionStarting 事件的事件處理函數中調用 preventDefault() 方法。

完成滾動操做以後，分派 mouseDown 事件的組件將分派冒泡的 touchInteractionEnd 組件。

基於初始觸摸點的滾動行爲

下表說明了根據初始觸摸點位置處理滾動的方式：

選定項	行爲
空白空間、 不可編輯的文本、 不可選擇的文本	全部組件都不識別該手勢。直到用戶移動觸摸點的距離大於 20 個像素時，Scroller 纔會啓動滾動。
List 控件中的項	延遲期結束後，選定項的項呈示器將顯示更改成選定狀態。可是，只要用戶移動的距離大於 20 像素，項就會將其外觀更改成正常狀態並啓動滾動。
Button、 CheckBox、 RadioButton、 DropDownList	延遲期結束後，將顯示其 mouseDown 狀態。可是，若是用戶移動觸摸點的距離大於 20 個像素，控件則將其外觀更改成正常狀態並啓動滾動。
List 項呈示器中的 Button 組件	項呈示器從不加亮。Button 或 Scroller 處理手勢，與正常的 Button 狀況相同。