Android

슬라이더 무한 + 자동 스크롤 + Indicator 연동 (ViewPager)

그란. 2017. 11. 20. 10:28

1. ViewPager 자동스크롤 -  터치하는 도중에는 스크롤 멈춤 


2. FragmentAdapter ViewPager + BottomNavigationView 구조에서의 문제점 -> 슬라이더가 먹통이 되는 현상

(0번 Fragment에 슬라이드를 구현한후 2번 Fragment의 액티비티를 갔다 오면 문제생김) 



1. 라이브러리 추가

compile ('cn.trinea.android.view.autoscrollviewpager:android-auto-scroll-view-pager:1.1.2') {
exclude module: 'support-v4'
}



2. ViewPagerAdapter의 destroyItem 활성화 ( 원래는 비활성화해놓는게 자원측면에서 좋은데 슬라이드 먹통이 되는 현상때문에 켜놓는다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
 
    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }
    @Override
    public Fragment getItem(int position) {
 
        return mFragmentList.get(position);
 
    }
 
    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }
 
    @Override
    public int getCount() {
        return mFragmentList.size();
    }
 
    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }
}
cs



3. 슬라이드용 ViewPager 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class ImageSliderAdapter extends PagerAdapter {
 
    Context mContext;
    LayoutInflater mLayoutInflater;
    ArrayList<String> mResources;
 
    public ImageSliderAdapter(Context context, ArrayList<String> mResources) {
        mContext = context;
        this.mResources = mResources;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
 
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }
    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }
 
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((LinearLayout) object);
    }
 
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
 
        View itemView = mLayoutInflater.inflate(R.layout.viewpager_image, container, false);
 
        int realPos=position%mResources.size();
        ImageView imageView = (ImageView) itemView.findViewById(R.id.img_viewpager_childimage);
        Glide.with(mContext).load(mResources.get(realPos)).placeholder(R.drawable.loadingimage).error(R.drawable.loadingimage).into(imageView);
 
        container.addView(itemView,0);
 
        return itemView;
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
         container.removeView((LinearLayout) object);
    }
 
}
cs



4. ViewPager xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <RelativeLayout
            android:id="@+id/viewPagerIndicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="center"
            android:gravity="center">
 
            <cn.trinea.android.view.autoscrollviewpager.AutoScrollViewPager
                android:id="@+id/homeslider"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:fitsSystemWindows="true"
                tools:listitem="@layout/viewpager_image" />
 
            <LinearLayout
                android:id="@+id/viewPagerCountDots"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:orientation="horizontal"
                android:paddingBottom="10dp" />
        </RelativeLayout>
cs



5. FragmentHome 

1
2
3
4
5
6
7
8
    private AutoScrollViewPager homeslider;    
    private LinearLayout pager_indicator;
    private int dotsCount,currentPosition;
    private ImageView[] dots;
    private ImageSliderAdapter imageSliderAdapter;
        
    
 
cs





6. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
          imageSliderAdapter = new ImageSliderAdapter(getContext(), images);
    
             images.add(snapshot.getValue().toString()); // image 추가
    
         homeslider.setAdapter(imageSliderAdapter);
 
 
 
 
        //setUiPageViewController
        dotsCount = images.size();
        dots = new ImageView[dotsCount];
 
        for (int i = 0; i < dotsCount; i++) {
            dots[i] = new ImageView(getActivity());
            dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot));
 
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
            );
            params.setMargins(4040);
 
            pager_indicator.addView(dots[i], params);
        }
 
        dots[0].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));
 
 
 
        homeslider.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
 
            @Override
            public void onPageSelected(int position) {
                currentPosition = position;
                for (int i = 0; i < dotsCount; i++) {
                    dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot));
 
                }
                if (dots != null) {
                    dots[currentPosition % 5].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));
                }
            }
 
            @Override
            public void onPageScrollStateChanged(int state) {
 
            }
        });
cs


7. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
   @Override
    public void onResume() {
        super.onResume();
 
        imageSliderAdapter.notifyDataSetChanged();
        homeslider.setInterval(5000);
        homeslider.startAutoScroll(1000);
    }
 
    @Override
    public void onPause() {
        super.onPause();
        homeslider.stopAutoScroll();
    }
cs



8. xml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
nonselected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">
 
    <size android:height="6dip" android:width="6dip"/>
    <solid android:color="@color/lightgrey"/>
</shape>
 
 
selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">
 
    <size android:height="12dip" android:width="12dip"/>
    <solid android:color="#65B5A5"/>
</shape>
cs