ViewPager可能你们中的许多人(如我)在创建底点 时遇到问题,如下所示:
ViewPager
你如何创建这样一个Android ViewPager?
我们只需要:ViewPager、TabLayout和 2 个用于选定点和默认点的可绘制对象。
首先,我们必须添加TabLayout到我们的屏幕布局,并将其与ViewPager. 我们可以通过两种方式做到这一点:
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:layout_width="match_parent" android:layout_height="wrap_content"/> </androidx.viewpager.widget.ViewPager>
在这种情况下TabLayout,将自动与 连接ViewPager,但TabLayout会在 旁边ViewPager,而不是在它之上。
<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"/>
在这种情况下,我们可以放在TabLayout任何地方,但我们必须以TabLayout编程ViewPager方式连接
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);
创建布局后,我们必须准备点。所以我们创建了三个文件selected_dot.xml:default_dot.xml和tab_selector.xml.
selected_dot.xml
default_dot.xml
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>
现在我们只需要TabLayout在 XML 布局中添加 3 行代码。
app:tabBackground="@drawable/tab_selector" app:tabGravity="center" app:tabIndicatorHeight="0dp"