Android ViewPager ที่มีจุดด้านล่าง


183

ฉันต้องการเพิ่มจุดล่าง 3 จุดลงใน ViewPager ของฉันเช่นนี้

3 จุดด้านล่าง 3 จุดด้านล่าง 3 จุดด้านล่าง

ฉันใช้ FragmentActivity และไลบรารีการสนับสนุน ViewPager


3
ฉันต้องเพิ่มจุดไม่ใช่แท็บ (เช่นตัวเรียกใช้ Nexus 5)
Kfir Guy

1
ลองดูโซลูชันของฉัน: stackoverflow.com/a/38459310/4631935
RediOne1

คำตอบ:


356

ไม่จำเป็นต้องใช้รหัสมาก

คุณสามารถทำทุกสิ่งนี้โดยการเข้ารหัสมากโดยใช้เฉพาะกับviewpagertablayout

เค้าโครงหลักของคุณ:

<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 ที่ไม่มีกิจกรรมหรือส่วนต่างๆดังนี้:

รหัส Java:

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

เพียงเท่านี้คุณก็พร้อมที่จะไป

คุณจะต้องสร้างไฟล์ทรัพยากร xml ต่อไปนี้ในโฟลเดอร์drawable

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>

รู้สึกขี้เกียจเหมือนฉันหรือเปล่า รหัสข้างต้นทั้งหมดจะถูกแปลงเป็นห้องสมุด! การใช้งาน เพิ่มสิ่งต่อไปนี้ในการไล่ระดับสีของคุณ: implementation 'com.chabbal:slidingdotsplash:1.0.2' เพิ่มสิ่งต่อไปนี้ในรูปแบบกิจกรรมหรือส่วนของคุณ

<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 การเชื่อมโยง


3
ฉัน upvoted แล้วก่อนที่ฉันจะถามคำถามเพราะมันช่วยฉันได้มาก แต่ตอนนี้ฉันหวังว่าฉันสามารถ apvote +2 หรือ +100 :) เพราะการเพิ่ม onPageChangeListener ทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน! และเพื่อให้ชัดเจนสำหรับทุกคนที่อาจใช้สิ่งนี้คุณต้องทำการอัพเดตของคุณบนการโทรกลับบนเพจที่เลือกเท่านั้นการเพิ่มการอัปเดตในการโทรกลับบนเพจสแคลชที่ทำให้ยุ่งมันจะเริ่มอัปเดตทันทีที่คุณเริ่มเลื่อน มองเห็นได้ดี!
Mohamed Hamdaoui

1
ทำไมเราต้องใช้ TabLayout
winklerrr

14
คุณต้องการใช้com.google.android.material.tabs.TabLayoutในเวอร์ชันที่ใหม่กว่า
schlenger

2
อัปเดต: ใช้งานได้ แต่คุณควรใช้ส่วนประกอบใหม่: androidx.viewpager.widget.ViewPager และ com.google.android.material.tabs.TabLayout
dreinoso

2
ดังกล่าวข้างต้น XML drawable ringดูแปลกจนกว่าฉันจะเปลี่ยนรูปร่างไป ดูเหมือนว่าแหวนจะถูกใช้ในห้องสมุด scrolldotsplash แทนรูปไข่
Katie

39

โซลูชันที่ทำด้วยมือของฉัน:

ในรูปแบบ:

<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);
    }
}

3
ทำไมต้องใช้องค์ประกอบหนักLayoutเพื่อใส่จุด? ใช้Viewแทน
Apurva

2
ฉันคิดว่าเลย์เอาต์แบบเชิงเส้นคือมันจะจัดกึ่งกลางและจัดกลุ่มจุดต่าง ๆ
ShawnV

38
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) {

            }
        });

18
setOnPageChangedListener()เลิก !! ใช้addOnPageChangedListener()ตอนนี้
Apurva

12
นี่ไม่ใช่วิธีการแก้ปัญหาที่ยอดเยี่ยมเพราะคุณต้องรู้จำนวนหน้าที่คุณใช้ ทันทีที่คุณเพิ่มหรือลบหน้าคุณกำลังมีปัญหา
FrostRocket

3
อย่าต่อสู้กับกรอบ Android มีเครื่องมือสำหรับการทำเช่นนี้เป็น TabLayout ไม่มีเหตุผลที่จะพลิกโฉมพวงมาลัยได้
kike

3
ลดความซับซ้อนลงในสิ่งนี้: โมฆะส่วนตัว setDotSelection (ดัชนี int) {dot1.setImageResource (ดัชนี == 0? R.drawable.circle_selected: R.drawable.circle); dot2.setImageResource (ดัชนี == 1? R.drawable.circle_selected: R.drawable.circle); dot3.setImageResource (ดัชนี == 2? R.drawable.circle_selected: R.drawable.circle); dot4.setImageResource (ดัชนี == 3? R.drawable.circle_selected: R.drawable.circle); dot5.setImageResource (ดัชนี == 4? R.drawable.circle_selected: R.drawable.circle); }
Duna

31

ฉันสร้างห้องสมุดเพื่อตอบสนองความต้องการตัวบ่งชี้หน้าเว็บใน 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


มีข้อผิดพลาดที่ตัวบ่งชี้ setSelectedItem (ตำแหน่งจริง) IndexOutOfBoundsException
Dixit Panchal

เวอร์ชันไหน ฉันคิดว่าฉันได้แก้ไขใน 3.0.1 แล้วคุณมีค่าอะไรสำหรับ indicator.size () และตำแหน่ง?
Helios

ห้องสมุดที่ยอดเยี่ยม! อย่างไรก็ตามมีวิธีที่ยอดเยี่ยมกว่าในการอัปเดตรายการที่เลือกและหมายเลขของรายการในเวลาเดียวกันหรือไม่ การสั่งซื้อจะเปลี่ยนไปมิฉะนั้นคุณจะส่งข้อยกเว้น IndexOutOfBounds ขึ้นอยู่กับว่าคำสั่งใดใหญ่กว่า ดูส่วนสำคัญนี้
vsp

@vsp DotIndicator ใช้อินเตอร์เฟซ SelectionIndicator ซึ่งหมายความว่าถ้ามีสองวิธีที่มีประโยชน์ที่สามารถแก้ปัญหาของคุณ: และint getNumberOfItems() void setNumberOfItems()แทนที่จะจับข้อยกเว้นคุณสามารถทำอะไรเช่นนี้gist.github.com/MatthewTamlin/761c7338d271af29526edc7859480aef
Helios

สำหรับทุกคนที่ไม่ได้ติดตามบทสรุปสาระสำคัญมีข้อผิดพลาดที่ได้รับการแก้ไขแล้ว 3.0.2 เป็นรุ่นล่าสุด ณ ขณะนี้
Helios

18

ViewPagerIndicator ยังไม่ได้รับการอัปเดตตั้งแต่ 2555 และมีข้อบกพร่องหลายอย่างที่ไม่เคยได้รับการแก้ไข

ในที่สุดฉันก็พบทางเลือกกับไลบรารี่ไลต์ที่แสดงจุดที่น่าสนใจสำหรับviewpagerนี่คือลิงค์:

https://github.com/ongakuer/CircleIndicator

ใช้งานง่าย!


16

ฉันคิดว่าการโพสต์วิธีแก้ปัญหาที่ง่ายกว่าสำหรับปัญหาข้างต้นและหมายเลขตัวบ่งชี้สามารถเปลี่ยนแปลงได้แบบไดนามิกโดยการเปลี่ยนค่าตัวแปรเพียงค่าเดียวdotCounts=xที่ฉันได้ทำไปเช่นนี้

1) สร้างไฟล์ xml ในโฟลเดอร์ drawable สำหรับตัวบ่งชี้ที่เลือกหน้าชื่อ "item_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="8dp" android:width="8dp"/>
    <solid android:color="@color/image_item_selected_for_dots"/>
</shape>

2) สร้างไฟล์ xml อีกหนึ่งไฟล์สำหรับตัวบ่งชี้ที่ไม่ได้เลือกชื่อ "item_unselected"

<?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) ตอนนี้เพิ่มเพิ่มส่วนนี้ของรหัสในสถานที่ที่คุณต้องการแสดงตัวบ่งชี้สำหรับ ex ด้านล่าง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) {
    }
});

13

คุณสามารถลองใช้ห้องสมุด Jake Wharton - https://github.com/JakeWharton/Android-ViewPagerIndicator


ฉันจะเพิ่มจุดได้อย่างไรไม่ใช่แท็บ (เช่นตัวเรียกใช้ Nexus 5)
Kfir Guy

@KfirGuy พวกเขาถูกเรียกว่าเป็นตัวบ่งชี้ คุณสามารถทำได้โดยใช้ห้องสมุดที่ฉันได้กล่าวไว้ข้างต้น นอกจากนี้คุณสามารถดูได้ที่นี่ - play.google.com/store/apps/…
Joel Fernandes

@JoelFernandes ดูเหมือนว่าแอพนั้นไม่มีให้บริการในทุกประเทศ
34m0

9

ต่อไปนี้เป็นวิธีแก้ปัญหาที่เสนอของฉัน

  • เนื่องจากเราจำเป็นต้องแสดงเฉพาะบางภาพในเพจเจอร์มุมมองเพื่อหลีกเลี่ยงการใช้ชิ้นส่วนที่ยุ่งยาก
    • ใช้งานตัวบ่งชี้มุมมองหน้า (จุดด้านล่างไม่มีไลบรารี่หรือปลั๊กอินเสริม)
    • ในการสัมผัสของตัวบ่งชี้หน้ามุมมอง (จุด) ยังนำทางหน้าเกิดขึ้น
    • โปรดอย่าลืมเพิ่มภาพของคุณเองในแหล่งข้อมูล
    • รู้สึกอิสระที่จะแสดงความคิดเห็นและปรับปรุงให้ดีขึ้น

A) การติดตามคือ activity_main.xml ของฉัน

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="schneider.carouseladventure.MainActivity">

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:id="@+id/viewPagerIndicator"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dp"
        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>


</RelativeLayout>

B) pager_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView" />
</LinearLayout>

C) MainActivity.java

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener {

    int[] mResources = {R.drawable.nature1, R.drawable.nature2, R.drawable.nature3, R.drawable.nature4,
            R.drawable.nature5, R.drawable.nature6
    };

    ViewPager mViewPager;
    private CustomPagerAdapter mAdapter;
    private LinearLayout pager_indicator;
    private int dotsCount;
    private ImageView[] dots;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        pager_indicator = (LinearLayout) findViewById(R.id.viewPagerCountDots);
        mAdapter = new CustomPagerAdapter(this, mResources);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mViewPager.setOnPageChangeListener(this);

        setPageViewIndicator();

    }

    private void setPageViewIndicator() {

        Log.d("###setPageViewIndicator", " : called");
        dotsCount = mAdapter.getCount();
        dots = new ImageView[dotsCount];

        for (int i = 0; i < dotsCount; i++) {
            dots[i] = new ImageView(this);
            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(4, 0, 4, 0);

            final int presentPosition = i;
            dots[presentPosition].setOnTouchListener(new View.OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    mViewPager.setCurrentItem(presentPosition);
                    return true;
                }

            });


            pager_indicator.addView(dots[i], params);
        }

        dots[0].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));
    }

    @Override
    public void onClick(View v) {

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

        Log.d("###onPageSelected, pos ", String.valueOf(position));
        for (int i = 0; i < dotsCount; i++) {
            dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot));
        }

        dots[position].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot));

        if (position + 1 == dotsCount) {

        } else {

        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

D) CustomPagerAdapter.java

 import android.content.Context;
    import android.support.v4.view.PagerAdapter;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.LinearLayout;

    public class CustomPagerAdapter extends PagerAdapter {
        private Context mContext;
        LayoutInflater mLayoutInflater;
        private int[] mResources;

        public CustomPagerAdapter(Context context, int[] resources) {
            mContext = context;
            mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            mResources = resources;
        }

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

            View itemView = mLayoutInflater.inflate(R.layout.pager_item,container,false);
            ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
            imageView.setImageResource(mResources[position]);
           /* LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(950, 950);
            imageView.setLayoutParams(layoutParams);*/
            container.addView(itemView);
            return itemView;
        }

        @Override
        public void destroyItem(ViewGroup collection, int position, Object view) {
            collection.removeView((View) view);
        }

        @Override
        public int getCount() {
            return mResources.length;
        }

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

E) selecteditem_dot.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="12dip" android:width="12dip"/>

    <solid android:color="#7e7e7e"/>
</shape>

F) nonselecteditem_dot.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="12dip" android:width="12dip"/>        
        <solid android:color="#d3d3d3"/>
    </shape>

ภาพแรก

ป้อนคำอธิบายรูปภาพที่นี่


ฉันใช้สิ่งนี้ แต่ในจุดเลื่อน viewpager จะไม่เปลี่ยนแปลง
Aditya Vyas-Lakhan

1
นี่คือคำตอบที่ดีที่สุด
Sandeep Londhe

1

หากใครต้องการสร้างviewPagerด้วยภาพขนาดย่อเป็นตัวบ่งชี้การใช้ไลบรารีนี้อาจเป็นตัวเลือก: ThumbIndicatorสำหรับ viewPager ที่ทำงานกับลิงค์รูปภาพเป็นทรัพยากร


0

นี่คือวิธีที่ฉันทำสิ่งนี้ค่อนข้างคล้ายกับโซลูชันด้านบน เพียงให้แน่ใจว่าคุณเรียกloadDots ()วิธีการหลังจากที่ภาพทั้งหมดจะถูกดาวน์โหลด

    private int dotsCount;
    private TextView dotsTextView[];

    private void setupAdapter() {
        adapter = new SomeAdapter(getContext(), images);
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
    }

    private final ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < dotsCount; i++)
                dotsTextView[i].setTextColor(Color.GRAY);

            dotsTextView[position].setTextColor(Color.WHITE);
        }

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

    protected void loadDots() {
        dotsCount = adapter.getCount();
        dotsTextView = new TextView[dotsCount];
        for (int i = 0; i < dotsCount; i++) {
            dotsTextView[i] = new TextView(getContext());
            dotsTextView[i].setText(R.string.dot);
            dotsTextView[i].setTextSize(45);
            dotsTextView[i].setTypeface(null, Typeface.BOLD);
            dotsTextView[i].setTextColor(android.graphics.Color.GRAY);
            mDotsLayout.addView(dotsTextView[i]);
        }
        dotsTextView[0].setTextColor(Color.WHITE);
    }

XML

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="#00000000"/>


    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/introImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:id="@+id/image_count"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        android:gravity="center|bottom"
        android:orientation="horizontal"/>
</FrameLayout>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.