スクロール私の現在の設計は、私はこのようなスルー画像（左右のスワイプ）をスワイプすることができますアンドロイド

Question

のビューページャを使用してテキストの説明があります画像：current design

しかし、私が本当にやりたいことはようにそれを少し変更です私は一番下にテキストの説明があります。テキストの説明は、イメージが変更されたときに変更されます。新しいデザインは、このようなものです：

new design

私はこのデザインを実現しないかどうかはわかりませんか？例えば、どのように3つの円を描くのですか？イメージが変更されたときにテキストを変更するにはどうすればよいですか？誰でも助言してもらえますか？ここで

は私のコードです：

import android.app.Activity; 
import android.content.Context; 
import android.os.Bundle; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ImageView; 

public class MainActivity extends Activity { 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); 
    ImagePagerAdapter adapter = new ImagePagerAdapter(); 
    viewPager.setAdapter(adapter); 
    } 

    private class ImagePagerAdapter extends PagerAdapter { 
    private int[] mImages = new int[] { 
     R.drawable.chiang_mai, 
     R.drawable.himeji, 
     R.drawable.petronas_twin_tower, 
     R.drawable.ulm 
    }; 

    @Override 
    public int getCount() { 
     return mImages.length; 
    } 

    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return view == ((ImageView) object); 
    } 

    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     Context context = MainActivity.this; 
     ImageView imageView = new ImageView(context); 
     int padding = context.getResources().getDimensionPixelSize(
      R.dimen.padding_medium); 
     imageView.setPadding(padding, padding, padding, padding); 
     imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 
     imageView.setImageResource(mImages[position]); 
     ((ViewPager) container).addView(imageView, 0); 
     return imageView; 
    } 

    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
     ((ViewPager) container).removeView((ImageView) object); 
    } 
    } 
} 

//

<android.support.v4.view.ViewPager 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/view_pager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

Answer 1

ためthisを参照してください、あなたは、画像とテキストの両方をスクロールさせたい、とあなたは下の表示を必要としています。 、インジケータ用

public class ImagePagerAdapter extends PagerAdapter { 
    private int[] mImages ; 
    private Context mContext; 

    public ImagePagerAdapter(Context context, int[] mImages) { 
     mContext = context; 
     this.mImages = mImages; 
    } 

    @Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     LayoutInflater inflater = LayoutInflater.from(mContext); 
     ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.your_layout_with_image_and_text,container,false); 


     ImageView imageView = (ImageView) layout.findViewById(R.id.your_image_view); 
     TextView textView=(TextView)layout.findViewById(R.id.your_text_view) 
     //.. load image and text you got from constructor 
     container.addView(layout, 0); 
     return layout; 
    } 

    public int getCount() { 
     if(mImages!=null) 
      return mImages.length; 
     else 
      return 0; 
    } 
    @Override 
    public boolean isViewFromObject(View view, Object object) { 
     return view == object; 
    } 
    @Override 
    public void destroyItem(ViewGroup collection, int position, Object view) { 
     collection.removeView((View) view); 
    } 
} 

thisを使用して

<your_package.CirclePageIndicator 
      android:id="@+id/indicator" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:fillColor="@color/primary_color" 
      app:pageColor="@color/white" 
      app:strokeColor="@color/primary_color" 
      android:padding="4dp" /> 

Answer 2

ああ、あなたはImageViewとその下TextViewを含むカスタムレイアウト（またはあなたが可能性のある他の配置を膨らませるために必要activity_main必要）。 PagerAdapterを変更して、このカスタムレイアウトをイメージとテキストで膨張させます。これは単にあなたに良いアイデアを与えることです。

@Override 
    public Object instantiateItem(ViewGroup container, int position) { 
     Context context = container.getContext();  // I feel this is a better implementation 
     CustomLayout layout = new CustomLayout(context); 

     // This is a custom layout that you could create 
     // you could init a LinearLayout and add an 
     // ImageView and a TextView to it, your call :) 

     // Set image and text in your view accortind to 'position' 

     return layout; 
    } 

Answer 3

この方法を試してみてください、あなたはテキストの配列を作成する必要があり、

private int imageArr[] = { R.drawable.f, R.drawable.g, R.drawable.h, 
           R.drawable.i, R.drawable.j}; 

private String[] stringArray = new String[] { "first", "sec","third","fourth","fifth"}; 

その後、取得

int imgArray []; 
String[] stringArray; 
public ImagePagerAdapter(Activity act, int[] imgArra, String[] stringArr) { 
    activity = act; 
    imgArray = imgArra; 
    stringArray = stringArr; 
} 

のようなあなたのアダプタをご使用のアダプター

adapter = new ImagePagerAdapter(this, imageArr, stringArray); 

を初期化しますポジション

txt.setText(stringArray[position]); 

私は理解がより