I used View Pager to make a recommendation bar for image switching (similar to the recommendation information bar at the top of Taobao and Toutiao clients). It can be achieved quickly with View Pager. However, when I accidentally used Taobao APP, I suddenly found that its effect was different from what I did. The recommendation bar of Taobao APP can be switched indefinitely on the left and right, but ViewPager itself does not actually support this function.
In fact, it is not difficult to implement this infinite loop. You only need to add a redundant picture at the beginning and end of the data source, and listen to position<1 and position> (total data entry-1) in onPagerChangeListener(). Another thing to note is that the data source here is +2, while the navigation small dots are 2 less than the data source, so when the infinite loop is endless, the switching of the small dots will be difficult to deal with. I also wrote logic to judge conditions in onPageSelected() at the beginning. I always feel it is quite troublesome. Is there a better way to implement it? The answer is yes. Isn't it enough to just set one of the small dots at the beginning and end and set it to invisible?
My code implementation is as follows:
xml layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="match_parent">
<.
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
></.>
<LinearLayout
android:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:src="@drawable/dots"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:padding="5dp"
android:visibility="invisible"
android:src="@drawable/dots"/>
</LinearLayout>
</RelativeLayout>
Interface implementation:
public class HomePageFragment extends BaseFragment {
private View view;
private ViewPager mViewPager;//Top information recommendation column private MyViewPagerAdapter mViewPagerAdapter;
private LinearLayout ll_dots_homepage_top;//The navigation point of the top information recommendation bar private int GUIDE_NUMBER = 4; //The number of top information recommendation columns private ImageView[] dotImages; //The top information recommendation column guides small dots private int dotCurrentIndex; //The top information recommendation column small dot offset private MyOnPageChangeListener mOnPageChangeListener;
private List<View> mListDataViewPage;
private Context context;
@Override
public void onAttach(Context context) {
(context);
= context;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable
Bundle savedInstanceState) {
view = (.frament_homepage, container, false);
initData();
initView();
return view;
}
/**
* Initialize some basic data
*/
private void initData() {
if (mListDataViewPage != null) {
();
mListDataViewPage = null;
} else {
mListDataViewPage = new ArrayList<>();
// In order to achieve infinite loop, the first two pictures are repeated int[] resource = new int[]{
.test_viewpager_homepage_4, .test_viewpager_homepage_1, .test_viewpager_homepage_2, R
.drawable.test_viewpager_homepage_3, .test_viewpager_homepage_4,.test_viewpager_homepage_1,};
for (int i = 0; i < 6; i++) {
WeakReference<Bitmap> bitmao = new WeakReference<Bitmap>(BitmapFactory
.decodeResource(getResources(), resource[i]));
ImageView imageView = new ImageView(context);
(());
(.FIT_XY);
(imageView);
}
}
}
/**
* Initialize the bottom push information recommendation bar to guide small dot View
*/
private void initDots() {
dotImages = new ImageView[()];
for (int i = 0; i < (); i++) {
dotImages[i] = (ImageView) ll_dots_homepage_top.getChildAt(i);
dotImages[i].setEnabled(false);
}
**//Set the first small dot to highlight, the first offset here is 1, not 0 dotImages[1].setEnabled(true);
dotCurrentIndex = 1;**
}
/**
* initView
*/
private void initView() {
findLayout();
findView();
}
/**
* findLayout
*/
private void findLayout() {
ll_dots_homepage_top = (LinearLayout) (.ll_dots_homepage_top);
initDots();
}
/**
* Initialize the control
*/
private void findView() {
mViewPager = (ViewPager) (.vp_homepage)；
mViewPagerAdapter = new MyViewPagerAdapter(mListDataViewPage);
mOnPageChangeListener = new MyOnPageChangeListener();
(mViewPagerAdapter);
(mOnPageChangeListener);
**(1,false); //The second picture is selected by default** }
private class MyOnPageChangeListener implements {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position < 0 || position > () || position == dotCurrentIndex) {
return;
}
if ( () > 1) { //If it is more than 1, it will be redirected in a loop if ( position < 1) { //Before the first position, jump to the end (N) position = 4;
(position,false);
} else if ( position > 4) { //After the last position, jump to the first position (1) position = 1;
(position,false); //false: No animation of the jump process is displayed
}else {
dotImages[dotCurrentIndex].setEnabled(false);
dotImages[position].setEnabled(true);
dotCurrentIndex = position;
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
Pay attention to the bold code in the code. The initial dot is selected and the ViewPager position is selected.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.