在android中使用视图寻呼机滚动具有文本描述的图像

Question

我目前的设计让我可以在这样的图像中滑动（左右滑动）：current design

但我真正想做的是稍微改变一下，以便在底部有文字说明。当图像改变时，文字描述也会改变。新的设计是这样的：

new design

我不确定我是如何实现这个设计的？例如，我如何绘制这三个圆圈？图像更改时如何更改文本？谁能给点建议？

这是我的代码：

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

<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" />

Answer 1

哦，您需要扩展一个自定义布局，其中包含一个 ImageView 和一个 TextView 在其下方（或您可能需要的任何其他排列）。然后修改您的PagerAdapter 以使用图像和文本填充此自定义布局。这只是为了给你一个更好的主意。

@Override
    public Object instantiateItem(ViewGroup container, int position) {
      Context context = container.getContext();      // I feel this is a better implementation
      CustomLayout layout = new CustomLayout(context);   

      // This is a custom layout that you could create
      // you could init a LinearLayout and add an 
      // ImageView and a TextView to it, your call :)

      // Set image and text in your view accortind to 'position'

      return layout;
    }

Answer 2

据我了解，您希望滚动图像和文本，并且底部需要指示符。

所以你把你的PagerAdapter改成这样：

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

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

<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" />

Answer 3

试试这个方法，你需要为文本创建数组，

private int imageArr[] = { R.drawable.f, R.drawable.g, R.drawable.h,
                              R.drawable.i, R.drawable.j};  

private String[] stringArray = new String[] { "first", "sec","third","fourth","fifth"};

初始化你的适配器

adapter = new ImagePagerAdapter(this, imageArr, stringArray );

让你的适配器像

int imgArray [];
String[] stringArray;
public ImagePagerAdapter(Activity act, int[] imgArra, String[] stringArr) {
    activity = act;
    imgArray = imgArra;
    stringArray = stringArr;
}

然后得到位置

txt.setText(stringArray[position]);

更多信息请见this