如何在 ViewPager 上进行循环滚动? [英] How to do circular scrolling on ViewPager?
问题描述
我想将我的 ViewPager 设置为进行循环滚动.我希望第一页能够滚动到第 2 页和最后一页.我希望我的最后一页滚动到 [last page -1] 和第一页.我已经尝试过，虽然我不确定何时调用我创建的方法.ViewPager 中似乎没有处理这种事情的方法，所以我创建了下面的方法.
I would like to set my ViewPager to do circular scrolling. I want the first page to be able to scroll to page 2 AND the last page. And I would like my last page to scroll to [last page -1] AND the first page. I have made an attempt, although I am not sure when to call the method I have created. There does not seem to be a method in ViewPager that handles this sort of thing, so I created the below.
public ViewPagerAdapter(final ViewPager pager, int... pageIDs) {
super();
int actualNoOfIDs = pageIDs.length;
count = actualNoOfIDs + 2;
Log.d(TAG, "actualNoOfIDs: " + actualNoOfIDs +
"count: " + count);
pageIDsArray = new int[count];
for (int i = 0; i < actualNoOfIDs; i++) {
pageIDsArray[ i + 1] = pageIDs[i];
}
pageIDsArray[0] = pageIDs[actualNoOfIDs - 1];
pageIDsArray[count - 1] = pageIDs[0];
Log.d(TAG, "actualNoOfIDs#2: " + actualNoOfIDs +
"count#2: " + count);
pager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
int pageCount = getCount();
if (position == 0) {
pager.setCurrentItem(pageCount - 2, false);
} else if (position == pageCount - 1) {
pager.setCurrentItem(1, false);
}
}
@Override
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrollStateChanged()");
// if (state == ViewPager.SCROLL_STATE_IDLE) {
// int pageCount = getCount();
// int currentItem = pager.getCurrentItem();
// if (currentItem == 0) {
// pager.setCurrentItem(pageCount - 2, false);
// } else if (currentItem == pageCount - 1) {
// pager.setCurrentItem(1, false);
// }
// }
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrolled()");
}
});
}
我的整个代码有点冗长，但如果有帮助，我可以发布它.
My entire code is sort of lengthy, but if it helps I can post it.
public class ViewPagerAdapter extends PagerAdapter {
public static String TAG = ViewPagerAdapter.class.getSimpleName();
private int count;
private int[] pageIDsArray;
private TextToSpeech btnTTS;
private TtsButton tTSBtn;
String inputTxt;
Context context;
View itemView;
TextView tvNumber; // container for atomic number
TextView tvSymbol; // container for symbol
TextView tvWeight; // container for weight
TextView tvName; // container for name
TextView tvGroup; // container for group
TextView tvPeriod; // container for period
TextView tvBlock; // container for block
TextView tvFamily; // container for family
TextView tvColor; // container for color
TextView tvPhase; // container for phase
TextView tvMelt; // container for melting point
TextView tvBoil; // container for boiling point
TextView tvNeutrons; // container for neutrons
TextView tvProtons; // container for protons
TextView tvElectrons; // container for electrons
TextView tvUrl; // container for electrons
public ViewPagerAdapter(Context context, List<Integer> arrayAtomicNum,
List<String> arrayName, List<String> arraySymbol, List<String> arrayFamily,
List<String> arrayPhase, List<String> arrayColor, List<Integer> arrayGroup,
List<Integer> arrayPeriod, List<String> arrayBlock, List<Integer> arrayProtons,
List<Integer> arrayNeutrons, List<Integer> arrayElectrons, List<Double> arrayWeight,
List<Double> arrayMelt, List<Double> arrayBoil, List<String> arrayUrl) {
this.context = context;
ElementStructure.arrayAtomicNum = arrayAtomicNum;
ElementStructure.arrayName = arrayName;
ElementStructure.arraySymbol = arraySymbol;
ElementStructure.arrayFamily = arrayFamily;
ElementStructure.arrayPhase = arrayPhase;
ElementStructure.arrayColor = arrayColor;
ElementStructure.arrayGroup = arrayGroup;
ElementStructure.arrayPeriod = arrayPeriod;
ElementStructure.arrayBlock = arrayBlock;
ElementStructure.arrayProtons = arrayProtons;
ElementStructure.arrayNeutrons = arrayNeutrons;
ElementStructure.arrayElectrons = arrayElectrons;
ElementStructure.arrayWeight = arrayWeight;
ElementStructure.arrayMelt = arrayMelt;
ElementStructure.arrayBoil = arrayBoil;
ElementStructure.arrayUrl = arrayUrl;
}
public ViewPagerAdapter(final ViewPager pager, int... pageIDs) {
super();
int actualNoOfIDs = pageIDs.length;
count = actualNoOfIDs + 2;
Log.d(TAG, "actualNoOfIDs: " + actualNoOfIDs +
"count: " + count);
pageIDsArray = new int[count];
for (int i = 0; i < actualNoOfIDs; i++) {
pageIDsArray[ i + 1] = pageIDs[i];
}
pageIDsArray[0] = pageIDs[actualNoOfIDs - 1];
pageIDsArray[count - 1] = pageIDs[0];
Log.d(TAG, "actualNoOfIDs#2: " + actualNoOfIDs +
"count#2: " + count);
pager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
int pageCount = getCount();
if (position == 0) {
pager.setCurrentItem(pageCount - 2, false);
} else if (position == pageCount - 1) {
pager.setCurrentItem(1, false);
}
}
@Override
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrollStateChanged()");
// if (state == ViewPager.SCROLL_STATE_IDLE) {
// int pageCount = getCount();
// int currentItem = pager.getCurrentItem();
// if (currentItem == 0) {
// pager.setCurrentItem(pageCount - 2, false);
// } else if (currentItem == pageCount - 1) {
// pager.setCurrentItem(1, false);
// }
// }
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub
Log.d(TAG, "onPageScrolled()");
}
});
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return ElementStructure.arrayAtomicNum.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == ((RelativeLayout) object);
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int layoutColorId = ElementStructure.arrayLayoutColor.get(position);
if (layoutColorId == 1) {
itemView = inflater.inflate(R.layout.frame_learn_a, container,
false);
} else if (layoutColorId == 2) {
itemView = inflater.inflate(R.layout.frame_learn_b, container,
false);
} else if (layoutColorId == 3) {
itemView = inflater.inflate(R.layout.frame_learn_c, container,
false);
} else if (layoutColorId == 4) {
itemView = inflater.inflate(R.layout.frame_learn_d, container,
false);
}
Button btnSpeak = (Button)itemView.findViewById(R.id.btnaudio);
btnSpeak.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
inputTxt = ElementStructure.arrayName.get(position);
tTSBtn = new TtsButton(this, inputTxt);
}
});
// atomic number textView
tvNumber = (TextView)itemView.findViewById(R.id.metanumber);
// symbol textView
tvSymbol = (TextView)itemView.findViewById(R.id.metasymbol);
// weight textView
tvWeight = (TextView)itemView.findViewById(R.id.metaweight);
// name textView
tvName = (TextView)itemView.findViewById(R.id.metaname);
// group textView
tvGroup = (TextView)itemView.findViewById(R.id.metagroup);
// period textView
tvPeriod = (TextView)itemView.findViewById(R.id.metaperiod);
// block textView
tvBlock = (TextView)itemView.findViewById(R.id.metablock);
// family textView
tvFamily = (TextView)itemView.findViewById(R.id.metafamily);
// color textView
tvColor = (TextView)itemView.findViewById(R.id.metacolor);
// phase textView
tvPhase = (TextView)itemView.findViewById(R.id.metaphase);
// melting point textView
tvMelt = (TextView)itemView.findViewById(R.id.metamelt);
// boiling point textView
tvBoil = (TextView)itemView.findViewById(R.id.metaboil);
// neutrons textView
tvNeutrons = (TextView)itemView.findViewById(R.id.metaneutrons);
// protons textView
tvProtons = (TextView)itemView.findViewById(R.id.metaprotons);
// electrons textView
tvElectrons = (TextView)itemView.findViewById(R.id.metaelectrons);
// url textView
tvUrl = (TextView)itemView.findViewById(R.id.metaurl);
// capture position and set to the TextViews
tvNumber.setText(String.valueOf(ElementStructure.arrayAtomicNum.get(position)));
tvSymbol.setText(ElementStructure.arraySymbol.get(position));
tvWeight.setText(String.valueOf(ElementStructure.arrayWeight.get(position)));
tvName.setText(ElementStructure.arrayName.get(position));
tvPeriod.setText(String.valueOf(ElementStructure.arrayPeriod.get(position)));
tvBlock.setText(String.valueOf(ElementStructure.arrayBlock.get(position)));
tvFamily.setText(ElementStructure.arrayFamily.get(position));
tvColor.setText(ElementStructure.arrayColor.get(position));
tvPhase.setText(ElementStructure.arrayPhase.get(position));
tvNeutrons.setText(String.valueOf(ElementStructure.arrayNeutrons.get(position)));
tvProtons.setText(String.valueOf(ElementStructure.arrayProtons.get(position)));
tvElectrons.setText(String.valueOf(ElementStructure.arrayElectrons.get(position)));
tvUrl.setText(ElementStructure.arrayUrl.get(position));
// capture position, adjust for 0 value cases
if (ElementStructure.arrayGroup.get(position) == 0) {
tvGroup.setText("n/a");
} else {
tvGroup.setText(String.valueOf(ElementStructure.arrayGroup.get(position)));
}
if (ElementStructure.arrayMelt.get(position) == 0) {
tvMelt.setText("n/a");
} else {
tvMelt.setText(String.valueOf(ElementStructure.arrayMelt.get(position)));
}
if (ElementStructure.arrayBoil.get(position) == 0) {
tvBoil.setText("n/a");
} else {
tvBoil.setText(String.valueOf(ElementStructure.arrayBoil.get(position)));
}
// add fragments to container (ViewPager)
((ViewPager) container).addView(itemView);
return itemView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
Log.d(TAG, "destroyItem()");
// remove fragments from container (ViewPager)
((ViewPager) container).removeView((RelativeLayout) object);
}
@Override
public void finishUpdate(View container) {
// TODO Auto-generated method stub
Log.d(TAG, "finishUpdate()");
}
@Override
public void restoreState(Parcelable state, ClassLoader loader) {
// TODO Auto-generated method stub
Log.d(TAG, "restoreState()");
}
@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
Log.d(TAG, "saveState()");
return null;
}
@Override
public void startUpdate(View container) {
// TODO Auto-generated method stub
Log.d(TAG, "startUpdate()");
}
public class TtsButton extends Activity implements OnInitListener {
public TtsButton(OnClickListener onClickListener, String inputTxt) {
super();
tTSCheck(inputTxt);
}
private void tTSCheck (String inputTxt) {
int resultCodeCheck = TextToSpeech.Engine.CHECK_VOICE_DATA_PASS;
if (resultCodeCheck == 1) {
btnTTS = new TextToSpeech(context, this);
} else {
Intent installTTSFiles = new Intent(); //missing data, install it
installTTSFiles.setAction(TextToSpeech.Engine.ACTION_INSTALL_TTS_DATA);
startActivity(installTTSFiles);
}
}
@Override
public void onInit(int status) {
// TODO Auto-generated method stub
if(status == TextToSpeech.SUCCESS)
{
Log.i(TAG, "TTS INIT: SUCCESS");
btnTTS.setLanguage(Locale.US);
btnTTS.speak(inputTxt, TextToSpeech.QUEUE_FLUSH, null);
}
else if(status == TextToSpeech.ERROR)
{
Log.e(TAG, "TTS INIT: ERROR");
}
}
@Override
public void onPause() {
if (btnTTS != null) {
btnTTS.stop();
btnTTS.shutdown();
}
super.onPause();
}
} //end embedded class
} //end ViewPagerAdapter
提前致谢.我正在考虑尝试使用运动手势，但是，我真的不明白为什么我的方法不能工作这么长时间，以至于我可以在正确的位置调用它.我最初的想法是每次位置改变时，如果条件正确，就在Object instantiateItem(ViewGroup container, final int position)"中调用它.但我不确定这是否最好.
Thanks in advance. I was thinking about trying to use motion gesture, however, I really do not understand why my method won't work so long that I can call it in the correct spot. My initial thought was to call it in "Object instantiateItem(ViewGroup container, final int position)" every time the position changes, and if the conditions were correct. But I'm not sure if that is best.
推荐答案
好的，我有答案了.这实际上比我预期的要容易，但确实需要一些技巧.首先，让我从设置开始.例如，假设您在 ViewPager 中滚动浏览了三个页面 (A-B-C).并且您想设置它，以便如果您继续在 C(第 3 页)上滚动，它会转到 A(第 1 页)，如果您在 A(第 1 页)上向后滚动，它会转到 C(第 3 页)).
Ok, I have an answer. It was actually easier than I expected, but it does take some trickery. First, let me begin with the set up. Lets say, for example, you have three pages (A-B-C) that you are scrolling through in your ViewPager. And you want to set it up so that if you continue scrolling on C (pg. 3), it goes to A (pg. 1) and if you scrolled backwards on A (pg. 1) it goes to C (pg. 3).
我并不是说我的解决方案是最好的，但它确实有效，而且我没有发现任何问题.首先，您必须创建两个假"页面.假页面代表您的 ViewPager 的第一页和最后一页.接下来您需要设置一个 onPageChangeListener()，并使用 onPageSelected() 方法.您需要假页面的原因是因为 onPageSelected() 仅在您移动(滑动)后才注册.换句话说，如果没有这种方法，最终用户将不得不滚动到第 2 页并返回到第 1 页才能接收到第 1 页的点击，这也意味着第 1 页将根据您的代码逻辑被跳过.
I am not saying my solution is the best, but it works and I do not see any issues. First, you have to create two "fake" pages. The fake pages represent the first and last pages of your ViewPager. The next thing you will need is to set up an onPageChangeListener(), and use the method onPageSelected(). The reason why you need the fake pages is because onPageSelected() only registers after you have moved (swiped). In other words, without this method the end user would have to scroll to page 2 and back to page 1 to receive a hit on page 1, which also means that page 1 would be skipped depending on your code logic.
设置确实是完整的答案.一旦你有了你的假页面，只需在必要的方法中使用 setCurrentItem() 就可以了.
The setup is really the entire answer. Once you have your fake pages, it is just a matter of using setCurrentItem() inside the necessary method.
这是我的代码的样子.在将视图返回到容器内之前，请务必将其放置在您的公共 Object instantiateItem(final ViewGroup container, final int position) 方法中.
Here is how my code looks. Be sure to place this inside your public Object instantiateItem(final ViewGroup container, final int position) method, just before you return your view inside of your container.
((ViewPager) container).setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
Log.d(TAG, "onPageSelected() :: " + "position: " + position);
// skip fake page (first), go to last page
if (position == 0) {
((ViewPager) container).setCurrentItem(118, false);
}
// skip fake page (last), go to first page
if (position == 119) {
((ViewPager) container).setCurrentItem(1, false); //notice how this jumps to position 1, and not position 0. Position 0 is the fake page!
}
}
就是这样，它起作用了！唯一要做的另一件事是在位置 1 上启动您的 ViewPager(这是第二页:假页 = pg 1，我的真实起始页 = pg 2).现在，每次我滚动到虚假页面时，我都会将其向后重定向到最后一个真实页面.每次我向前滚动到最后一个假页面时，我都会将其重定向到真正的起始页面(第 2 页).
That's it, it does the trick! The only other thing to do is start your ViewPager on position 1 (which is the second page: fake page = pg 1, my real starting page = pg 2). Now, every time I scroll to the fake page, I redirect it backwards to the last real page. And every time I scroll forward to the last fake page, I redirect it forwards to the real starting page (pg 2).
另外，不要试图在 onPageScrollStateChanged 中放置任何代码.那个方法很诡异，好像状态值是不可控的.它不断地从一种状态跳到另一种状态.即使没有滚动.这只是我得到的一个提示.
Also, do not try to put any code in onPageScrollStateChanged. That method is bizarre, it seems that the state value is uncontrollable. It constantly jumps from one state to another. Even without scrolling. That is just a tip I picked up.
这篇关于如何在 ViewPager 上进行循环滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
