- 首先贴一张效果图
先来分析下这个界面的构成:
ViewPager LinearLayout 两个主要的ViewGroup构成接下来贴出页面布局代码
<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.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_marginTop="25dp"
android:id="@+id/point_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
我们用到了相对布局,根据顺序,ViewPager在底层,LinearLayout 位于上层
- 我们需要做的工作:首先获取ViewPager对象,为其添加每个pager的内容,然后获取LinearLayout 并向它中动态添加小圆点View对象
获取ViewPager为它添加适配器
//获取ViewPager对象
ViewPager vp=(ViewPager) findViewById(R.id.vp);
//创建ViewPager适配器类
// ViewPager的适配器
private class MyViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return imagelist.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//imagelist为一个装着ImageView对象的集合,在这里,每个pager即为一个ImageView
container.addView(imagelist.get(position));
return imagelist.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
获取LinearLayout对象并为它添加小圆点子View
//获取LinearLayout对象
LinearLayout pointlayout =(LinearLayout)findViewById(R.id.point_layout);
// 初始化标识小圆点
for (int i = 0; i < mImageId.length; i++) {
View point = new View(this);
LayoutParams params = new LayoutParams(10, 10);
if (i != 0) {
params.leftMargin =10;
}
point.setLayoutParams(params);
point.setEnabled(false);
//一状态选择器作为背景
point.setBackgroundResource(R.drawable.selector_dot);
pointlayout.addView(point);
}
R.drawable.selector_dot状态选择器代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:state_enabled="false" android:drawable="@drawable/dot_unfocus"></item>
</selector>
- 经过上面的代码基本完成了静态引导页面,接着要做的工作便是要是小圆点随着ViewPager的滑动改变颜色了。
实现小圆点的动态改变需要为ViewPager添加滑动监听工作
1.为ViewPager添加滑动监听
// ViewPager的事件监听
private class MyPagerListener implements OnPageChangeListener {
//pager的滑动状态的回调
@Override
public void onPageScrollStateChanged(int arg0) {
}
//pager滑动过程中的回调
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//pager被选中的回调
@Override
public void onPageSelected(int arg0) {
//在pager被选中时对小圆点的更新处理
update();
}
}
2.update()更小圆点的操作
public void update() {
// 获取当前页面
int currentPage = vp.getCurrentItem();
// 小圆点的逻辑
for (int i = 0; i < pointlayout.getChildCount(); i++) {
// 将当前页面对应的小圆点的选中事件设置为真
pointlayout.getChildAt(i).setEnabled(i==currentPage);
}
}
解释原理:首先获取当前被选中的页面Item,然后获取pointlayout下的所有子View(即为小圆点),pointlayout.getChildAt(i).setEnabled(boolean glag),设置一个View的Enabled属性,当为真的时候,在前面设置的状态选择器变会起作用
扫描二维码关注公众号,回复:
2404687 查看本文章
下面贴出完整代码:
.xml部分
<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.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_marginTop="25dp"
android:id="@+id/point_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
</LinearLayout>
java部分
public class GuideActivity extends Activity {
//存放图片资源id的数组
private int[] mImageId = new int[] { R.drawable.guide_1,
R.drawable.guide_2, R.drawable.guide_3 };
private ViewPager vp;
private LinearLayout pointlayout;
//存放ImageView的集合
private ArrayList<ImageView> imagelist;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide);
initView();
initData();
vp.setAdapter(new MyViewPagerAdapter());
vp.setOnPageChangeListener(new MyPagerListener());
//初识化被选中的小圆点
pointlayout.getChildAt(0).setEnabled(true);
}
public void initView() {
vp = (ViewPager) findViewById(R.id.vp);
pointlayout = (LinearLayout) findViewById(R.id.point_layout);
imagelist = new ArrayList<ImageView>();
}
public void initData() {
//图片资源转成ImageView 对象
for (int i = 0; i < mImageId.length; i++) {
ImageView imview = new ImageView(this);
imview.setBackgroundResource(mImageId[i]);
imagelist.add(imview);
}
// 初始化标识小圆点
for (int i = 0; i < mImageId.length; i++) {
View point = new View(this);
//LayoutParams能够对View进行包装
LayoutParams params = new LayoutParams(10, 10);
if (i != 0) {
params.leftMargin =10;
}
point.setLayoutParams(params);
point.setEnabled(false);
//状态选择器作为背景
point.setBackgroundResource(R.drawable.selector_dot);
//添加子View
pointlayout.addView(point);
}
}
// ViewPager的适配器
private class MyViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return imagelist.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imagelist.get(position));
return imagelist.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
// ViewPager的事件监听
private class MyPagerListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
//System.out.println("当前页面为" + arg0);
update();
}
}
public void update() {
// 获取当前页面
int currentPage = vp.getCurrentItem();
// 小圆点的逻辑
for (int i = 0; i < pointlayout.getChildCount(); i++) {
// 将当前页面对应的小圆点的选中事件设置为真
pointlayout.getChildAt(i).setEnabled(i==currentPage);
}
}
}
状态选择器代码
说明:dot_focus/dot_unfocus这两张图片得自己准备
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
<item android:state_enabled="false" android:drawable="@drawable/dot_unfocus"></item>
</selector>