如何在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> 

主要的Java

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

} 

和我的觀點尋呼機的Java

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中的子元素（垂直方向）。

這應該爲你做。

注意：Github上有很多好的ViewPager/Android項目。