使用android中的view pager滚动包含文本描述的图像

时间:2016-07-14 06:15:01

标签: android android-layout android-viewpager

我目前的设计允许我通过这样的图像滑动(向左和向右滑动):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" />

3 个答案:

答案 0 :(得分:1)

哦,您需要为其下方包含ImageViewTextView的自定义布局(或您可能需要的任何其他安排)进行充气。然后修改您的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;
    }

答案 1 :(得分:0)

尝试这种方式,你需要为文本创建数组,

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

答案 2 :(得分:0)

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

所以你将<service android:name="com.hyipc.core.service.barcode.BarcodeService2D"> <intent-filter> /*Your Service specific intent filters should be here*/ </intent-filter> </service> 更改为这样:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var dynamicContent = getParameterByName('utm_term');

$(document).ready(function() {

if (dynamicContent.match(/buy/i)) {
    $('#buy').show();
}

else {
    $('#default-content').show();
}
});

对于指标,请使用this并将其放在PagerAdapter下面的xml

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