我想在我的ViewPager中添加3个底部点,就像这样.
我使用FragmentActivity并支持库ViewPager.
不需要那么多代码.
你可以做到这一切的东西,而只用编码这么多viewpager
用tablayout
.
你的主要布局:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_
android:layout_>
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_alignParentBottom="true"
android:layout_
android:layout_
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicator/>
</RelativeLayout>
在活动或片段中连接UI元素,如下所示:
Java代码:
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="oval"
android:thickness="4dp"
android:useLevel="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent"/>
</shape>
tab_indicator_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="oval"
android:thickness="2dp"
android:useLevel="false">
<solid android:color="@android:color/darker_gray"/>
</shape>
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中添加以下内容:
<com.chabbal.slidingdotsplash.SlidingSplashView
android:id="@+id/splash"
android:layout_
android:layout_
app:imageResources="@array/img_id_arr"/>
将以下内容添加到"活动"或"片段"布局中.
<integer-array name="img_id_arr">
<item>@drawable/img1</item>
<item>@drawable/img2</item>
<item>@drawable/img3</item>
<item>@drawable/img4</item>
</integer-array>
在implementation 'com.chabbal:slidingdotsplash:1.0.2'
例如中创建一个整数数组
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_
android:layout_>
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tabDots"
android:layout_alignParentBottom="true"
android:layout_
android:layout_
app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicator/>
</RelativeLayout>
完成!
额外以便收听页面更改使用strings.xml
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) { } });
我想为上述问题发布一个更简单的解决方案,并且只需更改一个变量值即可动态更改指标数字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: android:/> <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: android:/> <solid android:color="@color/image_item_unselected_for_dots"/> </shape>
3)现在添加将此部分代码添加到要viewPager
在Layout XML文件中显示以下指示符的位置.
<RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_ android:layout_below="@+id/banner_pager" android:layout_ android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_ android:layout_ 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) { } });
ViewPagerIndicator
自2012年以来没有更新,并得到了一些从未修复的错误.
我终于找到了一个替代这个光库,显示了漂亮的点viewpager
,这里是链接:
https://github.com/ongakuer/CircleIndicator
易于实施!
我创建了一个库来满足ViewPager中页面指示器的需求.我的库包含一个名为DotIndicator的视图.要使用我的库,请添加compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'
到gradle构建文件.
可以通过添加以下内容将视图添加到您的布局中:
<com.matthewtamlin.sliding_intro_screen_library.indicators.DotIndicator android:layout_ android:layout_ app:numberOfDots=YOUR_INT_HERE app:selectedDotIndex=YOUR_INT_HERE/>
上面的代码完美地复制了Google Launcher主屏幕上的点的功能,但是如果您想进一步自定义它,则可以添加以下属性:
app:unselectedDotDiameter
并app:selectedDotDiameter
设置点的直径
app:unselectedDotColor
并app:selectedDotColor
设置点的颜色
app:spacingBetweenDots
改变点之间的距离
app:dotTransitionDuration
设置动画从小到大(和后面)动画的时间
此外,可以使用以下命令以编程方式创建视图:
DotIndicator indicator = new DotIndicator(context);
存在修改属性的方法,类似于属性.要更新指示器以显示所选的其他页面,只需indicator.setSelectedItem(int, true)
从内部调用方法ViewPager.OnPageChangeListener.onPageSelected(int)
.
这是一个使用它的例子:
如果您有兴趣,该库实际上是为了制作如上面的gif所示的介绍屏幕.
Github源代码来自:https://github.com/MatthewTamlin/SlidingIntroScreen
你可以试试Jake Wharton的图书馆 - https://github.com/JakeWharton/Android-ViewPagerIndicator
我手工解决方案:
在布局中:
<LinearLayout
android:orientation="horizontal"
android:layout_
android:layout_
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); } }
以下是我提出的解决方案.
由于我们只需要在视图寻呼机中显示一些图像,因此避免了碎片的繁琐使用.
实现了视图页面指示器(底部点没有任何额外的库或插件)
在触摸视图页面指示符(点)时,页面导航也正在发生.
请不要忘记在资源中添加自己的图像.
随意评论并改进它.
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_ android:layout_ 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_ android:layout_ /> <RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_ android:layout_ android:layout_alignParentBottom="true" android:layout_marginTop="5dp" android:gravity="center"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_ android:layout_ 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_ android:layout_> <ImageView android:layout_ android:layout_ 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: android:/> <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: android:/> <solid android:color="#d3d3d3"/> </shape>