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

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