像iPhone页面控制Android的页面控件 [英] Android page control like iPhone page control
问题描述
我想放的东西回到这个非常有用的网站，所以这不是一个真正的问题，而是我解决这个问题。我还要补充一点，该溶液中收集的形式支持本网站和许多人一样，因此它重新presents许多其他开发商的共同努力。为了他们，我说声谢谢！
I would like to put something back to this VERY helpful site, so this is not really a question, but rather my solution to this issue. I would also add that this solution was gleaned form support from this site and many others, so it represents the combined efforts of many other developers. To them I say thank you!
现在的问题是你怎么能重现iPhone应用程序的水平滚动视图方面，并在Android环境相关的页面控制？
The QUESTION is "How can you recreate the horizontal scrollView aspects of iPhone apps and the associated page control in the Android environment?"
本的出现是因为我想显示配方在一个滚动视图的步骤，来回每一步的相关方法和必要的成分。我也希望有一个页面控件，以显示他们在那里这些步骤中的用户，让他们移动到任何具体的步骤
This arose because I wanted to display the steps in recipe, the associated method fro each step and the necessary ingredients in a single scroll view. I also wanted a page control to display to the user where they were in the steps and allow them to move to any specific step
我的应用程序的这一部分会显示在配方中的步骤。每个步骤出现在页面上，并且有三个组成部分。甲步骤标识符（即步骤1，步骤2），一种方法和一个配料所需的步骤
This part of my app displays the steps in a recipe. Each step appears on a page and has three components. A step identifier(ie. STEP 1, STEP 2), a method and a ingredients required for the step.
下面配方节中，我们显示一个页控制，显示哪个页面是活动的，可以被用于导航到特定网页。你会发现，页面控件具有图像按钮和两个图像是简单的圆圈，一个用于非选定的页面（page.png）和一个用于选定页面（page_selected.png）
Below the recipe section we display a page control that show which page is active and can be used to navigate to specific pages. You will notice that the page control has image buttons and the two images are simple circles, one for the non selected page (page.png) and one for the selected page (page_selected.png)
在活动产生的数据，并通过添加配方中的每一个步骤一个视图中创建滚轮部分检索所选择的配方中的步骤。当你刷卡的卷轴视图捕捉到下一个或previous页面和寻呼机显示器更新，以显示你是在哪个页面
When the activity is created the steps for the selected recipe are retrieved from the data and the scroller section created by adding a view for each step in the recipe. When you swipe the scroller the view snaps to the next or previous page and the pager display is updated to indicate which page you are on
首先3 XML布局（RES /布局）
First 3 xml layouts (res/layout)
recipe.xml
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（在将被添加到每个配方步骤卷轴剖视图。请注意，卷轴部具有在recipeViewController.java一个onTouchlistner来处理页面滚动）
recipesscroll.xml (the view that will be added to the scroller section for each recipe step. Note that the scroller section has a onTouchlistner in recipeViewController.java to handle page scrolling)
<?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（在将被添加到每个配方步骤该寻呼机剖视图。请注意，上述每个将具有onClick事件中recipeViewController.java将滚动到在寻呼机控制选择的特定页）
recipiespager.xml ( the view that will be added to the pager section for each recipe step. Note that each of these will have a onClick event in recipeViewController.java that will scroll to the specific page selected in the pager control)
<?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>
这是所有汇聚recipeViewController.java
This is all brought together 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
}
}
嗯，这是我的解决方案。我敢肯定，有很多聪明的编程人员比我在那里，所以我敢肯定有人可以改善这一点。总之谢谢计算器!!!!
Well that was my solution. I am certain that there are much clever programers than me out there so I am sure someone can improve this. Anyhow THANKS stackoverflow!!!!
推荐答案
我觉得GreenDroid库将有助于实现类似iPhone的UIPageControl东西。
I think the GreenDroid library will help achieve something similar to the iPhone's UIPageControl.
有一个看看他们在市场上GDCatalog应用程序。你也可以提取你想要的文件，使的PageControl。我用它在我的应用程序，它工作正常。需要一些优化，使之更顺畅。
Have a look at their app in marketplace GDCatalog. Also you can extract the files you want and make the pagecontrol. I've used it in my app and it works fine. Needs a bit optimisation to make it smoother.
https://github.com/cyrilmottier/GreenDroid
这篇关于像iPhone页面控制Android的页面控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
