如何在 View Pager 中的图像顶部添加文本？答案

【问题标题】：How do I add text on top of images in View Pager?如何在 View Pager 中的图像顶部添加文本？
【发布时间】：2013-09-29 04:31:58
【问题描述】：

所以我的应用程序本质上是一个包含 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);
}
}

我最终希望为我的图像和文本建立一个单一的数据库，以便将来轻松添加和删除它们。我还希望我的图像和文本可能来自网站，但这是另一个问题。

【问题讨论】：

标签： java android xml database android-viewpager

【解决方案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>

【讨论】：

【解决方案2】：

查看“instantiateItem()”方法here

动态构建 textView。尝试将该块添加到您的动态实现中，以便文本和您的图像是带有（垂直方向）的 LinearLayout 中的子级。

这应该为你做。

注意：Github 上有很多不错的 ViewPager / Android 项目。

【讨论】：