这篇文章主要介绍了 Android 利用 ViewPager 实现用户引导界面效果的方法, 结合实例形式详细分析了 Android 软件功能界面的初始化、view 实例化、动画功能实现与布局相关技巧, 需要的朋友可以参考下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
本文实例讲述了 Android 利用 ViewPager 实现用户引导界面效果。分享给大家供大家参考,具体如下:
我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍,
例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置。
今天我就来实现这么个功能
所实现的功能:
1. 可以左右滑动功能图片。
2. 图片的索引 看出当前图片所在的位置。
3. 可循环滑动。
4. 图片的索引带有动画效果。
本次学习主要是利用 ViewPager 实现用户引导界面
在这里,我们需要用到 google 提到的一个支持包——Android-support-v4.jar,这个包包含了一些非常有用的类,其中就是 ViewPager 类来实现页面之间的切换操作,可以去官网下载这个包 使用谷歌提供的支持库 (Android)
关于 android-support-v4.jar 的详细信息,大家可以访问 google 官方网站:{aa0aa}
下面是我的实现
GuideActivity.Java
- /**
- * @author manymore13
- */
- public class GuideActivity extends Activity {
- // 到达最后一张
- private static final int TO_THE_END = 0;
- // 离开最后一张
- private static final int LEAVE_FROM_END = 1;
- // 如果想直接应用到你的项目中,只需在这里添加删除图片id即可
- private int[] ids = { R.drawable.guide_1,
- R.drawable.guide_3, R.drawable.guide_5,
- R.drawable.guide_6,R.drawable.guide_7
- };
- private List<View> guides = new ArrayList<View>();
- private ViewPager pager;
- private ImageView start; // 点击体验
- private ImageView curDot;
- private LinearLayout dotContain; // 存储点的容器
- private int offset; // 位移量
- private int curPos = 0; // 记录当前的位置
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.main);
- init();
- }
- private ImageView buildImageView(int id)
- {
- ImageView iv = new ImageView(this);
- iv.setImageResource(id);
- ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
- ViewGroup.LayoutParams.FILL_PARENT,
- ViewGroup.LayoutParams.FILL_PARENT);
- iv.setLayoutParams(params);
- iv.setScaleType(ScaleType.FIT_XY);
- return iv;
- }
- // 功能介绍界面的初始化
- private void init()
- {
- this.getView();
- initDot();
- ImageView iv = null;
- guides.clear();
- for (int i = 0; i < ids.length; i++) {
- iv = buildImageView(ids[i]);
- guides.add(iv);
- }
- System.out.println("guild_size="+guides.size());
- // 当curDot的所在的树形层次将要被绘出时此方法被调用
- curDot.getViewTreeObserver().addOnPreDrawListener(
- new OnPreDrawListener() {
- public boolean onPreDraw() {
- // 获取ImageView的宽度也就是点图片的宽度
- offset = curDot.getWidth();
- return true;
- }
- });
- final GuidePagerAdapter adapter = new GuidePagerAdapter(guides);
- // ViewPager设置数据适配器,这个类似于使用ListView时用的adapter
- pager.setAdapter(adapter);
- pager.clearAnimation();
- // 为Viewpager添加事件监听器 OnPageChangeListener
- pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
- @Override
- public void onPageSelected(int position)
- {
- int pos = position % ids.length;
- moveCursorTo(pos);
- if (pos == ids.length-1) {// 到最后一张了
- handler.sendEmptyMessageDelayed(TO_THE_END, 500);
- } else if (curPos == ids.length - 1) {
- handler.sendEmptyMessageDelayed(LEAVE_FROM_END, 100);
- }
- curPos = pos;
- super.onPageSelected(position);
- }
- });
- }
- /**
- * 在layout中实例化一些View
- */
- private void getView()
- {
- dotContain = (LinearLayout)this.findViewById(R.id.dot_contain);
- pager = (ViewPager) findViewById(R.id.contentPager);
- curDot = (ImageView) findViewById(R.id.cur_dot);
- start = (ImageView) findViewById(R.id.open);
- start.setOnClickListener(new OnClickListener()
- {
- public void onClick(View v)
- {
- // 点击体验
- }
- });
- }
- /**
- * 初始化点 ImageVIew
- * @return 返回true说明初始化点成功,否则实例化失败
- */
- private boolean initDot()
- {
- if(ids.length > 0){
- ImageView dotView ;
- for(int i=0; i<ids.length; i++)
- {
- dotView = new ImageView(this);
- dotView.setImageResource(R.drawable.dot1_w);
- dotView.setLayoutParams(new LinearLayout.LayoutParams(
- ViewGroup.LayoutParams.WRAP_CONTENT,
- ViewGroup.LayoutParams.WRAP_CONTENT,1.0f));
- dotContain.addView(dotView);
- }
- return true;
- }else{
- return false;
- }
- }
- /**
- * 移动指针到相邻的位置 动画
- * @param position
- * 指针的索引值
- * */
- private void moveCursorTo(int position) {
- AnimationSet animationSet = new AnimationSet(true);
- TranslateAnimation tAnim =
- new TranslateAnimation(offset*curPos, offset*position, 0, 0);
- animationSet.addAnimation(tAnim);
- animationSet.setDuration(300);
- animationSet.setFillAfter(true);
- curDot.startAnimation(animationSet);
- }
- Handler handler = new Handler() {
- @Override
- public void handleMessage(Message msg) {
- if (msg.what == TO_THE_END)
- start.setVisibility(View.VISIBLE);
- else if (msg.what == LEAVE_FROM_END)
- start.setVisibility(View.GONE);
- }
- };
- // ViewPager 适配器
- class GuidePagerAdapter extends PagerAdapter{
- private List<View> views;
- public GuidePagerAdapter(List<View> views){
- this.views=views;
- }
- @Override
- public void destroyItem(View arg0, int arg1, Object arg2) {
- ((ViewPager) arg0).removeView(views.get(arg1 % views.size()));
- }
- @Override
- public void finishUpdate(View arg0) {
- }
- @Override
- public int getCount() {
- // 注意这里一定要返回一个稍微大点值,不然滑到顶就滑不动了
- return views.size()*20;
- }
- @Override
- public Object instantiateItem(View arg0, int arg1) {
- Log.e("tag", "instantiateItem = "+arg1);
- ((ViewPager) arg0).addView(views.get(arg1 % views.size()),0);
- return views.get(arg1 % views.size());
- }
- @Override
- public boolean isViewFromObject(View arg0, Object arg1) {
- return arg0 == (arg1);
- }
- @Override
- public void restoreState(Parcelable arg0, ClassLoader arg1) {
- }
- @Override
- public Parcelable saveState() {
- return null;
- }
- @Override
- public void startUpdate(View arg0) {
- }
- }
- }
下面是布局 main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <android.support.v4.view.ViewPager
- android:id="@+id/contentPager"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_gravity="center"
- android:flipInterval="30"
- android:persistentDrawingCache="animation" />
- <FrameLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:layout_centerHorizontal="true"
- android:gravity="center"
- android:layout_marginBottom="22.0dip">
- <LinearLayout
- android:id="@+id/dot_contain"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:orientation="horizontal" >
- </LinearLayout>
- <ImageView
- android:id="@+id/cur_dot"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/dot2_w" />
- </FrameLayout>
- <ImageView
- android:id="@+id/open"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentTop="true"
- android:layout_alignParentRight="true"
- android:clickable="true"
- android:src="@drawable/ic_open"
- android:visibility="gone" />
- </RelativeLayout>
运行效果:
希望本文所述对大家 Android 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0328/238714.html