你如何创build一个带点指示器的Android视图寻呼机?

可能你们中的很多人(和我一样)在创build带有底点的ViewPager问题,如下所示: 在这里输入图像说明

你如何创build这样一个Android ViewPager?

我们所需要的是: ViewPager , TabLayout和2个可选的点和默认点。

首先,我们必须将TabLayout添加到我们的屏幕布局,并将其与ViewPager连接。 我们可以用两种方法做到这一点:


ViewPager嵌套ViewPager

 <android.support.v4.view.ViewPager android:id="@+id/photos_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content"/> </android.support.v4.view.ViewPager> 

在这种情况下, TabLayout将自动与ViewPager连接,但TabLayout将在ViewPager旁边,而不是在他之上。


独立的TabLayout

 <android.support.v4.view.ViewPager android:id="@+id/photos_viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> 

在这种情况下,我们可以将TabLayout放在任何地方,但是我们必须以编程方式将TabLayoutViewPager连接TabLayout

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

一旦我们创build了我们的布局,我们必须准备我们的点。 所以我们创build了三个文件: selected_dot.xmldefault_dot.xmltab_selector.xml


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

default_dot.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="@android:color/darker_gray"/> </shape> </item> </layer-list> 

tab_selector.xml

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

现在我们需要在我们的xml布局中只添加3行代码到TabLayout

 app:tabBackground="@drawable/tab_selector" app:tabGravity="center" app:tabIndicatorHeight="0dp" 

您可以查看我的图书馆来处理您的请求: https : //github.com/tommybuonomo/dotsindicator

在你的XML布局

  <com.tbuonomo.viewpagerdotsindicator.DotsIndicator android:id="@+id/dots_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" app:dotsColor="@color/colorPrimary" app:dotsSize="16dp" app:dotsWidthFactor="3" /> 

在你的Java代码中

 dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator); viewPager = (ViewPager) findViewById(R.id.view_pager); adapter = new ViewPagerAdapter(); viewPager.setAdapter(adapter); dotsIndicator.setViewPager(viewPager); 

首先创build一个布局,在那里给出一个LinerLayout来显示你的视图寻呼机上的点

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content"/> <LinearLayout android:id="@+id/pager_dots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@android:color/transparent" android:gravity="center_horizontal" android:orientation="horizontal" android:layout_marginBottom="10dp"> </LinearLayout> </RelativeLayout> **After that create 2 drawables** **1. Unselected Drawable** <?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"/> <size android:width="12dp" android:height="12dp"/> <stroke android:width="1dp" android:color="#ffffff"/> </shape> **2. Selected Drawable** <?xml version="1.0" encoding="utf-8"?> <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent"/> <size android:width="12dp" android:height="12dp"/> <stroke android:width="1dp" android:color="#000000"/> </shape> 

之后设置适配器

  private LinearLayout llPagerDots; private ViewPager viewPager; private ArrayList<String> eventImagesUrl; private HomeViewPagerAdapter homeViewPagerAdapter; private ImageView[] ivArrayDotsPager; viewPager=(ViewPager)findViewById(R.id.view_pager); llPagerDots = (LinearLayout)findViewById(R.id.pager_dots); homeViewPagerAdapter = new HomeViewPagerAdapter(mContext, eventImagesUrl); viewPager.setAdapter(homeViewPagerAdapter); setupPagerIndidcatorDots(); ivArrayDotsPager[0].setImageResource(R.drawable.page_indicator_selected); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { for (int i = 0; i < ivArrayDotsPager.length; i++) { ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected); } ivArrayDotsPager[position].setImageResource(R.drawable.page_indicator_selected); } @Override public void onPageScrollStateChanged(int state) { } }); 

创build一个方法setupPagerIndidcatorDots(): –

 private void setupPagerIndidcatorDots() { ivArrayDotsPager = new ImageView[eventImagesUrl.size()]; for (int i = 0; i < ivArrayDotsPager.length; i++) { ivArrayDotsPager[i] = new ImageView(getActivity()); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(5, 0, 5, 0); ivArrayDotsPager[i].setLayoutParams(params); ivArrayDotsPager[i].setImageResource(R.drawable.page_indicator_unselected); //ivArrayDotsPager[i].setAlpha(0.4f); ivArrayDotsPager[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { view.setAlpha(1); } }); llPagerDots.addView(ivArrayDotsPager[i]); llPagerDots.bringToFront(); } }