ViewPager实现Android向导页
来源:互联网 发布:云购cms源码 编辑:程序博客网 时间:2024/04/27 15:53
APP第一次安装,用户向导是司空见惯。没有复杂的动画的话,一般就用viewpager控件左右切换几张图片即可。下面圆点指示图片的索引位置。
先看效果图。
一,android布局文件的实现。
viewpager放在最下面全屏幕显示,上面覆盖几个圆点。操作按钮浮在底部。
<RelativeLayout android:id="@+id/rl_guide" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/guide_bg2" android:orientation="vertical"> <!--viewpager,用户左右滑动--> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/heigt20"/> <!--底部操作按钮,左右,体验--> <RelativeLayout android:layout_width="match_parent" android:layout_height="70dp" android:layout_alignParentBottom="true" android:background="@color/common_bg"> <ImageView android:id="@+id/iv_pre_guide" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_centerHorizontal="true" android:layout_marginLeft="@dimen/heigt20" android:src="@drawable/ic_left"/> <ImageView android:id="@+id/iv_next_guide" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentRight="true" android:layout_centerHorizontal="true" android:layout_marginRight="@dimen/heigt20" android:src="@drawable/ic_right"/> <ImageView android:id="@+id/iv_guide_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:src="@drawable/guide_finish"/> </RelativeLayout> <!--小圆点--> <LinearLayout android:id="@+id/ll_dots" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="80dp" android:orientation="horizontal"> </LinearLayout></RelativeLayout>
二,viewPager item布局
视情况添加,本例就是展示图片。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/home_bg" android:orientation="vertical"> <ImageView android:id="@+id/iv_main" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerInside"/></LinearLayout>
三,ViewPager主要实现逻辑
findViewById这样的方法就不贴出来了。后续附上源码下载。
主要展示核心代码。
//全屏无标题显示this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.getWindow().setFlags(WindowManager.LayoutParams.F
//初始化向导页面图片,图片放在drawable文件夹中。int[] pagerImages = { R.drawable.bg1,R.drawable.bg2,R.drawable.bg3,R.drawable.bg4,R.drawable.bg6,R.drawable.bg7,R.drawable.bg8,};
viewpager展示数据
vp = (ViewPager) findViewById(R.id.viewpager);vp.setOnPageChangeListener(onPageChangedListener); //设置viewpager监听//向集合中添加元素for(int imageId:pagerImages) { list.add(imageId);}if (vpAdapter==null){ vpAdapter = new GuideVPAdapter(list,context); vp.setAdapter(vpAdapter);}else{ vpAdapter.notifyDataSetChanged();}
GuideVPAdapter,适配器,展示图片
/** * Created by duqian on 15/10/8. */public class GuideVPAdapter extends BasePagerAdapter<Integer> { public GuideVPAdapter(List<Integer> list, Context context) { super(list, context); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = View.inflate(context, R.layout.item_guide_pager, null); container.addView(view); ImageView iv_main = (ImageView) view.findViewById(R.id.iv_main); if (position==0){ iv_main.setScaleType(ImageView.ScaleType.FIT_XY); }else{ iv_main.setScaleType(ImageView.ScaleType.CENTER_INSIDE); } iv_main.setImageResource(list.get(position)); return view; }}
四,初始化底部小圆点,用于表示切换的位置
//初始化底部小圆点,代码生成,追加到LinearLayout布局中 private void initDots() { LinearLayout ll_dots = (LinearLayout) findViewById(R.id.ll_dots); dotList = new ArrayList<>(); for (int i = 0; i < pagerImages.length; i++) { ImageView point = new ImageView(this);//每个点是一ImageView LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, -2); params.leftMargin = 15; point.setLayoutParams(params); point.setBackgroundResource(R.drawable.point_bg);//selector选择器控制颜色 ll_dots.addView(point); dotList.add(point);//添加指示点 //默认情况下,第一个小点enable为true if (i == 0) { point.setEnabled(true); } else { point.setEnabled(false); } } }
selector中定义两种状态的颜色的圆形状,作为ImageView的背景,以便setBackgroundResource。
<?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/point_focused" /> <item android:state_enabled="false" android:drawable="@drawable/point_nomal" /></selector>
小圆点不建议使用图片,可以xml中用形状实现。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:width="8dp" android:height="8dp" /> <solid android:color="@color/dot_blue" /></shape>
五,监听viewpager页面改变的事件。
//监听viewpager左右滑动,根据位置,做相应的操作。 private ViewPager.OnPageChangeListener onPageChangedListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { setCurDot(position); showOrDisplayPreview();//如果首页不同,可在这里判断0的位置,改变UI } @Override public void onPageScrollStateChanged(int state) { } };
六,改变当前页面的UI
/** *设置当前位置的点的状态,蓝色高亮显示 */ private void setCurDot(int positon) { if (positon < 0 || positon > pagerImages.length - 1 || currentIndex == positon) { return; } dotList.get(positon).setEnabled(true); dotList.get(currentIndex).setEnabled(false); currentIndex = positon; }
未完待续,欢迎交流,杜乾,Dusan。。。291902259。
0 0
- ViewPager实现Android向导页
- Android APP启动向导 一个非常简单的ViewPager向导:
- Android项目之ViewPager向导页面
- android开机向导实现
- Android向导页面的实现
- android开机向导的实现
- android开机向导的实现
- Android ViewPager实现引导页
- android引导页viewpager实现
- Android ViewPager实现引导页
- 用户向导左右滑动页面实现之ViewPager
- ViewPager向导demo
- Android ViewPager程序引导页的实现
- android通过viewpager实现引导页效果
- android使用ViewPager实现欢迎引导页
- Android学习记录:ViewPager实现欢迎页
- android使用ViewPager实现引导页效果
- Android ViewPager实现相册
- 资料分享(不定期更新。开始时间2016.4.20,最新更新时间2016.4.20)
- hdu 【1496】 Equations
- C++ map关联容器删除元素
- 单例的完整实现
- MVC中的扩展点(二)路由上的扩展
- ViewPager实现Android向导页
- 网站性能优化
- const static
- 49. Group Anagrams
- MVC中的扩展点(三)控制器工厂
- Struts2+Spring4+Hibernate4整
- 我做了一个计算器
- iOS分享微信联系人/朋友圈详解
- 程序源入坑之路2