Как добавить текст поверх изображений в View Pager?

Question

Итак, мое приложение в его нынешнем виде представляет собой галерею, содержащую 3 изображения. Пользователь просматривает изображения из стороны в сторону. Я хочу добавить текст в центр изображения (который я буду стилизовать), но для каждого изображения он должен быть другим.

Вот мой код для проекта Это действительно просто сейчас.

основной XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#000000" 
tools:context=".InspireActivity" > 

     <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

     <TextView 
      android:id="@+id/textView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:textAppearance="?android:attr/textAppearanceLarge" 
      android:textColor="#ffffff" /> 

</RelativeLayout> 

главный ява

public class Inspire extends Activity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     requestWindowFeature(Window.FEATURE_NO_TITLE); 
     getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
           WindowManager.LayoutParams.FLAG_FULLSCREEN); 
     setContentView(R.layout.activity_inspire); 

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


    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.inspire, menu); 
     return true; 
    } 

} 

и мой взгляд пейджера ява

public class ViewAdapter extends PagerAdapter { 
Context context; 
private int[] GalImages = new int[] { 
R.drawable.mountain, 
R.drawable.lake, 
R.drawable.stars 
}; 
ViewAdapter(Context context){ 
this.context=context; 
} 
@Override 
public int getCount() { 
return GalImages.length; 
} 

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

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

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

Я в конечном счете, хочется иметь особую базу данных для обоих моих изображений и текста так что их легко добавлять и удалять в будущем. Я также хочу, чтобы мои изображения и текст загружались с веб-сайта, но это еще один вопрос.

Answer 1

Вы можете использовать приведенный ниже xml-макет для текста поверх изображения. Любая причина, по которой вы не используете xml для создания макета?

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" > 

    <ImageView 
     android:id="@+id/how_to_image" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal|center_vertical" /> 

    <TextView 
     android:id="@+id/how_to_text" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:gravity="center_horizontal" 
     android:background="#AA000000" 
     android:textSize="@dimen/text_size_large" 
     android:padding="12dip" 
     android:textColor="#ffffffff" /> 

</FrameLayout> 

Answer 2

взгляд над 'instantiateItem()' метод here

, который динамически строит TextView. Попробуйте добавить этот фрагмент к своей динамической реализации, чтобы текст и ваше изображение были дочерними элементами LinearLayout w/(вертикальная ориентация).

Это должно сделать это за вас.

Примечание: на Github есть много хороших проектов ViewPager/Android.