Zapewne wielu z Was (tak jak ja) ma problem z tworzeniem ViewPager
z dolnymi kropkami, jak to:
Jak stworzyć taki ViewPager dla Androida?
Wszystko czego potrzebujemy to: ViewPager , TabLayout i 2 drawables dla wybranych i domyślnych kropek.
Po pierwsze, musimy dodać TabLayout
do naszego układu ekranu i połączyć go z ViewPager
. Możemy to zrobić na dwa sposoby:
TabLayout
wViewPager
<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>
W tym przypadku
TabLayout
zostanie automatycznie połączony zViewPager
, aleTabLayout
będzie obokViewPager
, a nie nad nim.
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"/>
W takim przypadku możemy umieścić
TabLayout
gdziekolwiek, ale musimy połączyćTabLayout
sięViewPager
programowo
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);
Gdy stworzyliśmy nasz układ, musimy przygotować nasze kropki. Więc utworzyć trzy pliki: selected_dot.xml
, default_dot.xml
i 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>
Teraz musimy dodać tylko 3 linie kodu do TabLayout
naszego układu XML.
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
Do ViewPager2
przeczytania tego artykułu:
ViewPager (2) ze wskaźnikiem kropek na medium.com
Mile widziane głosy za ;-)
app:tabMaxWidth
w TabLayoutapp:tabMaxWidth="30dp" app:tabTextColor="@color/transparent2" app:tabSelectedTextColor="@color/transparent2" app:tabIndicatorHeight="0dp" android:layout_gravity="bottom|center"
Najpierw utwórz układ, w którym daj jeden układ liniowy dla kropek, które będą widoczne na twoim View Pager
Następnie stwórz 2 drawables
1. Niezaznaczone do rysowania
2. Wybrane do rysowania
Po tym zestawie adapter
Utwórz metodę setupPagerIndidcatorDots ():
źródło
HomeViewPagerAdapter
?Możesz sprawdzić moją bibliotekę, aby obsłużyć swoje żądanie: https://github.com/tommybuonomo/dotsindicator
W Twoim układzie XML
W swoim kodzie Java
źródło
tools:replace="android:label"
doapplication
tagu w moim,AndroidManifest.xml
aby pozbyć się błędu o dwukrotnym zdefiniowaniu tego tagu i spowodowaniu niepowodzenia kompilacji gradle.gradle
błądError:(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'
- jak mogę to naprawić?selector_product_image.xml
image_selected.xml
image_unselected.xml
ImageAdapter.java
row_slider_image.xml
źródło
Twój xml
stworzyć drawable. kliknij prawym przyciskiem myszy na drawable -> new -> Drawable file resource name that file
tab_selector.xml
Teraz są jeszcze dwa pliki xml. utwórz jeszcze dwa pliki xml o szanowanej nazwie. są to wskaźnik selekcjonera i wskaźnik niewybrany
selected_tab.xml
unselected_tab.xml
źródło
SmartViewPager
jest to Twój niestandardowy widok.Jeśli chcesz czegoś podobnego z najnowszym ViewPager2 i Kotlin
Wszystko jest zrozumiałe, nie trzeba wyjaśniać!
1. Twoja aktywność lub fragment
2. Układ
3. Do rysowania: tab_selector.xml
4. Do rysowania: dot_selected.xml
5. Do rysowania: dot_default.xml
6. Adapter
}
7. Układ: pager_item.xml
źródło
Umieść ViewFlipper i viewFlipper_linear_dot_lay (Linearlayout) na samebaseline i postępuj zgodnie z poniższym
A OnRight & OnLeft getures umieszcza poniższy kod
źródło
Dodaj zależności> Synchronizuj Gradle
W swoim kodzie java
W twoim układzie
źródło