νƒœκ·Έ 보관물: viewpagerindicator

viewpagerindicator

ν•˜λ‹¨ μ μ΄μžˆλŠ” Android ViewPager 이처럼 ViewPager에 3 개의 μ•„λž˜μͺ½ 점을 μΆ”κ°€ν•˜κ³ 

이처럼 ViewPager에 3 개의 μ•„λž˜μͺ½ 점을 μΆ”κ°€ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

ν•˜λ‹¨ 점 3 개
ν•˜λ‹¨ 점 3 개
ν•˜λ‹¨ 점 3 개

FragmentActivityλ₯Ό μ‚¬μš©ν•˜κ³  라이브러리 ViewPagerλ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.



λ‹΅λ³€

κ·Έλ ‡κ²Œ λ§Žμ€ μ½”λ“œκ°€ ν•„μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

viewpagerwith 만 μ‚¬μš©ν•˜λ©΄ μ½”λ”©ν•˜μ§€ μ•Šκ³ λ„μ΄ λͺ¨λ“  μž‘μ—…μ„ μˆ˜ν–‰ ν•  수 μžˆμŠ΅λ‹ˆλ‹€ tablayout.

κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ :

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <android.support.v4.view.ViewPager
       android:id="@+id/pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </android.support.v4.view.ViewPager>
   <android.support.design.widget.TabLayout
       android:id="@+id/tabDots"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabBackground="@drawable/tab_selector"
       app:tabGravity="center"
       app:tabIndicatorHeight="0dp"/>
</RelativeLayout>

λ‹€μŒκ³Ό 같이 UI μš”μ†Œ λΉ„ν™œμ„± λ˜λŠ” λ‹¨νŽΈμ„ μ—°κ²°ν•˜μ‹­μ‹œμ˜€.

μžλ°” μ½”λ“œ :

mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);

그게 λ‹€μ•Ό, λ„ˆλŠ” μž˜κ°€.

λ“œλ‘œμ–΄ λΈ” 폴더 에 λ‹€μŒ xml λ¦¬μ†ŒμŠ€ νŒŒμΌμ„ λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€.

tab_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:innerRadius="0dp"
    android:shape="oval"
    android:thickness="4dp"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
</shape>

tab_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadius="0dp"
            android:shape="oval"
            android:thickness="2dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
    </shape>

tab_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_indicator_selected"
          android:state_selected="true"/>

    <item android:drawable="@drawable/tab_indicator_default"/>
</selector>

λ‚˜λ§ŒνΌ 게으λ₯Έ λŠλ‚Œ? κΈ€μŽ„, μœ„μ˜ λͺ¨λ“  μ½”λ“œλŠ” 라이브러리둜 λ³€ν™˜λ©λ‹ˆλ‹€!
μ‚¬μš©λ²•
gradle
implementation 'com.chabbal:slidingdotsplash:1.0.2'
에 λ‹€μŒμ„ μΆ”κ°€ν•˜μ‹­μ‹œμ˜€. Activity λ˜λŠ” Fragment λ ˆμ΄μ•„μ›ƒμ— λ‹€μŒμ„ μΆ”κ°€ν•˜μ‹­μ‹œμ˜€.

<com.chabbal.slidingdotsplash.SlidingSplashView
        android:id="@+id/splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:imageResources="@array/img_id_arr"/>

strings.xml예λ₯Ό λ“€μ–΄ μ •μˆ˜ λ°°μ—΄ λ§Œλ“€κΈ°

<integer-array name="img_id_arr">
   <item>@drawable/img1</item>
   <item>@drawable/img2</item>
   <item>@drawable/img3</item>
   <item>@drawable/img4</item>
</integer-array>

λλ‚œ!
μΆ”κ°€ μ²­μ·¨ν•˜κΈ° μœ„ν•΄ νŽ˜μ΄μ§€ λ³€κ²½ μ‚¬μš© addOnPageChangeListener(listener);
Githubμ—μ„œμ˜ 링크λ₯Ό .


λ‹΅λ³€

λ‚΄ 수제 μ†”λ£¨μ…˜ :

λ ˆμ΄μ•„μ›ƒμ—μ„œ :

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dots"
        />

그리고 ν™œλ™μ—μ„œ

private final static int NUM_PAGES = 5;
private ViewPager mViewPager;
private List<ImageView> dots;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...
    addDots();
}

public void addDots() {
    dots = new ArrayList<>();
    LinearLayout dotsLayout = (LinearLayout)findViewById(R.id.dots);

    for(int i = 0; i < NUM_PAGES; i++) {
        ImageView dot = new ImageView(this);
        dot.setImageDrawable(getResources().getDrawable(R.drawable.pager_dot_not_selected));

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );
        dotsLayout.addView(dot, params);

        dots.add(dot);
    }

    mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            selectDot(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

public void selectDot(int idx) {
    Resources res = getResources();
    for(int i = 0; i < NUM_PAGES; i++) {
        int drawableId = (i==idx)?(R.drawable.pager_dot_selected):(R.drawable.pager_dot_not_selected);
        Drawable drawable = res.getDrawable(drawableId);
        dots.get(i).setImageDrawable(drawable);
    }
}

λ‹΅λ³€

viewPager.addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {

                switch (position) {
    case 0:
        img_page1.setImageResource(R.drawable.dot_selected);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 1:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot_selected);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 2:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot_selected);
        img_page4.setImageResource(R.drawable.dot);
        break;

    case 3:
        img_page1.setImageResource(R.drawable.dot);
        img_page2.setImageResource(R.drawable.dot);
        img_page3.setImageResource(R.drawable.dot);
        img_page4.setImageResource(R.drawable.dot_selected);
        break;

    default:
        break;
    }


            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });

λ‹΅λ³€

ViewPagerμ—μ„œ νŽ˜μ΄μ§€ ν‘œμ‹œκΈ°μ˜ ν•„μš”μ„±μ„ ν•΄κ²°ν•˜κΈ° μœ„ν•΄ 라이브러리λ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. λ‚΄ λΌμ΄λΈŒλŸ¬λ¦¬μ—λŠ” DotIndicatorλΌλŠ” λ·°κ°€ μžˆμŠ΅λ‹ˆλ‹€. λ‚΄ 라이브러리λ₯Ό μ‚¬μš©ν•˜λ €λ©΄ compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'gradle λΉŒλ“œ νŒŒμΌμ— μΆ”κ°€ ν•˜μ‹­μ‹œμ˜€.

λ‹€μŒμ„ μΆ”κ°€ν•˜μ—¬λ³΄κΈ°λ₯Ό λ ˆμ΄μ•„μ›ƒμ— μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    <com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:numberOfDots=YOUR_INT_HERE
            app:selectedDotIndex=YOUR_INT_HERE/>

μœ„ μ½”λ“œλŠ” Google Launcher ν™ˆ ν™”λ©΄μ—μ„œ 점의 κΈ°λŠ₯을 μ™„λ²½ν•˜κ²Œ λ³΅μ œν•˜μ§€λ§Œ μΆ”κ°€λ‘œ μ‚¬μš©μž μ •μ˜ν•˜λ €λ©΄ λ‹€μŒ 속성을 μΆ”κ°€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • app:unselectedDotDiameter및 app:selectedDotDiameterλ„νŠΈμ˜ 직경을 μ„€μ •ν•©λ‹ˆλ‹€
  • app:unselectedDotColorκ³Ό app:selectedDotColor점의 색상을 μ„€μ •ν•©λ‹ˆλ‹€
  • app:spacingBetweenDots 점 μ‚¬μ΄μ˜ 거리λ₯Ό λ³€κ²½
  • app:dotTransitionDuration μž‘μ€ κ²ƒμ—μ„œ 큰 κ²ƒμœΌλ‘œ (그리고 λ’€λ‘œ) λ³€ν™”λ₯Ό μ• λ‹ˆλ©”μ΄μ…˜ν•˜λŠ” μ‹œκ°„μ„ μ„€μ •ν•˜κΈ° μœ„ν•΄

λ˜ν•œ λ‹€μŒμ„ μ‚¬μš©ν•˜μ—¬ ν”„λ‘œκ·Έλž˜λ° λ°©μ‹μœΌλ‘œλ³΄κΈ°λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

DotIndicator indicator = new DotIndicator(context);

속성과 μœ μ‚¬ν•œ 속성을 μˆ˜μ •ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆλ‹€. μ„ νƒλœ λ‹€λ₯Έ νŽ˜μ΄μ§€λ₯Ό ν‘œμ‹œν•˜λ„λ‘ ν‘œμ‹œκΈ°λ₯Ό μ—…λ°μ΄νŠΈν•˜λ €λ©΄ indicator.setSelectedItem(int, true)λ‚΄λΆ€μ—μ„œ λ©”μ†Œλ“œ λ₯Ό ν˜ΈμΆœν•˜μ‹­μ‹œμ˜€ ViewPager.OnPageChangeListener.onPageSelected(int).

μ‚¬μš©μ€‘μΈ μ˜ˆλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

여기에 이미지 μ„€λͺ…을 μž…λ ₯ν•˜μ‹­μ‹œμ˜€

관심이 μžˆμœΌμ‹œλ©΄ λΌμ΄λΈŒλŸ¬λ¦¬λŠ” μ‹€μ œλ‘œ μœ„μ˜ gif에 ν‘œμ‹œλœ 것과 같은 μ†Œκ°œ 화면을 λ§Œλ“€λ„λ‘ μ„€κ³„λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

Github μ†ŒμŠ€ : https://github.com/MatthewTamlin/SlidingIntroScreen


λ‹΅λ³€

ViewPagerIndicator 2012 λ…„ 이후 μ—…λ°μ΄νŠΈλ˜μ§€ μ•Šμ•˜μœΌλ©° μˆ˜μ •λ˜μ§€ μ•Šμ€ λͺ‡ κ°€μ§€ 버그가 μžˆμŠ΅λ‹ˆλ‹€.

λ§ˆμ§€λ§‰ 으둜이 라이트 λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œμ— λŒ€ν•œ λ©‹μ§„ 점을 ν‘œμ‹œν•˜λŠ” λŒ€μ•ˆμ„ μ°Ύμ•˜ viewpagerμŠ΅λ‹ˆλ‹€. λ§ν¬λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

https://github.com/ongakuer/CircleIndicator

κ΅¬ν˜„ν•˜κΈ° 쉽닀!


λ‹΅λ³€

μœ„μ˜ λ¬Έμ œμ— λŒ€ν•œ κ°„λ‹¨ν•œ 해결책을 κ²Œμ‹œν•˜λ €κ³  μƒκ°ν–ˆμœΌλ©° ν‘œμ‹œ ν•œ μˆ«μžλŠ” ν•˜λ‚˜μ˜ λ³€μˆ˜ κ°’λ§Œ λ³€κ²½ν•˜μ—¬ λ™μ μœΌλ‘œ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€ dotCounts=x.

1) β€œitem_selectedβ€λΌλŠ” νŽ˜μ΄μ§€ 선택 ν‘œμ‹œκΈ°μ˜ λ“œλ‘œμ–΄ λΈ” 폴더에 xml νŒŒμΌμ„ μž‘μ„±ν•˜μ‹­μ‹œμ˜€.

<?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="8dp" android:width="8dp"/>
    <solid android:color="@color/image_item_selected_for_dots"/>
</shape>

2) β€œitem_unselectedβ€λΌλŠ” μ„ νƒλ˜μ§€ μ•Šμ€ ν‘œμ‹œκΈ°μ— λŒ€ν•΄ ν•˜λ‚˜ μ΄μƒμ˜ xml νŒŒμΌμ„ μž‘μ„±ν•˜μ‹­μ‹œμ˜€.

<?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="8dp" android:width="8dp"/>

    <solid android:color="@color/image_item_unselected_for_dots"/>
</shape>

3) 이제 viewPagerλ ˆμ΄μ•„μ›ƒ XML νŒŒμΌμ—μ„œ μ•„λž˜ 에 ν‘œμ‹œκΈ°λ₯Ό ν‘œμ‹œν•˜λ €λŠ” μœ„μΉ˜μ— μ½”λ“œ 의이 뢀뢄을 μΆ”κ°€ ν•˜μ‹­μ‹œμ˜€.

 <RelativeLayout
        android:id="@+id/viewPagerIndicator"
        android:layout_width="match_parent"
        android:layout_below="@+id/banner_pager"
        android:layout_height="wrap_content"
        android:gravity="center">

        <LinearLayout
            android:id="@+id/viewPagerCountDots"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:orientation="horizontal" />
        </RelativeLayout>

4) λ ˆμ΄μ•„μ›ƒμ΄ νŒ½μ°½λ˜κ±°λ‚˜ μœ„μ˜ xml 파일이 κ΄€λ ¨λœ ν™œλ™ 파일 파일 μœ„μ—μ΄ κΈ°λŠ₯을 μΆ”κ°€ν•˜μ‹­μ‹œμ˜€.

private int dotsCount=5;    //No of tabs or images
private ImageView[] dots;
LinearLayout linearLayout;

private void drawPageSelectionIndicators(int mPosition){
    if(linearLayout!=null) {
        linearLayout.removeAllViews();
    }
    linearLayout=(LinearLayout)findViewById(R.id.viewPagerCountDots);
    dots = new ImageView[dotsCount];
    for (int i = 0; i < dotsCount; i++) {
        dots[i] = new ImageView(context);
        if(i==mPosition)
            dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_selected));
        else
            dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_unselected));

        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );

        params.setMargins(4, 0, 4, 0);
        linearLayout.addView(dots[i], params);
    }
}

5) λ§ˆμ§€λ§‰μœΌλ‘œ onCreate λ©”μ†Œλ“œμ—μ„œ λ‹€μŒ μ½”λ“œλ₯Ό μΆ”κ°€ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ μ°Έμ‘°ν•˜κ³  νŽ˜μ΄μ§€ 선택 μœ„μΉ˜λ₯Ό μ²˜λ¦¬ν•˜μ‹­μ‹œμ˜€.

drawPageSelectionIndicators(0);
mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        drawPageSelectionIndicators(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

λ‹΅λ³€

당신은 제이크 μ™€νŠΌμ˜ 라이브러리λ₯Ό μ‹œλ„ ν•  수 μžˆμŠ΅λ‹ˆλ‹€ – https://github.com/JakeWharton/Android-ViewPagerIndicator