带有底点的Android ViewPager
我想添加3个底点到我的ViewPager，就像这样。
我使用FragmentActivity和支持库ViewPager。
不需要那么多的代码。 你可以做所有这些东西，而不用tablayout 。 以下将是程序：
您的主要布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <android.support.design.widget.TabLayout android:id="@+id/tabDots" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@drawable/tab_selector" app:tabGravity="center" app:tabIndicatorHeight="0dp"/> </RelativeLayout>
将活动或片段中的UI元素连接起来，如下所示：
Java代码：
mImageViewPager = (ViewPager) findViewById(R.id.pager); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots); tabLayout.setupWithViewPager(mImageViewPager, true);
这就是你的好去。
以下的XML资源文件，你将需要在可绘制的文件夹中创build..
tab_indicator_selected.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="4dp" android:useLevel="false"> <solid android:color="@color/colorAccent"/> </shape> </item> </layer-list>
tab_indicator_default.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="2dp" 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/tab_indicator_selected" android:state_selected="true"/> <item android:drawable="@drawable/tab_indicator_default"/> </selector>
感觉像我一样懒惰？ 那么，所有上面的代码被转换成一个库！
用法
在您的gradle中添加以下内容：
compile 'com.chabbal:slidingdotsplash:1.0.2'
将以下内容添加到您的活动或片段布局。
<com.chabbal.slidingdotsplash.SlidingSplashView android:id="@+id/splash" android:layout_width="match_parent" android:layout_height="match_parent" app:imageResources="@array/img_id_arr"/>
在strings.xml创build一个整数数组
<integer-array name="img_id_arr"> <item>@drawable/img1</item> <item>@drawable/img2</item> <item>@drawable/img3</item> <item>@drawable/img4</item> </integer-array>
完成！
额外为了听页面更改使用
addOnPageChangeListener（收听）;
Github 链接 。
viewPager.addOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { switch (position) { case 0: img_page1.setImageResource(R.drawable.dot_selected); img_page2.setImageResource(R.drawable.dot); img_page3.setImageResource(R.drawable.dot); img_page4.setImageResource(R.drawable.dot); break; case 1: img_page1.setImageResource(R.drawable.dot); img_page2.setImageResource(R.drawable.dot_selected); img_page3.setImageResource(R.drawable.dot); img_page4.setImageResource(R.drawable.dot); break; case 2: img_page1.setImageResource(R.drawable.dot); img_page2.setImageResource(R.drawable.dot); img_page3.setImageResource(R.drawable.dot_selected); img_page4.setImageResource(R.drawable.dot); break; case 3: img_page1.setImageResource(R.drawable.dot); img_page2.setImageResource(R.drawable.dot); img_page3.setImageResource(R.drawable.dot); img_page4.setImageResource(R.drawable.dot_selected); break; default: break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } });
我的手工解决scheme：
在布局中：
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/dots" />
并在活动中
private final static int NUM_PAGES = 5; private ViewPager mViewPager; private List<ImageView> dots; @Override protected void onCreate(Bundle savedInstanceState) { // ... addDots(); } public void addDots() { dots = new ArrayList<>(); LinearLayout dotsLayout = (LinearLayout)findViewById(R.id.dots); for(int i = 0; i < NUM_PAGES; i++) { ImageView dot = new ImageView(this); dot.setImageDrawable(getResources().getDrawable(R.drawable.pager_dot_not_selected)); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); dotsLayout.addView(dot, params); dots.add(dot); } mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { selectDot(position); } @Override public void onPageScrollStateChanged(int state) { } }); } public void selectDot(int idx) { Resources res = getResources(); for(int i = 0; i < NUM_PAGES; i++) { int drawableId = (i==idx)?(R.drawable.pager_dot_selected):(R.drawable.pager_dot_not_selected); Drawable drawable = res.getDrawable(drawableId); dots.get(i).setImageDrawable(drawable); } }
我创build了一个库来解决ViewPager中页面指示器的需求。 我的库包含一个称为DotIndicator的视图。 要使用我的库，请将compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'到您的gradle构build文件中。
视图可以添加到您的布局添加以下内容：
<com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator android:layout_width="wrap_content" android:layout_height="wrap_content" app:numberOfDots=YOUR_INT_HERE app:selectedDotIndex=YOUR_INT_HERE/>
上面的代码完美地复制了Google桌面主屏幕上的点的function，但是如果您想进一步自定义它，则可以添加以下属性：
-
app:unselectedDotDiameter和app:selectedDotDiameter设置点的直径 -
app:unselectedDotColor和app:selectedDotColor设置点的颜色 -
app:spacingBetweenDots来改变点之间的距离 -
app:dotTransitionDuration设置animation变化的时间从小到大（并返回）
另外，可以使用以下编程方式创build视图：
DotIndicator indicator = new DotIndicator(context);
存在修改属性的方法，类似于属性。 要更新指标以显示与所选不同的页面，只需从ViewPager.OnPageChangeListener.onPageSelected(int)调用方法indicator.setSelectedItem(int, true) ViewPager.OnPageChangeListener.onPageSelected(int) 。
这里有一个使用它的例子：
如果你有兴趣，图书馆实际上是devise成像上面gif所示的那样的介绍屏幕。
Github来源可在这里： https ： //github.com/MatthewTamlin/SlidingIntroScreen
你可以试试杰克·沃顿的图书馆 – https://github.com/JakeWharton/Android-ViewPagerIndicator
ViewPagerIndicator自2012年以来没有更新，并有几个从未修复的错误。
我终于find了这个光库的替代品，为viewpager显示好点，这里是链接：
https://github.com/ongakuer/CircleIndicator
易于实施！
我想为上述问题发布一个更简单的解决scheme，指标数字可以dynamic改变，只改变一个variables值dotCounts=x我做了这样的事情。
1）在名为“item_selected”的页面select指示器的可绘制文件夹中创build一个xml文件。
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:height="8dp" android:width="8dp"/> <solid android:color="@color/image_item_selected_for_dots"/> </shape>
2）为未选中的指标“item_unselected”创build一个xml文件
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:height="8dp" android:width="8dp"/> <solid android:color="@color/image_item_unselected_for_dots"/> </shape>
3）现在，添加这部分的代码在你想要显示在布局XML文件viewPager下面的指标的地方。
<RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_width="match_parent" android:layout_below="@+id/banner_pager" android:layout_height="wrap_content" android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:gravity="center" android:orientation="horizontal" /> </RelativeLayout>
4）将这个函数添加到您的布局被夸大的活动文件文件或上面的xml文件相关的顶部
private int dotsCount=5; //No of tabs or images private ImageView[] dots; LinearLayout linearLayout; private void drawPageSelectionIndicators(int mPosition){ if(linearLayout!=null) { linearLayout.removeAllViews(); } linearLayout=(LinearLayout)findViewById(R.id.viewPagerCountDots); dots = new ImageView[dotsCount]; for (int i = 0; i < dotsCount; i++) { dots[i] = new ImageView(context); if(i==mPosition) dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_selected)); else dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_unselected)); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); params.setMargins(4, 0, 4, 0); linearLayout.addView(dots[i], params); } }
5）最后在你的onCreate方法中添加下面的代码来引用你的布局和处理页面select的位置
drawPageSelectionIndicators(0); mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { drawPageSelectionIndicators(position); } @Override public void onPageScrollStateChanged(int state) { } });
以下是我提出的解决scheme。
- 由于我们只需要在视图寻呼机中显示一些图像，所以避免了繁琐的片段使用。
- 实现了查看页面指示器（底部的点没有任何额外的库或插件）
- 在触摸查看页面指示器（点）时，页面导航也正在发生。
- 请不要忘记在资源中添加自己的图像。
- 随意评论和改进。
A）以下是我的activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="schneider.carouseladventure.MainActivity"> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true" android:layout_marginTop="5dp" android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:gravity="center" android:orientation="horizontal" /> </RelativeLayout> </RelativeLayout>
B）pager_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/imageView" /> </LinearLayout>
C）MainActivity.java
import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener, View.OnClickListener { int[] mResources = {R.drawable.nature1, R.drawable.nature2, R.drawable.nature3, R.drawable.nature4, R.drawable.nature5, R.drawable.nature6 }; ViewPager mViewPager; private CustomPagerAdapter mAdapter; private LinearLayout pager_indicator; private int dotsCount; private ImageView[] dots; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.viewpager); pager_indicator = (LinearLayout) findViewById(R.id.viewPagerCountDots); mAdapter = new CustomPagerAdapter(this, mResources); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(0); mViewPager.setOnPageChangeListener(this); setPageViewIndicator(); } private void setPageViewIndicator() { Log.d("###setPageViewIndicator", " : called"); dotsCount = mAdapter.getCount(); dots = new ImageView[dotsCount]; for (int i = 0; i < dotsCount; i++) { dots[i] = new ImageView(this); dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot)); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); params.setMargins(4, 0, 4, 0); final int presentPosition = i; dots[presentPosition].setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { mViewPager.setCurrentItem(presentPosition); return true; } }); pager_indicator.addView(dots[i], params); } dots[0].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot)); } @Override public void onClick(View v) { } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { Log.d("###onPageSelected, pos ", String.valueOf(position)); for (int i = 0; i < dotsCount; i++) { dots[i].setImageDrawable(getResources().getDrawable(R.drawable.nonselecteditem_dot)); } dots[position].setImageDrawable(getResources().getDrawable(R.drawable.selecteditem_dot)); if (position + 1 == dotsCount) { } else { } } @Override public void onPageScrollStateChanged(int state) { } }
D）CustomPagerAdapter.java
import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; public class CustomPagerAdapter extends PagerAdapter { private Context mContext; LayoutInflater mLayoutInflater; private int[] mResources; public CustomPagerAdapter(Context context, int[] resources) { mContext = context; mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); mResources = resources; } @Override public Object instantiateItem(ViewGroup container, int position) { View itemView = mLayoutInflater.inflate(R.layout.pager_item,container,false); ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView); imageView.setImageResource(mResources[position]); /* LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(950, 950); imageView.setLayoutParams(layoutParams);*/ container.addView(itemView); return itemView; } @Override public void destroyItem(ViewGroup collection, int position, Object view) { collection.removeView((View) view); } @Override public int getCount() { return mResources.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } }
E）selecteditem_dot.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:height="12dip" android:width="12dip"/> <solid android:color="#7e7e7e"/> </shape>
F）nonselecteditem_dot.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="true" android:dither="true"> <size android:height="12dip" android:width="12dip"/> <solid android:color="#d3d3d3"/> </shape>
