我想在我的ViewPager中添加3个底部点，就像这样 .
我使用FragmentActivity并支持库ViewPager .
你可以试试Jake Wharton的图书馆 - https://github.com/JakeWharton/Android-ViewPagerIndicator
我创建了一个库来满足ViewPager中页面指示器的需求 . 我的库包含一个名为DotIndicator的视图 . 要使用我的库，请将 compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0' 添加到gradle构建文件中 .
compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'
可以通过添加以下内容将视图添加到您的布局中：
<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 Launcher主屏幕上的点的功能，但是如果您想进一步自定义它，则可以添加以下属性：
app:unselectedDotDiameter 和 app:selectedDotDiameter 设置点的直径
app:unselectedDotDiameter
app:selectedDotDiameter
app:unselectedDotColor 和 app:selectedDotColor 设置点的颜色
app:unselectedDotColor
app:selectedDotColor
app:spacingBetweenDots 改变点之间的距离
app:spacingBetweenDots
app:dotTransitionDuration 设置动画更改的时间从小到大（和后面）
app:dotTransitionDuration
此外，可以使用以下命令以编程方式创建视图：
DotIndicator indicator = new DotIndicator(context);
存在修改属性的方法，类似于属性 . 要更新指示器以显示所选的其他页面，只需从 ViewPager.OnPageChangeListener.onPageSelected(int) 内调用方法 indicator.setSelectedItem(int, true) .
ViewPager.OnPageChangeListener.onPageSelected(int)
indicator.setSelectedItem(int, true)
这是一个使用它的例子：
如果您有兴趣，该库实际上是为了制作如上面的gif所示的介绍屏幕 .
Github源码在这里：https://github.com/MatthewTamlin/SlidingIntroScreen
ViewPagerIndicator 自2012年以来一直没有更新，并且有一些从未修复的错误 .
ViewPagerIndicator
我终于找到了这个光库的替代方案，为 viewpager 显示了漂亮的点，这里是链接：
viewpager
https://github.com/ongakuer/CircleIndicator
易于实施！
我想为上述问题发布一个更简单的解决方案，只需更改一个变量值即可动态更改指标编号 dotCounts=x 我做的就像这样 .
dotCounts=x
1）在drawable文件夹中为名为“item_selected”的页面选择指示器创建一个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”的未选择指示符再创建一个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）现在添加将此部分代码添加到要在Layout XML文件中显示 viewPager 以下指示符的位置 .
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方法中添加以下代码以引用布局并处理页面选择的位置
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) { } });
No need for that much code.
只使用 viewpager 和 tablayout ，你就可以完成所有这些工作而不需要编码 .
Your main Layout:
<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 Code:
mImageViewPager = (ViewPager) findViewById(R.id.pager); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots); tabLayout.setupWithViewPager(mImageViewPager, true);
就是这样，你很高兴 .
您需要在 drawable 文件夹中创建以下xml资源文件 .
tab_indicator_selected.xml
<?xml version="1.0" encoding="utf-8"?> <shape android:innerRadius="0dp" android:shape="ring" android:thickness="4dp" android:useLevel="false"> <solid android:color="@color/colorAccent"/> </shape>
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>
Usage
在您的gradle中添加以下内容：
implementation '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 中创建一个整数数组，例如
strings.xml
<integer-array name="img_id_arr"> <item>@drawable/img1</item> <item>@drawable/img2</item> <item>@drawable/img3</item> <item>@drawable/img4</item> </integer-array>
完成！
Extra 为了监听页面更改使用 addOnPageChangeListener(listener);
addOnPageChangeListener(listener);
Github link .
以下是我提出的解决方案 .
由于我们只需要在视图寻呼机中显示一些图像，因此避免了碎片的繁琐使用 .
实现了视图页面指示器（底部点没有任何额外的库或插件）
触摸视图页面指示符（点）也会发生页面导航 .
请不要忘记在资源中添加自己的图像 .
随意评论并改进 .
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>
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) { } });
我手工解决方案：
在布局中：
<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); } }
这是我如何做到这一点，有点类似于上面的解决方案 . 只需确保在下载所有图像后调用loadDots（）方法 .
private int dotsCount; private TextView dotsTextView[]; private void setupAdapter() { adapter = new SomeAdapter(getContext(), images); viewPager.setAdapter(adapter); viewPager.setCurrentItem(0); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); } private final ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) { for (int i = 0; i < dotsCount; i++) dotsTextView[i].setTextColor(Color.GRAY); dotsTextView[position].setTextColor(Color.WHITE); } @Override public void onPageScrollStateChanged(int state) {} }; protected void loadDots() { dotsCount = adapter.getCount(); dotsTextView = new TextView[dotsCount]; for (int i = 0; i < dotsCount; i++) { dotsTextView[i] = new TextView(getContext()); dotsTextView[i].setText(R.string.dot); dotsTextView[i].setTextSize(45); dotsTextView[i].setTypeface(null, Typeface.BOLD); dotsTextView[i].setTextColor(android.graphics.Color.GRAY); mDotsLayout.addView(dotsTextView[i]); } dotsTextView[0].setTextColor(Color.WHITE); } XML <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="180dp" android:background="#00000000"/> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/introImageView" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/image_count" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00000000" android:gravity="center|bottom" android:orientation="horizontal"/> </FrameLayout>
9 回答
你可以试试Jake Wharton的图书馆 - https://github.com/JakeWharton/Android-ViewPagerIndicator
我创建了一个库来满足ViewPager中页面指示器的需求 . 我的库包含一个名为DotIndicator的视图 . 要使用我的库，请将
compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'添加到gradle构建文件中 .可以通过添加以下内容将视图添加到您的布局中：
上面的代码完美地复制了Google Launcher主屏幕上的点的功能，但是如果您想进一步自定义它，则可以添加以下属性：
app:unselectedDotDiameter和app:selectedDotDiameter设置点的直径app:unselectedDotColor和app:selectedDotColor设置点的颜色app:spacingBetweenDots改变点之间的距离app:dotTransitionDuration设置动画更改的时间从小到大（和后面）此外，可以使用以下命令以编程方式创建视图：
存在修改属性的方法，类似于属性 . 要更新指示器以显示所选的其他页面，只需从
ViewPager.OnPageChangeListener.onPageSelected(int)内调用方法indicator.setSelectedItem(int, true).这是一个使用它的例子：
如果您有兴趣，该库实际上是为了制作如上面的gif所示的介绍屏幕 .
Github源码在这里：https://github.com/MatthewTamlin/SlidingIntroScreen
ViewPagerIndicator自2012年以来一直没有更新，并且有一些从未修复的错误 .我终于找到了这个光库的替代方案，为
viewpager显示了漂亮的点，这里是链接：https://github.com/ongakuer/CircleIndicator
易于实施！
我想为上述问题发布一个更简单的解决方案，只需更改一个变量值即可动态更改指标编号
dotCounts=x我做的就像这样 .1）在drawable文件夹中为名为“item_selected”的页面选择指示器创建一个xml文件 .
2）为名为“item_unselected”的未选择指示符再创建一个xml文件
3）现在添加将此部分代码添加到要在Layout XML文件中显示
viewPager以下指示符的位置 .4）在您的布局膨胀或与上述xml文件相关的活动文件文件的顶部添加此功能
5）最后在onCreate方法中添加以下代码以引用布局并处理页面选择的位置
No need for that much code.
只使用 viewpager 和 tablayout ，你就可以完成所有这些工作而不需要编码 .
Your main Layout:
在活动或片段中连接UI元素，如下所示：
Java Code:
就是这样，你很高兴 .
您需要在 drawable 文件夹中创建以下xml资源文件 .
tab_indicator_selected.xml
tab_indicator_default.xml
tab_selector.xml
感觉像我一样懒惰？好吧，以上所有代码都转换成了一个库！
Usage
在您的gradle中添加以下内容：
将以下内容添加到“活动”或“片段”布局中 .
在
strings.xml中创建一个整数数组，例如完成！
Extra 为了监听页面更改使用
addOnPageChangeListener(listener);Github link .
以下是我提出的解决方案 .
由于我们只需要在视图寻呼机中显示一些图像，因此避免了碎片的繁琐使用 .
实现了视图页面指示器（底部点没有任何额外的库或插件）
触摸视图页面指示符（点）也会发生页面导航 .
请不要忘记在资源中添加自己的图像 .
随意评论并改进 .
A）以下是我的activity_main.xml
B）pager_item.xml
C）MainActivity.java
D）CustomPagerAdapter.java
E）selecteditem_dot.xml
F）nonselecteditem_dot.xml
我手工解决方案：
在布局中：
并在活动中
这是我如何做到这一点，有点类似于上面的解决方案 . 只需确保在下载所有图像后调用loadDots（）方法 .