关于ViewPager当前页卡指示器的简单实现方法
2017-04-07 17:36
471 查看
今天的案例为大家分享在Viewpager中当前页中指示器的实现方法,即通常放在ViewPager底部的实心小圆点,用于提示用户当前ViewPager所在的当前页是哪一页。整体实现的思想是通过给ViewPager设置OnPagerChangeListener在onPageSelected方法中设置当前页的选择状态
初始化的时候先初始化与list集合size相等的圆点个数:
int size = mList.size();
initPageIndicator(size);
然后是给ViewPager设置监听事件,并在onPageSelected方法中设置被选中的当前页圆点为选中状态:
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
System.out.println(position+"-----------");
for (int i = 0; i < 4; i++) {
setIndicator(i, i == position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
初始化指示点:
其中在初始化指示点的时候引用的drawable文件夹下的selector文件为:<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/alert_dark_frame" android:state_enabled="true"/>
<item android:drawable="@android:drawable/alert_light_frame" android:state_enabled="false"/>
</selector>
完整代码如下:
主布局文件:<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewpager"
/>
<LinearLayout
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="horizontal"/>
</RelativeLayout>
ViewPager的Adapter代码:
/**
* Created by xiedong on 2017/4/7.
*/
public class ViewPagerAdapter extends PagerAdapter {
private List<View> mList = new ArrayList<>();
private LayoutInflater mInflater;
public ViewPagerAdapter(Context context , List<View> list) {
if (list == null || list.isEmpty()){
return;
}
mInflater = LayoutInflater.from(context);
mList = list;
// initView(list);
}
// private void initView(List<View> list) {
// for (View view :list){
// View item = mInflater.inflate(R.layout.viewpager_item,null);
// mList.add(item);
// }
// }
@Override
public int getCount() {
return null ==mList ? 0 :mList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mList.get(position));
return mList.get(position);
}
}
功能代码:
/**
* Created by xiedong on 2017/4/7.
*/
public class IndicatorActivity extends Activity {
private ViewPager mViewPager;
private LinearLayout mIndicator;
private List<View> mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_indicator);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mIndicator = (LinearLayout) findViewById(R.id.indicator);
for (int i = 0; i < 4; i++) {
View item = LayoutInflater.from(this).inflate(R.layout.viewpager_item,null);
mList.add(item);
}
mViewPager.setAdapter(new ViewPagerAdapter(this,mList));
int size = mList.size();
initPageIndicator(size);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
System.out.println(position+"-----------");
for (int i = 0; i < 4; i++) {
setIndicator(i, i == position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setIndicator(int i, boolean enabled) { View view = mIndicator.getChildAt(i); if (view != null) { view.setEnabled(enabled); } } private void initPageIndicator(int size) { if (size <= 1) { return; } for (int i = 0; i < size; i++) { addPageIndicator(i); } setIndicator(0, true); } private void addPageIndicator(int i) { View dot = new View(this); dot.setBackgroundResource(R.drawable.dot_bg_black_selector); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20); if (i != 0) { params.leftMargin = 40; } params.topMargin = 20; params.bottomMargin = 10; dot.setEnabled(false); dot.setLayoutParams(params); mIndicator.addView(dot); }
}
填充ViewPager的布局文件viewpager_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:background="@color/colorAccent"
android:layout_height="match_parent">
</LinearLayout>
初始化的时候先初始化与list集合size相等的圆点个数:
int size = mList.size();
initPageIndicator(size);
然后是给ViewPager设置监听事件,并在onPageSelected方法中设置被选中的当前页圆点为选中状态:
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
System.out.println(position+"-----------");
for (int i = 0; i < 4; i++) {
setIndicator(i, i == position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
初始化指示点:
private void setIndicator(int i, boolean enabled) { View view = mIndicator.getChildAt(i); if (view != null) { view.setEnabled(enabled); } } private void initPageIndicator(int size) { if (size <= 1) { return; } for (int i = 0; i < size; i++) { addPageIndicator(i); } setIndicator(0, true); } private void addPageIndicator(int i) { View dot = new View(this); dot.setBackgroundResource(R.drawable.dot_bg_black_selector); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20); if (i != 0) { params.leftMargin = 40; } params.topMargin = 20; params.bottomMargin = 10; dot.setEnabled(false); dot.setLayoutParams(params); mIndicator.addView(dot); }
其中在初始化指示点的时候引用的drawable文件夹下的selector文件为:<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:drawable/alert_dark_frame" android:state_enabled="true"/>
<item android:drawable="@android:drawable/alert_light_frame" android:state_enabled="false"/>
</selector>
完整代码如下:
主布局文件:<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewpager"
/>
<LinearLayout
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="horizontal"/>
</RelativeLayout>
ViewPager的Adapter代码:
/**
* Created by xiedong on 2017/4/7.
*/
public class ViewPagerAdapter extends PagerAdapter {
private List<View> mList = new ArrayList<>();
private LayoutInflater mInflater;
public ViewPagerAdapter(Context context , List<View> list) {
if (list == null || list.isEmpty()){
return;
}
mInflater = LayoutInflater.from(context);
mList = list;
// initView(list);
}
// private void initView(List<View> list) {
// for (View view :list){
// View item = mInflater.inflate(R.layout.viewpager_item,null);
// mList.add(item);
// }
// }
@Override
public int getCount() {
return null ==mList ? 0 :mList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mList.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mList.get(position));
return mList.get(position);
}
}
功能代码:
/**
* Created by xiedong on 2017/4/7.
*/
public class IndicatorActivity extends Activity {
private ViewPager mViewPager;
private LinearLayout mIndicator;
private List<View> mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_indicator);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mIndicator = (LinearLayout) findViewById(R.id.indicator);
for (int i = 0; i < 4; i++) {
View item = LayoutInflater.from(this).inflate(R.layout.viewpager_item,null);
mList.add(item);
}
mViewPager.setAdapter(new ViewPagerAdapter(this,mList));
int size = mList.size();
initPageIndicator(size);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
System.out.println(position+"-----------");
for (int i = 0; i < 4; i++) {
setIndicator(i, i == position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setIndicator(int i, boolean enabled) { View view = mIndicator.getChildAt(i); if (view != null) { view.setEnabled(enabled); } } private void initPageIndicator(int size) { if (size <= 1) { return; } for (int i = 0; i < size; i++) { addPageIndicator(i); } setIndicator(0, true); } private void addPageIndicator(int i) { View dot = new View(this); dot.setBackgroundResource(R.drawable.dot_bg_black_selector); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20); if (i != 0) { params.leftMargin = 40; } params.topMargin = 20; params.bottomMargin = 10; dot.setEnabled(false); dot.setLayoutParams(params); mIndicator.addView(dot); }
}
填充ViewPager的布局文件viewpager_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:background="@color/colorAccent"
android:layout_height="match_parent">
</LinearLayout>
相关文章推荐
- TabLayout实现ViewPager指示器的方法
- ViewPager导航图片——简单实现方法
- 关于viewpager的简单实现引导页
- 用最简单的方法实现ViewPager无限循环滑动(跑马灯)效果
- 打造最简单ViewPager指示器,实现小圆点效果
- (原来可以这么简单)实现变色TextView及ViewPager指示器(二)
- Material Design学习之 TabLayout(ViewPager实现页卡最简单方法)
- 非常简单的方法实现ViewPager自动循环轮播
- 实现变色TextView及ViewPager指示器(原来可以这么简单)
- 自定义简单的viewpager指示器
- Android基于ViewPager+Fragment实现左右滑屏效果的方法
- ViewPager中代码动态的添加小圆点作为指示器indicator,以及实现无限轮播
- 利用TabLayout(5.0新技术)+ViewPager+Fragment方法实现书签导航
- ViewPager实现简单的界面滑动
- 实现简单易用的ViewPagerIndicator
- ViewPager懒加载的简单实现
- TabLayout+ViewPager 简单实现app底部Tab布局
- 转载 Android简单实现ImageView的加边框颜色的方法
- Android上实现一个简单的天气预报APP(十三) 导航ViewPager
- 安卓通过注解+反射简单实现代替findViewById方法