web-dev-qa-db-ger.com

Android ViewPager mit unteren Punkten

Ich möchte meinem ViewPager wie folgt drei untere Punkte hinzufügen.

3 bottom dots3 bottom dots3 bottom dots

Ich benutze FragmentActivity und unterstütze die Bibliothek ViewPager.

158
Kfir Guy

So viel Code braucht man nicht.

Sie können all diese Dinge tun, ohne so viel zu programmieren, indem Sie nur viewpager mit tablayout.

Ihr Hauptlayout:

<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>

Schließen Sie die Inaktivität oder das Fragment Ihrer Benutzeroberflächenelemente wie folgt an:

Java-Code:

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

Das war's, du bist gut zu gehen.

Sie müssen die folgende XML-Ressourcendatei im Ordner drawable erstellen.

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>

Fühlen Sie sich so faul wie ich? Nun, der gesamte obige Code wird in eine Bibliothek konvertiert! Verwendung Fügen Sie Ihrem Gradle Folgendes hinzu: implementation 'com.chabbal:slidingdotsplash:1.0.2' Fügen Sie Ihrem Aktivitäts- oder Fragment-Layout Folgendes hinzu.

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

Erstellen Sie ein ganzzahliges Array in strings.xml, Z.

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

Done ! Extra um Seitenänderungen anzuhören, benutze addOnPageChangeListener(listener); Github link .

314
Juni
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) {

            }
        });
37
kapil thadani

Meine handgemachte Lösung:

Im Layout:

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

Und in der Aktivität

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

Ich habe eine Bibliothek erstellt, um der Notwendigkeit einer Seitenanzeige in einem ViewPager Rechnung zu tragen. Meine Bibliothek enthält eine Ansicht namens DotIndicator. Um meine Bibliothek zu verwenden, fügen Sie compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0' Zu Ihrer Gradle Build-Datei hinzu.

Die Ansicht kann zu Ihrem Layout hinzugefügt werden, indem Sie Folgendes hinzufügen:

    <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/>

Der obige Code gibt die Funktionalität der Punkte auf dem Google Launcher-Startbildschirm perfekt wieder. Wenn Sie ihn jedoch weiter anpassen möchten, können die folgenden Attribute hinzugefügt werden:

  • app:unselectedDotDiameter Und app:selectedDotDiameter, Um die Durchmesser der Punkte einzustellen
  • app:unselectedDotColor Und app:selectedDotColor, Um die Farben der Punkte festzulegen
  • app:spacingBetweenDots, Um den Abstand zwischen den Punkten zu ändern
  • app:dotTransitionDuration, Um die Zeit für die Animation des Wechsels von klein nach groß (und zurück) festzulegen.

Darüber hinaus kann die Ansicht programmgesteuert erstellt werden mit:

DotIndicator indicator = new DotIndicator(context);

Es gibt Methoden zum Ändern der Eigenschaften, ähnlich wie bei den Attributen. Um den Indikator so zu aktualisieren, dass eine andere Seite als ausgewählt angezeigt wird, rufen Sie einfach die Methode indicator.setSelectedItem(int, true) von innen ViewPager.OnPageChangeListener.onPageSelected(int) auf.

Hier ist ein Beispiel dafür:

enter image description here

Wenn Sie interessiert sind, wurde die Bibliothek tatsächlich so konzipiert, dass sie Intro-Bildschirme wie die im obigen GIF gezeigte erstellt.

Github-Quelle hier verfügbar: https://github.com/MatthewTamlin/SlidingIntroScreen

29
Helios

ViewPagerIndicator wurde seit 2012 nicht mehr aktualisiert und hat einige Fehler, die nie behoben wurden.

Mit dieser Lichtbibliothek, die schöne Punkte für viewpager anzeigt, habe ich endlich eine Alternative gefunden. Hier ist der Link:

https://github.com/ongakuer/CircleIndicator

Einfach zu implementieren!

14
Yoann Hercouet

Ich dachte daran, eine einfachere Lösung für das oben genannte Problem zu veröffentlichen, und Indikatornummern können dynamisch geändert werden, indem nur ein Variablenwert dotCounts=x Geändert wird.

1) Erstellen Sie eine XML-Datei mit dem Namen "item_selected" im Ordner "drawable" für den Indikator "page 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) Erstellen Sie eine weitere XML-Datei für den nicht ausgewählten Indikator "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) Fügen Sie nun diesen Teil des Codes an der Stelle hinzu, an der Sie die Indikatoren für ex unterhalb von viewPager in Ihrer Layout-XML-Datei anzeigen möchten.

 <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) Fügen Sie diese Funktion zu Ihrer Aktivitätsdatei hinzu, in der Ihr Layout aufgeblasen ist oder die obige XML-Datei in Beziehung steht

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) Fügen Sie abschließend in Ihrer onCreate-Methode den folgenden Code hinzu, um auf Ihr Layout zu verweisen und seitenausgewählte Positionen zu bearbeiten

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) {
    }
});
14
Lokanath

Sie können Jake Whartons Bibliothek testen - https://github.com/JakeWharton/Android-ViewPagerIndicator

13
Joel Fernandes

Das Folgende ist meine vorgeschlagene Lösung.

  • Da wir nur einige Bilder in der Ansicht Pager anzeigen müssen, haben wir die umständliche Verwendung von Fragmenten vermieden.
    • Anzeige-Seiten-Indikatoren implementiert (die unteren Punkte ohne zusätzliche Bibliothek oder Plugin)
    • Durch Berühren der Ansichtsseitenanzeigen (die Punkte) erfolgt auch die Seitennavigation.
    • Bitte vergessen Sie nicht, Ihre eigenen Bilder in die Ressourcen aufzunehmen.
    • Fühlen Sie sich frei zu kommentieren und zu verbessern.

A) Folgendes ist meine 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) Hauptaktivität.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) Nichtausgewähltes Element_Punkt.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>

first image

enter image description here

9
Ajit

Wenn jemand ein viewPager mit Miniaturansichten als Indikatoren erstellen möchte, kann die Verwendung dieser Bibliothek eine Option sein: ThumbIndicator für viewPager, das auch mit Bildverknüpfungen funktioniert als Ressourcen.

0
Mahdi Moqadasi

Hier ist, wie ich das gemacht habe, ähnlich wie bei den obigen Lösungen. Stellen Sie einfach sicher, dass Sie die loadDots () -Methode aufrufen, nachdem alle Bilder heruntergeladen wurden .

    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>
0
r3dm4n