Wahrscheinlich haben viele von Ihnen (wie ich) Probleme beim Erstellen ViewPager
mit unteren Punkten, wie folgt:
Wie erstellt man einen solchen Android ViewPager?
Wir benötigen lediglich : ViewPager , TabLayout und 2 Zeichen für ausgewählte und Standardpunkte.
Zunächst müssen wir TabLayout
unser Bildschirmlayout erweitern und mit verbinden ViewPager
. Wir können dies auf zwei Arten tun:
TabLayout
inViewPager
<androidx.viewpager.widget.ViewPager
android:id="@+id/photos_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</androidx.viewpager.widget.ViewPager>
In diesem Fall
TabLayout
wird automatisch mit angeschlossen werdenViewPager
, sondernTabLayout
wird als nächste seinViewPager
, nicht über sie.
TabLayout
<androidx.viewpager.widget.ViewPager
android:id="@+id/photos_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
In diesem Fall können wir setzen
TabLayout
überall, aber wir verbinden müssenTabLayout
mitViewPager
programmatisch
ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);
Sobald wir unser Layout erstellt haben, müssen wir unsere Punkte vorbereiten. So erstellen wir drei Dateien: selected_dot.xml
, default_dot.xml
und tab_selector.xml
.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/colorAccent"/>
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@android:color/darker_gray"/>
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/selected_dot"
android:state_selected="true"/>
<item android:drawable="@drawable/default_dot"/>
</selector>
Jetzt müssen wir nur noch 3 Codezeilen TabLayout
in unser XML-Layout einfügen .
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
Zum ViewPager2
Lesen dieses Artikels:
ViewPager (2) mit Punktanzeige bei medium.com
Up-Votes sind willkommen ;-)
app:tabMaxWidth
in TabLayoutapp:tabMaxWidth="30dp" app:tabTextColor="@color/transparent2" app:tabSelectedTextColor="@color/transparent2" app:tabIndicatorHeight="0dp" android:layout_gravity="bottom|center"
Erstellen Sie zunächst ein Layout, in dem Sie ein LinerLayout für Punkte angeben, das über Ihrem View Pager angezeigt wird
Danach erstellen Sie 2 Drawables
1. Nicht ausgewähltes Drawable
2. Ausgewähltes Drawable
Danach Adapter einstellen
Erstellen Sie eine Methode setupPagerIndidcatorDots ():
quelle
HomeViewPagerAdapter
?Sie können meine Bibliothek überprüfen, um Ihre Anfrage zu bearbeiten: https://github.com/tommybuonomo/dotsindicator
In Ihrem XML-Layout
In Ihrem Java-Code
quelle
tools:replace="android:label"
dasapplication
Tag in meinem hinzufügenAndroidManifest.xml
, um einen Fehler zu beseitigen, bei dem dieses Tag zweimal definiert wurde und ein Gradle-Build fehlschlug.gradle
FehlermeldungError:(39, 20) All com.android.support libraries must use the exact same version specification (mixing versions can lead to runtime crashes). Found versions 27.0.0, 25.3.1. Examples include 'com.android.support:support-compat:27.0.0' and 'com.android.support:animated-vector-drawable:25.3.1'
- wie kann ich das beheben?selector_product_image.xml
image_selected.xml
image_unselected.xml
ImageAdapter.java
row_slider_image.xml
quelle
Deine XML
Erstellen Sie ein Drawable. Klicken Sie mit der rechten Maustaste auf Drawable -> New -> Drawable File Resource Name dieser Datei
tab_selector.xml
Jetzt gibt es zwei weitere XML-Dateien. Erstellen Sie zwei weitere XML-Dateien mit dem angegebenen Namen. Dies sind der Auswahlindikator und der nicht ausgewählte Indikator
selected_tab.xml
unselected_tab.xml
quelle
SmartViewPager
ist Ihre benutzerdefinierte Ansicht.Wenn Sie etwas Ähnliches mit dem neuesten ViewPager2 und Kotlin wollen
Alles ist selbsterklärend, keine Notwendigkeit zu erklären!
1. Ihre Aktivität oder Ihr Fragment
2. Layout
3. Drawable: tab_selector.xml
4. Drawable: dot_selected.xml
5. Drawable: dot_default.xml
6. Adapter
}}
7. Layout: pager_item.xml
quelle
Platzieren Sie ViewFlipper und viewFlipper_linear_dot_lay (Linearlayout) auf derselben Basislinie und folgen Sie den nachstehenden Anweisungen
Und OnRight & OnLeft Getures platzieren den folgenden Code
quelle
Abhängigkeiten hinzufügen> Gradle synchronisieren
In Ihrem Java-Code
In Ihrem Layout
quelle