Viewpager:滑动时失去切换按钮的状态

Viewpager: lose the state of toggle button when swiping

我正在使用 Viewpager 和 PagerAdapter 创建一个带有图像和点赞按钮的画廊。请参考我的代码:

public class GalleryAdapter extends PagerAdapter {

private Activity _activity;
private ArrayList<MyPhotoItem> _imageCollection;

// Components in fullsceen layout
ImageView imgDisplay;
private ToggleButton btnLike;

// Variable for btnLike
private boolean isChecked;

// constructor
public GalleryAdapter(Activity activity,
        ArrayList<MyPhotoItem> images) {
    this._imageCollection = images;
}

@Override
public int getCount() {
    return this._imageCollection.size();
}

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

@Override
public Object instantiateItem(ViewGroup container, int position) {

    inflater = (LayoutInflater) _activity
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View viewLayout = inflater.inflate(R.layout.layout_gallery_image,
            container, false);


    imgDisplay = (ImageView) viewLayout
            .findViewById(R.id.layout_gallery_imgDisplay);
    Picasso.with(this._activity.getApplicationContext())
            .load(_imageCollection.get(position).url).into(imgDisplay);

    btnLike = (ToggleButton) viewLayout
            .findViewById(R.id.layout_gallery_likeButton);
    btnLike.setOnCheckedChangeListener(null);
    btnLike.setChecked(isChecked);
    btnLike.setOnCheckedChangeListener(new OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(CompoundButton buttonView,
                boolean isChecked) {
            if (isChecked) {
                isChecked = true;

            } else {
                isChecked = false;

            }
        }

    });

    ((ViewPager) container).addView(viewLayout);

    return viewLayout;
}


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

}

@Override
public int getItemPosition(Object object) {
    return PagerAdapter.POSITION_NONE;
}

}

我当前的问题:当我滑动到另一个页面并返回到之前的页面时,Viewpager 不会保持切换按钮状态(假设 Viewpager 中加载了 5 张照片)。我浏览了几篇 Whosebug 帖子,但其中 none 可以正确解决我的问题。

如有任何建议,我们将不胜感激。提前致谢。

如果 ViewPager 中应该只有 5 张图片,您可以尝试使用 setOffscreenPageLimit (int limit)

发生这种情况是因为在您更改页面时分页器的视图不断被回收,因此页面中的视图不断被重新创建,因此您丢失了 ToggleButton 的状态,解决这个问题的方法是保存当 ToggleButton 的状态发生变化并在 instantiateItem 方法上检索它时,SharedPreferences 中的状态,并将状态设置为 ToggleButton。

感谢您的回复。虽然他们中的大多数都不是我的案例的直接答案,但他们给了我一些线索来找到我的解决方案。这可能不是最好的解决方案,但它解决了我的问题。

解决方法:

1/ 添加标志以保持对象中 Toggle 的状态:

public class MyPhotoItem {
...
  public boolean like_flag;
...
}

2/ 自定义一点 OnCheckedChangeListener:

class OnLikeCheckedChangeListener implements OnCheckedChangeListener {
    int mPosition;

    // constructor
    public OnLikeCheckedChangeListener(int position) {
        this.mPosition = position;
    }
    @Override
    public void onCheckedChanged(CompoundButton buttonView,
            boolean isChecked) {
     if (isChecked){ 
            _imageCollection.get(_position).like_flag = true;
            notifyDataSetChanged();
      }
     else{
            _imageCollection.get(_position).like_flag = false;
            notifyDataSetChanged();
     }
  }
}

3/ 根据 Flag 设置 Toggle 状态:

@Override
public Object instantiateItem(ViewGroup container, int position) {
  ...
  // Init Toggle status
    if (_imageCollection.get(position).like_flag) {
        btnLike.setChecked(true);
    } else {
        btnLike.setChecked(false);
    }
  btnLike.setOnCheckedChangeListener(new OnLikeCheckedChangeListener(
            position));
  ...
 }

就是这样。 Toggle 状态在滑动 Viewpager 期间保持不变。大家有更好的解决方案或者好的做法,欢迎大家评论。

享受编码吧!