Điều khiển trang Android như kiểm soát trang iPhone

Question

Tôi muốn đưa một cái gì đó trở lại trang web rất hữu ích này, vì vậy đây không thực sự là một câu hỏi, mà là giải pháp của tôi cho vấn đề này. Tôi cũng sẽ thêm rằng giải pháp này đã được lượm lặt hình thức hỗ trợ từ trang web này và nhiều người khác, vì vậy nó đại diện cho những nỗ lực kết hợp của nhiều nhà phát triển khác. Với họ, tôi nói lời cảm ơn!

CÂU HỎI là "Làm thế nào bạn có thể tạo lại các khía cạnh scrollView ngang của ứng dụng iPhone và kiểm soát trang được liên kết trong môi trường Android?"

Điều này phát sinh bởi vì tôi muốn hiển thị các bước trong công thức, phương pháp được liên kết cho mỗi bước và các thành phần cần thiết trong một lần xem cuộn. Tôi cũng muốn một điều khiển trang để hiển thị cho người dùng nơi họ đang ở trong các bước và cho phép họ chuyển sang bất kỳ bước cụ thể nào

Phần này của ứng dụng của tôi hiển thị các bước trong công thức. Mỗi bước xuất hiện trên một trang và có ba thành phần. Một định danh bước (tức là BƯỚC 1, BƯỚC 2), một phương pháp và một thành phần cần thiết cho bước này.

Bên dưới phần công thức, chúng tôi hiển thị điều khiển trang cho biết trang nào đang hoạt động và có thể được sử dụng để điều hướng đến các trang cụ thể. Bạn sẽ nhận thấy rằng điều khiển trang có các nút hình ảnh và hai hình ảnh là các vòng tròn đơn giản, một hình ảnh cho trang không được chọn (page.png) và một cho trang đã chọn (page_selected.png)

Khi hoạt động được tạo các bước cho công thức đã chọn được lấy từ dữ liệu và phần cuộn được tạo bằng cách thêm chế độ xem cho mỗi bước trong công thức. Khi bạn swipe scroller quan điểm snaps đến trang tiếp theo hoặc trước đó và hiển thị pager được cập nhật để chỉ ra các trang web mà bạn đang trên

First 3 bố trí 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 (quan điểm cho rằng sẽ được thêm vào phần cuộn cho mỗi bước công thức. Lưu ý rằng phần cuộn có onTouchlistner trong recipeViewController.java để xử lý trang scrolling)

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 (chế độ xem sẽ được thêm vào phần máy nhắn tin cho mỗi bước công thức. Lưu ý rằng mỗi trong số này sẽ có một sự kiện onClick trong recipeViewController.java mà sẽ di chuyển đến trang cụ thể được lựa chọn trong việc kiểm soát 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> 

Đây là tất cả sẽ cùng mang 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 
    } 
} 

Vâng đó là giải pháp của tôi. Tôi chắc chắn rằng có rất nhiều người lập trình thông minh hơn tôi ngoài đó vì vậy tôi chắc chắn ai đó có thể cải thiện điều này. Dù sao THANKS stackoverflow !!!!

Answer 1

Tôi nghĩ thư viện GreenDroid sẽ giúp đạt được điều gì đó tương tự như UIPageControl của iPhone.

Hãy xem ứng dụng của họ trên thị trường GDCatalog. Ngoài ra, bạn có thể trích xuất các tập tin mà bạn muốn và thực hiện việc kiểm soát trang. Tôi đã sử dụng nó trong ứng dụng của tôi và nó hoạt động tốt. Cần một chút tối ưu hóa để làm cho nó mượt mà hơn.

https://github.com/cyrilmottier/GreenDroid