Controllo pagina Android come controllo pagina iPhone

Question

Vorrei mettere qualcosa in questo sito MOLTO utile, quindi questa non è davvero una domanda, ma piuttosto la mia soluzione a questo problema. Vorrei anche aggiungere che questa soluzione è stata raccolta dal supporto di questo sito e molti altri, quindi rappresenta gli sforzi combinati di molti altri sviluppatori. A loro dico grazie!

La DOMANDA è "Come è possibile ricreare gli aspetti scrollView orizzontali delle app iPhone e il controllo associato della pagina nell'ambiente Android?"

Questo è sorto perché volevo visualizzare i passaggi nella ricetta, il metodo associato per ogni passaggio e gli ingredienti necessari in una singola vista di scorrimento. Desideravo anche un controllo di pagina per visualizzare all'utente dove erano i passaggi e consentire loro di passare a qualsiasi passo specifico

Questa parte della mia app visualizza i passaggi in una ricetta. Ogni passaggio appare su una pagina e ha tre componenti. Un identificatore di passo (ad esempio STEP 1, STEP 2), un metodo e gli ingredienti necessari per il passo.

Sotto la sezione della ricetta viene visualizzato un controllo di pagina che mostra quale pagina è attiva e può essere utilizzata per navigare a pagine specifiche. Noterai che il controllo della pagina ha pulsanti immagine e le due immagini sono cerchi semplici, uno per la pagina non selezionata (pagina.png) e uno per la pagina selezionata (page_selected.png)

Quando l'attività viene creata, i passaggi per la ricetta selezionata vengono recuperati dai dati e la sezione scroller creata aggiungendo una vista per ogni passaggio della ricetta. Quando si scorrere la barra di scorrimento della visualizzazione si aggancia alla pagina precedente o successiva e il display cercapersone viene aggiornata per indicare che la pagina si è in

primi 3 schemi XML (res/layout)

recipe.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" > 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 

<!--Scroller section--> 

    <HorizontalScrollView 
     android:id="@+id/scroll_view" 
     android:layout_width="match_parent" 
     android:layout_height="320dp" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginTop="100dp" > 

      <LinearLayout 
       android:id="@+id/methodScrollView" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="horizontal" > 
      </LinearLayout> 

    </HorizontalScrollView> 

<!-- pager section --> 

    <LinearLayout 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="20dp" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginLeft="20dp" 
     android:layout_marginRight="20dp" 
     android:layout_marginTop="430dp" 
     android:gravity="center" 
     android:orientation="horizontal" > 

    </LinearLayout> 

</RelativeLayout> 

recipesscroll.xml (la vista che verrà aggiunto alla sezione scroller per ogni fase della ricetta. si noti che la sezione scorrimento ha un onTouchlistner in recipeViewController.java per gestire pagina scorrimento)

012.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/recipeScroll" 
    android:layout_width="320dp" 
    android:layout_height="320dp" 
    android:gravity="center_vertical" > 

    <TextView 
    android:id="@+id/method" 
    style="@style/scrollMethod" 
    android:layout_width="wrap_content" 
    android:layout_height="200dp" 
    android:layout_alignParentTop="true" 
    android:text="Method" /> 

    <TextView 
    android:id="@+id/ingredients" 
    style="@style/scrollIngredients" 
    android:layout_width="wrap_content" 
    android:layout_height="120dp" 
    android:layout_alignParentTop="true" 
    android:text="Ingredients" /> 

    <TextView 
    android:id="@+id/methodStep" 
    style="@style/scrollStep" 
    android:layout_width="wrap_content" 
    android:layout_height="20dp" 
    android:layout_alignParentTop="true" 
    android:text="Step" /> 

</RelativeLayout> 

recipiespager.xml (la vista che verrà aggiunta alla sezione del cercapersone per ogni passaggio della ricetta. Si noti che ognuno di questi avrà un evento onClick in recipeViewController.java che scorrere fino alla pagina specifica selezionata nel controllo pager)

<?xml version="1.0" encoding="utf-8"?> 
<Button xmlns:android="http://schemas.android.com/apk/res/android" 
      style="@style/pageButton" 
      android:layout_marginLeft="10dp" 
      android:layout_width="16dp" 
      android:layout_height="16dp" 
      android:onClick="selectPage"> 

</Button> 

Questo è tutto riunito in recipeViewController.java

//my package name change this to yours 
package com.infactdata.spinAdinner; 

import java.util.ArrayList; 

//DataModel is the model for my data change this to yours or ignore 
because it is just away of holding the data that will populate the views 
import com.infactdata.plist.DataModel; 

import android.content.res.Resources; 
import android.graphics.Typeface; 
import android.os.Bundle; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.view.View.OnTouchListener; 
import android.widget.Button; 
import android.widget.HorizontalScrollView; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.RelativeLayout; 
import android.widget.TableLayout; 
import android.widget.TableRow; 
import android.widget.TextView; 

public class RecipeViewController extends RootViewController { 
    private DataModel currentData; 
    HorizontalScrollView h_scroll; 
    int numberOfPages = 0; 
    int thePage; 
    int otherPage; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     //first of the xml files 
     setContentView(R.layout.recipe); 

     //reference to my global variables 
     GlobalClass global = (GlobalClass)getApplicationContext(); 

     //because I wanted a particular type face 
     Typeface face=Typeface.createFromAsset(getAssets(), "fonts/trebucit.ttf"); 

     //VERY IMPORTANT because we need to use this to add the content to the scroll 
     and pager sections 
     LayoutInflater inflater = getLayoutInflater(); 

     //current data held a dataModel 
     currentData = global.getCurrent(); 

     currentName.setText(currentData.getName()); 

     String imageFile = currentData.getImage(); 
     Resources r = getResources(); 

     int res = r.getIdentifier(imageFile, "drawable", "com.infactdata.spinAdinner"); 
     image.setImageResource(res); 

     //recources that change the pager indicators to different images 
     thePage = r.getIdentifier("page_selected", "drawable","com.infactdata.spinAdinner"); 
     otherPage = r.getIdentifier("page", "drawable", "com.infactdata.spinAdinner"); 

     //Get the method(ArrayList) out of the currentData(DataModel). This is the array of 
     data that will fill the added view with different content (ie. the specific 
     instructions for the recipe step. This could be your own data array. 

     ArrayList<String[]> method = new ArrayList<String[]>(); 
     method = currentData.getMethod(0); 
     numberOfPages = method.size(); 

     //now to build the views by adding the content and then adding the text for that 
     content that reflects the instructions for the step in the recipe 

     for(int i = 0; i < method.size(); i++){ 

      String[] methodStep = method.get(i); 

      //find the scroll view 
      LinearLayout scroll = (LinearLayout) findViewById(R.id.methodScrollView); 

      //find the recipe scroller. the second xml file 
      RelativeLayout step = (RelativeLayout)findViewById(R.id.recipeScroll); 

      //add the recipe step (step) to the scrollview (scroll) 
      step = (RelativeLayout)inflater.inflate(R.layout.recipescroll, scroll, false); 

      //add the instructions for this step in the recipe 
      TextView stage = (TextView)step.findViewById(R.id.methodStep); 
      stage.setText(methodStep[0].toString()); 
      stage.setTypeface(face); 

      TextView methodText = (TextView)step.findViewById(R.id.method); 
      methodText.setText(methodStep[1].toString()); 
      methodText.setTypeface(face); 

      TextView ingredients = (TextView)step.findViewById(R.id.ingredients); 
      ingredients.setText(methodStep[2].toString()); 
      ingredients.setTypeface(face); 

      //create method step and add to scroll 
      scroll.addView(step); 

      //pager setup is a duplicate of the above 
      //find the pager 
      LinearLayout pager = (LinearLayout) findViewById(R.id.pager); 

      //find the pager button. the third xml file 
      Button page = (Button)inflater.inflate(R.layout.recipespager, pager, false); 

      //give each button it own ID. This will be used to test which button should be highlighted and used to move to a specific page. This is because the ID is equal to the page number (0 based of course) 
      page.setId(i); 

      //because this is a fresh construction we will be on page 0 so highlight that button 
      if (i == 0){ 
       page.setBackgroundResource(thePage); 
      } 

      //create page control and add to pager 
      pager.addView(page); 
     } 

     //create the onTouch controls 

     h_scroll = (HorizontalScrollView) findViewById(R.id.scroll_view); 
     h_scroll.setOnTouchListener(scrolling); 

} 

private OnTouchListener scrolling = new OnTouchListener(){ 
    public boolean onTouch(View v, MotionEvent event) { 
     if (event.getAction() == MotionEvent.ACTION_UP || event.getAction() == 
     MotionEvent.ACTION_CANCEL){ 
      int scrollX = h_scroll.getScrollX(); 
      int itemWidth = h_scroll.getMeasuredWidth(); 
      int activePage = ((scrollX + itemWidth/2)/itemWidth); 
      int scrollTo = activePage * itemWidth; 
      h_scroll.smoothScrollTo(scrollTo, 0); 


      //page control display the active page button 
      Log.v("MyDebug","Active page = "+activePage); 
      for(int i = 0; i < numberOfPages; i++){ 
       Button aPage = (Button) findViewById(i); 
       if(i == activePage){ 
        aPage.setBackgroundResource(thePage); 
       }else{ 
        aPage.setBackgroundResource(otherPage); 
       } 
      } 

      return true; 
     } else { 
      return false; 
     } 
    } 

}; 


//this is the onClick handler for the page buttons and moves the scroller to the page 
associated with the button. That is through the button ID, which matches the page 
number (0 based of course 

public void selectPage(View v) { 
    int newPage = v.getId(); 
    int itemWidth = h_scroll.getMeasuredWidth(); 
    int scrollTo = newPage * itemWidth; 
    h_scroll.smoothScrollTo(scrollTo, 0); 

    //page control display 
    Log.v("MyDebug","Active page = "+newPage); 
    for(int i = 0; i < numberOfPages; i++){ 
     Button aPage = (Button) findViewById(i); 
     if(i == newPage){ 
      aPage.setBackgroundResource(thePage); 
     }else{ 
      aPage.setBackgroundResource(otherPage); 
     } 
    } 
    } 

    public void finishActivity(View v){ 
     //perform back action 
     finish(); 
    } 

    public void nextActivity(View v){ 
     //move to next activity 
    } 
} 

Bene, questa era la mia soluzione. Sono certo che ci sono programmatori molto più bravi di me, quindi sono certo che qualcuno può migliorarlo. Comunque GRAZIE allo stackoverflow !!!!

Answer 1

Penso che la libreria GreenDroid aiuterà a raggiungere qualcosa di simile a UIPageControl di iPhone.

Dai un'occhiata alla loro app sul marketplace GDCatalog. Inoltre puoi estrarre i file che vuoi e rendere il controllo delle pagine. L'ho usato nella mia app e funziona perfettamente. Ha bisogno di un po 'di ottimizzazione per renderlo più agevole.

https://github.com/cyrilmottier/GreenDroid