この非常に役立つサイトに何かを戻したいので、これは実際には問題ではなく、この問題に対する私の解決策です。また、このソリューションは、このサイトや他の多くのサイトからのサポートから収集されたものであるため、他の多くの開発者の共同の努力を表しています。彼らに感謝します!
質問は、「iPhoneアプリの水平scrollViewアスペクトと、Android環境で関連するページコントロールをどのように再現できますか?」です。
これは、レシピのステップ、各ステップに関連するメソッド、および必要な材料を1つのスクロールビューで表示したかったために発生しました。また、ページコントロールを使用して、ユーザーがステップのどこにいるかを表示し、特定のステップに移動できるようにしたかったのです。
私のアプリのこの部分は、レシピのステップを表示します。各ステップはページに表示され、3つのコンポーネントがあります。ステップ識別子(すなわち、ステップ1、ステップ2)、ステップに必要な方法と成分。
レシピセクションの下に、アクティブなページを表示し、特定のページに移動するために使用できるページコントロールを表示します。ページコントロールには画像ボタンがあり、2つの画像は単純な円です。1つは選択されていないページ(page.png)用で、もう1つは選択されたページ(page_selected.png)用です。
アクティビティが作成されると、選択したレシピのステップがデータから取得され、レシピの各ステップのビューを追加して作成されたスクローラーセクションが作成されます。スクローラーをスワイプすると、ビューが次または前のページにスナップし、ページャーの表示が更新されて、現在のページが示されます。
最初の3つのxmlレイアウト(res / layout)
レシピ.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>
レシピscroll.xml(各レシピステップのスクローラーセクションに追加されるビュー。スクローラーセクションには、ページのスクロールを処理するために、recipeViewController.javaにonTouchlistnerがあることに注意してください)
<?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にあることに注意してください)
<?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にまとめられています
//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
}
}
それが私の解決策でした。私よりも賢いプログラマーがたくさんいると確信しているので、誰かがこれを改善できると確信しています。とにかくstackoverflowに感謝します!!!!