Scroll-Bild, die Textbeschreibung mit Blick Pager in android

Question

Mein aktuellen Entwurf hat läßt sie (links und rechts Swipe) durch Bilder wie diese Swipe: current design

Aber was ich wirklich will ist ihm ein bisschen tun ändern, so dass Ich habe eine Textbeschreibung am unteren Rand. Die Textbeschreibung ändert sich, wenn sich das Bild ändert. Das neue Design ist wie folgt aus:

new design

Ich bin nicht sicher, wie ich diesen Entwurf erreicht? Wie zeichne ich zum Beispiel diese drei Kreise? Wie ändere ich den Text, wenn sich das Bild ändert? Kann jemand bitte beraten?

Hier ist mein Code:

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); 
    } 
    } 
} 

// activity_main

<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

wie ich sie verstehe, wollen Sie sowohl Bild und Text gescrollt werden, und Sie Anzeige unten benötigen.

So können Sie Ihre PagerAdapter ändern, so etw:

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); 
    } 
} 

Für den Indikator verwenden this und legte es unter ViewPager in xml

<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

Oh, müssen Sie Sie können ein benutzerdefiniertes Layout ein ImageView und TextView darunter (oder jede andere Anordnung zum Aufblasen enthalten brauchen). Ändern Sie dann Ihr PagerAdapter, um dieses benutzerdefinierte Layout mit dem Bild und dem Text aufzublasen. Dies ist nur, um Ihnen eine bessere Idee zu geben.

@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

versuchen auf diese Weise, Sie Array für Texte erstellen müssen,

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"}; 

initialisieren Ihren Adapter

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

Ihren Adapter wie

machen

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

dann bekommen die Position

txt.setText(stringArray[position]); 

Siehe this für mehr