如何在View Pager中的图像上添加文本?

时间:2013-09-29 04:31:59

标签: java android xml database android-viewpager

所以我的应用程序本质上是一个包含3个图像的图库。用户从一侧滑动到另一侧以显示图像。我想要添加的是文本到图像的中心(我将会造型)但是每张图片都需要不同。

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

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

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

我最终希望为我的图像和文本提供一个单一的数据库,以便将来添加和删除它们很容易。我也希望从网站上提供我的图像和文字,但这是另一个问题。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

查看'instantiateItem()'方法here

动态构建textView。尝试将该块添加到动态实现中,以便文本和图像是LinearLayout w /(垂直方向)中的子项。

那应该为你做。

注意:Github上有很多优秀的ViewPager / Android项目。