使用android中的视图分页器滚动具有文本描述的图像 [英] scroll image that has text description using view pager in android

问题描述

我当前的设计允许我在这样的图像上滑动(左右滑动):当前设计

My current design lets me swipe (left and right swipe) through images like this:current design

但是我真正想做的是稍微更改一下，以便在底部添加文字说明.图像更改时，文字说明也会更改.新设计是这样的:

But what I really want to do is change it a bit so that I have a text description at the bottom. The text description changes when the image change. The new design is like this:

新设计

我不确定如何实现此设计?例如，如何绘制这三个圆?图像更改后，如何更改文本?有人可以请教吗?

I'm not sure how do I achieved this design? For example how do I draw those three circles? How do I make the text change when the image changed? Can anyone please advise?

这是我的代码:

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

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

  private class ImagePagerAdapter extends PagerAdapter {
    private int[] mImages = new int[] {
        R.drawable.chiang_mai,
        R.drawable.himeji,
        R.drawable.petronas_twin_tower,
        R.drawable.ulm
    };

    @Override
    public int getCount() {
      return mImages.length;
    }

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

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

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

//activity_main

//activity_main

<android.support.v4.view.ViewPager
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/view_pager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

推荐答案

据我了解，您希望图像和文本都可以滚动，并且底部需要指示器.

As i understand, you want both image and text to be scrolled, and you need indicator at the bottom.

因此，您将PagerAdapter更改为这样:

So you change your PagerAdapter to sth like this:

public class ImagePagerAdapter extends PagerAdapter {
    private int[] mImages ;
    private Context mContext;

    public ImagePagerAdapter(Context context, int[] mImages) {
        mContext = context;
        this.mImages = mImages;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.your_layout_with_image_and_text,container,false);


        ImageView imageView = (ImageView) layout.findViewById(R.id.your_image_view);
        TextView textView=(TextView)layout.findViewById(R.id.your_text_view)
        //.. load image and text you got from constructor
        container.addView(layout, 0);
        return layout;
    }

    public int getCount() {
        if(mImages!=null)
            return mImages.length;
        else
            return 0;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }
}

对于指标，请使用此并将其放在xml中的ViewPager下

For indicator, use this and put it below ViewPager in xml

<your_package.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:fillColor="@color/primary_color"
            app:pageColor="@color/white"
            app:strokeColor="@color/primary_color"
            android:padding="4dp" />

这篇关于使用android中的视图分页器滚动具有文本描述的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！