如何在View Pager中的图像顶部添加文本？ [英] How do I add text on top of images in View Pager?

问题描述

所以我的应用程序实际上是一个包含3张图像的画廊。用户从一侧滑动到另一侧以显示图像。我要添加的是文本到图像中心（我将对其进行样式化），但是每张图片的文本都必须不同。

So my app as it stands is essentially a gallery containing 3 images. The user swipes from side to side to display the images. What I'm looking to add is text to the centre of the image (which I will be styling) but it needs to be different for every picture.

这是我的项目代码现在很简单。

Here is my code for the project It's really simple right now.

主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

and my view pager 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);
}
}

我最终希望拥有一个单一的数据库我的图片和文字都可以使用，因此以后可以轻松添加和删除它们。我还希望从网站获取图像和文本，但这是另一个问题。

I'm ultimately looking to have a singular database for both my images and text so that it's easy to add and remove them in the future. I'm also looking to possibly have my images and text fed from a website but that's for another question.

推荐答案

您可以使用下面的xml布局可在图像顶部显示文本。为什么不使用xml创建布局？

You can use the below xml layout to have text on top of an image. Any reason why you are not using xml to create your layout?

<?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>

这篇关于如何在View Pager中的图像顶部添加文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！