你如何创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放在任何地方，但是我们必须以编程方式将TabLayout与ViewPager连接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.xml ， default_dot.xml和tab_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(); } }
