ViewPager之引导页
一、概述
ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换。
本文介绍ViewPager最基础的应用:在多个View之间进行切换,亦即ViewPager的每个页面是个View。
这种模式适合每个页面的逻辑较为简单的情况,比如去实现“小红书”引导页这样的效果:
二、实现思路
2.1 页面如何布局
这个引导页一共有三个页面,毫无疑问上面的标题和配图是隶属于viewpager不同页面内部的,而下面的俩按钮则是直接放在Activity的布局中。
那indicator呢?虽然在不同的页面红点的位置不一样,但它不能放在页面的布局中,否则,三个点就会跟配图一样整体滑动了……
2.2 代码如何实现
ViewPager是什么鬼呢?其实它就是个ViewGroup,用法跟ListView类似,重点在于实现这样一个Adapter:
private class ViewPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
return 0; //ViewPager总共有几个页面
} @Override
public boolean isViewFromObject(View view, Object object) {
return false; //判断一个页面(View)是否与instantiateItem方法返回的Object一致
} @Override
public Object instantiateItem(ViewGroup container, int position) {
return super.instantiateItem(container, position); //创建一个页面
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object); //销毁一个页面
}
}
[转载请保留本文地址:http://www.cnblogs.com/snser/p/5700751.html]
三、开始干活
3.1 摆出activity和每个页面的布局
viewpager_view.xml (activity的布局):
<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:background="@drawable/viewpager_view_bg"
tools:context="${relativePackage}.${activityClass}" > <android.support.v4.view.ViewPager
android:id="@+id/viewpager_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/viewpager_view_bg" /> <ImageView
android:id="@+id/viewpager_view_point"
android:layout_width="66.7dp"
android:layout_height="10dp"
android:layout_centerHorizontal="true"
android:layout_above="@+id/viewpager_view_register"
android:layout_marginBottom="20dp"
android:src="@drawable/viewpager_view_point_1" /> <Button
android:id="@+id/viewpager_view_register"
android:layout_width="190dp"
android:layout_height="45dp"
android:layout_centerHorizontal="true"
android:layout_above="@+id/viewpager_view_login"
android:layout_marginBottom="10dp"
android:background="@drawable/viewpager_view_register_bg"
android:textSize="19sp"
android:textColor="#FFFFFF"
android:text="@string/viewpager_view_register" /> <Button
android:id="@+id/viewpager_view_login"
android:layout_width="190dp"
android:layout_height="45dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:background="@drawable/viewpager_view_login_bg"
android:textSize="19sp"
android:textColor="#999999"
android:text="@string/viewpager_view_login" /> </RelativeLayout>
viewpager_view_page.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"
tools:context="${relativePackage}.${activityClass}" > <TextView
android:id="@+id/viewpager_view_page_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:textColor="#333333"
android:text="@string/viewpager_view_page_title_1" /> <ImageView
android:id="@+id/viewpager_view_page_content"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="385dp"
android:layout_marginTop="75dp"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"
android:src="@drawable/viewpager_view_page_content_1" /> </RelativeLayout>
3.2 简要介绍一下即将出炉的核心代码
public class ViewPagerViewActivity extends Activity implements View.OnClickListener { private ViewPager mPager;
private ImageView mImgPoint; private SparseArray<View> mPageCache = new SparseArray<View>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_view);
initView();
} private void initView() {
mPager = (ViewPager)findViewById(R.id.viewpager_view_pager);
mImgPoint = (ImageView)findViewById(R.id.viewpager_view_point);
mPager.setAdapter(new ViewPagerAdapter(ViewPagerViewActivity.this));
mPager.addOnPageChangeListener(new OnViewPageChangeListener());
findViewById(R.id.viewpager_view_register).setOnClickListener(this);
findViewById(R.id.viewpager_view_login).setOnClickListener(this);
} private class ViewPagerAdapter extends PagerAdapter {
private final int mCount = 3;
private LayoutInflater mInflater; private ViewPagerAdapter(Context context) {
mInflater = LayoutInflater.from(context);
} @Override
public int getCount() {
return mCount;
} @Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
} @Override
public Object instantiateItem(ViewGroup container, int position) {
View page = mPageCache.get(position);
if (page == null) {
page = mInflater.inflate(R.layout.viewpager_view_page, container, false);
TextView txtTitle = (TextView)page.findViewById(R.id.viewpager_view_page_title);
ImageView imgContent = (ImageView)page.findViewById(R.id.viewpager_view_page_content);
switch (position) {
case 0:
txtTitle.setText(R.string.viewpager_view_page_title_1);
imgContent.setImageResource(R.drawable.viewpager_view_page_content_1);
break;
case 1:
txtTitle.setText(R.string.viewpager_view_page_title_2);
imgContent.setImageResource(R.drawable.viewpager_view_page_content_2);
break;
case 2:
txtTitle.setText(R.string.viewpager_view_page_title_3);
imgContent.setImageResource(R.drawable.viewpager_view_page_content_3);
break;
default:
break;
}
mPageCache.append(position, page);
}
container.addView(page);
return page;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
} private class OnViewPageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
} @Override
public void onPageSelected(int position) {
switch (position) {
case 0:
mImgPoint.setImageResource(R.drawable.viewpager_view_point_1);
break;
case 1:
mImgPoint.setImageResource(R.drawable.viewpager_view_point_2);
break;
case 2:
mImgPoint.setImageResource(R.drawable.viewpager_view_point_3);
break;
default:
break;
}
} @Override
public void onPageScrollStateChanged(int state) {
}
} @Override
public void onClick(View v) {
finish();
}
}
重点关注下 ViewPagerAdapter :
在 instantiateItem 方法中会inflate出新的页面,再根据不同的position对页面进行对应的初始化工作,同时在ViewPager中添加当前页面。
而在 destroyItem 方法中,只需要将当前页面从ViewPager中移除即可。
同时,需要给ViewPager设置一个 OnPageChangeListener ,以便在页面切换的时候更新Indicator对应的小红点位置。
3.3 关于缓存
可以看到,上面的代码在 instantiateItem 方法中用到了页面缓存,亦即每个position对应的页面只需要inflate一次。
那为什么会有缓存的需求呢?这是因为ViewPager每次加载当前页面的同时,会自动预加载(instantiateItem)与当前页面左右相隔的两个页面,同时会销毁(destroyItem)与当前页面不相邻的页面。
设想一下,滑动到第三个页面时,第一个页面会被销毁掉,而滑回第二个页面时,又会重新创建第一个页面。如果不加以缓存,就会造成页面的重复inflate从而浪费资源、降低性能。
[转载请保留本文地址:http://www.cnblogs.com/snser/p/5700751.html]
四、demo工程
保存下面的图片,扩展名改成 .zip 即可
[转载请保留本文地址:http://www.cnblogs.com/snser/p/5700751.html]
ViewPager之引导页的更多相关文章
- ViewPager实现引导页
1. 要使用ViewPager,必须要创建 PagerAdapter. 这里创建一个 ViewPagerAdapter来继承PagerAdapter public class ViewPagerAda ...
- ViewPager实现引导页(添加导航点,判断是否第一次进入主界面)
1.引导页的4个界面布局,里面加载一张背景图片 插入到guide的界面布局中(这里不用fragment) guide_background_fragment1.xml <?xml version ...
- ViewPager滑动引导页
ViewPager实现Animation动画引导页 http://blog.csdn.net/ye_scofield/article/details/44831357 SurfaceView实现动 ...
- ViewPager—01引导页的制作
布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- 安卓第一次启动引导页使用ViewPager实现
我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...
- ViewPager打造轮播图(Banner)\引导页(Guide)
今年7月时,在Github发布了一个开源的Banner库,虽然Star不多,但还是有少部分人使用. Banner效果: 昨天,有使用此库的同学提出需求,想在引导页的时候用这个库并且最后一页有进入按钮 ...
- Android ViewPager欢迎页+引导页+进入首页
import android.app.Activity; import android.content.Intent; import android.content.SharedPreferences ...
- android使用ViewPager实现欢迎引导页
android使用ViewPager实现欢迎引导页 大多数APP第一次启动的时候,都会有一个引导界面,左右滑动,到最后一张,用户点击才再次进入主界面.当第二次启动的时候,则直接进入主界面. 这种效果一 ...
- Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)
Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 ...
随机推荐
- 使用Masstransit开发基于消息传递的分布式应用
Masstransit作为.Net平台下的一款优秀的开源产品却没有得到应有的关注,这段时间有机会阅读了Masstransit的源码,我觉得我有必要普及一下这个框架的使用. 值得一提的是Masstran ...
- C#对WebApi数据操作
目标 简化并统一程序获取WebApi对应实体数据的过程,方便对实体进行扩充.原理就是数据服务使用反射发现数据提供者,处理好泛型就行. 相关传送门:Restful WebApi开发实践 先来看下最后的请 ...
- 延迟求值-如何让Lo-Dash再提速x100?
「注释」作者在本文里没有说明这么一个事实: 目前的版本Lo-Dash v2.4.1并没有引入延迟求值的特性,Lo-Dash 3.0.0-pre中部分方法进行了引入,比如filter(),map(),r ...
- Go语言实战 - 使用SendCloud群发邮件
山坡网需要能够每周给注册用户发送一封名为"本周最热书籍"的邮件,而之前一直使用的腾讯企业邮箱罢工了,提示说发送请求太多太密集. 一番寻找之后发现了大家口碑不错的搜狐SendClou ...
- Windows操作系统下tomcat安装版图文教程
下载tomcat安装文件,官方下载地址是:http://tomcat.apache.org/,本文以tomcat-7.0.26版本为例进行安装过程的说明: 1.双击apache-tomcat-7.0. ...
- es6学习笔记
class Point { constructor(x, y) { this.x = x; this.y = y; } static classMethod() { console.log('fath ...
- webpack入门之简单例子跑起来
webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时 ...
- C# 复制PDF页面到另一个PDF文档
C# 复制PDF页面到另一个PDF文档 有时候我们可能有这样一个需求,那就是把PDF页面从一个PDF文档复制到另一个PDF文档中.由于PDF文档并不像word文档那样好编辑,因此复制也相对没有那么容易 ...
- SpringMVC一路总结(一)
SpringMVC听闻已久,早在去年就被学长问到关于SpringMVC的基础知识,当时也没在意.主要是工作中也没有用到关于SpringMVC的技术,因此免于没有时间和精力的借口就没有接触和学习Spri ...
- DotNet生成随机数的一些方法
在项目开发中,一般都会使用到“随机数”,但是在DotNet中的随机数并非真正的随机数,可在一些情况下生成重复的数字,现在总结一下在项目中生成随机数的方法. 1.随机布尔值: /// <summa ...