`
1320438999
  • 浏览: 122203 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Android之ViewPager显示应用新特性

 
阅读更多

我们都知道,很多应用在安装后第一次使用都会有一个新特性显示,一个好的新特性显示,将给客户带来更好的体验,因此,当我们做一个应用的时候,不能忽视这个问题,不得不佩服微信在这方面做得很不错。今天我就来模仿微信新特性的显示,做一个小应用。

源码下载地址:http://download.csdn.net/detail/weidi1989/4562605

废话不多说,先上效果图:

最后一张,增加了一个开门的动画效果:

下面是主要的类结构:

下面开始贴代码:

LoginActivity代码:
package com.way.viewpager;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.view.Window;
import android.widget.ImageView;

/**
 * 
 * @author way
 * 
 */
public class LoginActivity extends Activity {
	private static final int ISNEW = 0x001;// 是否为
	private static final int COMPLETE = 0x002;// 新特性显示完毕
	private Context mContext = this;
	private DotMarks mDotMarks;
	private ImageView ivLeftImage,ivRightImage;
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case ISNEW:
				// if (WhatIsNewUtils.isFirstUse(LoginActivity.this))
				// {//如果是第一次使用该应用
				init();
				// 保存标记,下一次打开程序WhatIsNewUtils.isFirstUse(LoginActivity.this)返回的是false
				WhatIsNewUtils.saveFirstUseFlag(LoginActivity.this);
				// }else{
				// setContentView(R.layout.activity_main);
				// }

				break;
			case COMPLETE:
				View mainView = LayoutInflater.from(mContext).inflate(R.layout.activity_main, null);
				setContentView(mainView);
				Animation enterAnim = AnimationUtils.loadAnimation(mContext, R.anim.main_activity_enter_anim);
				enterAnim.setFillAfter(true);
				mainView.startAnimation(enterAnim);
				break;
			default:
				break;
			}
		}
	};

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.login);
		new Timer().schedule(new TimerTask() {

			@Override
			public void run() {
				Message msg = Message.obtain();
				msg.what = ISNEW;
				handler.sendMessage(msg);
			}
		}, 2000);
	}

	/**
	 * 初始化新特性界面
	 */
	private void init() {
		LayoutInflater layoutInflater = LayoutInflater.from(mContext);
		View what_is_new = layoutInflater.inflate(R.layout.what_is_new, null);

		View pageOne = layoutInflater.inflate(R.layout.layout1, null);
		View pageTwo = layoutInflater.inflate(R.layout.layout2, null);
		View pageThree = layoutInflater.inflate(R.layout.layout3, null);
		ivLeftImage = (ImageView)pageThree.findViewById(R.id.iv_left_image01);
		ivRightImage = (ImageView)pageThree.findViewById(R.id.iv_left_image02);
		
		ViewPager viewPager = (ViewPager) what_is_new
				.findViewById(R.id.view_pager);
		List<View> viewItems = new ArrayList<View>();
		viewItems.add(pageOne);
		viewItems.add(pageTwo);
		viewItems.add(pageThree);
		viewPager.setAdapter(new WhatIsNewAdapter(viewItems));
		mDotMarks = (DotMarks) what_is_new.findViewById(R.id.dot_marks);
		/**
		 * 翻页监听事件,用于更新索引小图片
		 */
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			/**
			 * 根据ViewPager的页面的变化来实时更新索引小图标
			 * */
			public void onPageSelected(int arg0) {
				mDotMarks.updateMark(arg0);// 更新
			}

			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
			}

			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
			}
		});
		/**
		 * 最后一个View添加点击事件,用于切换视图
		 */
		pageThree.setOnClickListener(new OnClickListener() {

			public void onClick(View v) {
				mDotMarks.setVisibility(View.INVISIBLE);	startAnimation();//开始动画
			}
		});
		this.setContentView(what_is_new);
	}
	/**
	 * 动画
	 */
	private void startAnimation(){
		Animation leftAnim = AnimationUtils.loadAnimation(mContext, R.anim.slide_left_anim);
		Animation rightAnim = AnimationUtils.loadAnimation(mContext, R.anim.slide_right_anim);
//		final Animation fadeAnim = AnimationUtils.loadAnimation(mContext, R.anim.fade_anim);
		leftAnim.setFillAfter(true);
		rightAnim.setFillAfter(true);
		rightAnim.setAnimationListener(new AnimationListener() {
			
			public void onAnimationStart(Animation animation) {
//					mDotMarks.startAnimation(fadeAnim);
			}
			
			public void onAnimationRepeat(Animation animation) {
				
			}
			
			public void onAnimationEnd(Animation animation) {//动画结束
				Message msg = handler.obtainMessage();
				msg.what = COMPLETE;
				handler.sendMessage(msg);
			}
		});
		ivLeftImage.startAnimation(leftAnim);
		ivRightImage.startAnimation(rightAnim);
	}
}

自定义DotMarks,就是下面三个小圆点,模拟翻页效果:
package com.way.viewpager;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
/**
 * 
 * @author way
 *
 */
public class DotMarks extends LinearLayout {
	private ImageView mark_one, mark_two, mark_three;//三个小点图片
	private Drawable guide_focus = getResources().getDrawable(
			R.drawable.guide_focus);//焦点图片资源
	private Drawable guide_default = getResources().getDrawable(
			R.drawable.guide_default);//非焦点图片资源

	public DotMarks(Context context) {
		super(context);
		init(context);
	}

	public DotMarks(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}
	/**
	 * 初始化
	 * @param context
	 * 上下文对象
	 */
	private void init(Context context) {
		LayoutInflater layoutInflater = LayoutInflater.from(context);
		View dotmarks = layoutInflater.inflate(R.layout.dot_marks, null);
		this.addView(dotmarks);
		mark_one = (ImageView) dotmarks.findViewById(R.id.dot_mark1);
		mark_two = (ImageView) dotmarks.findViewById(R.id.dot_mark2);
		mark_three = (ImageView) dotmarks.findViewById(R.id.dot_mark3);
		
		//设置一个默认值
		mark_one.setImageResource(R.drawable.guide_focus);
		mark_two.setImageResource(R.drawable.guide_default);
		mark_three.setImageResource(R.drawable.guide_default);
	}

	/**
	 * 
	 * 根据传递进来的页面的索引切换小图标的显示
	 * 
	 * */
	public void updateMark(int index) {
		switch (index) {
		case 0:
			mark_one.setImageDrawable(guide_focus);
			mark_two.setImageDrawable(guide_default);
			mark_three.setImageDrawable(guide_default);
			break;
		case 1:
			mark_one.setImageDrawable(guide_default);
			mark_two.setImageDrawable(guide_focus);
			mark_three.setImageDrawable(guide_default);
			break;
		case 2:
			mark_one.setImageDrawable(guide_default);
			mark_two.setImageDrawable(guide_default);
			mark_three.setImageDrawable(guide_focus);
			break;

		default:
			break;
		}
	}

}

新特性适配器WhatIsNewAdapter:
package com.way.viewpager;

import java.util.List;

import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
 * 
 * @author way
 *
 */
public class WhatIsNewAdapter extends PagerAdapter {
	public List<View> mListViews;

	public WhatIsNewAdapter(List<View> mListViews) {
		this.mListViews = mListViews;
	}

	@Override
	public void destroyItem(View arg0, int arg1, Object arg2) {
		((ViewPager) arg0).removeView(mListViews.get(arg1));
	}

	@Override
	public void finishUpdate(View arg0) {
	}

	@Override
	public int getCount() {
		return mListViews.size();
	}

	@Override
	public Object instantiateItem(View arg0, int arg1) {
		((ViewPager) arg0).addView(mListViews.get(arg1), 0);
		return mListViews.get(arg1);
	}

	@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) {
	}

}

工具类WhatIsNewUtils,用来判断用户是否第一次使用该app:
package com.way.viewpager;

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;

/**
 * 
 * @author way
 * */
public class WhatIsNewUtils 
{

	private static String WHAT_IS_NEW_PRE_NAME = "what_is_new_pre_name";
	
	private static String FIRST_USE_FLAG = "first_use_flag";
	 /**
	  * 
      * 判断是否是第一次使用该应用程序
      * 
      * */
    public static boolean isFirstUse(Context context)
    {
    	SharedPreferences sharedPreferences = context.getSharedPreferences(WHAT_IS_NEW_PRE_NAME, Activity.MODE_PRIVATE);
        boolean flag = sharedPreferences.getBoolean(FIRST_USE_FLAG, true);
        return flag;
    }
    
    /**
     * 
     *保存第一次使用的信息
     * 
     * */
    public static void saveFirstUseFlag(Context context)
    {
    	SharedPreferences sharedPreferences = context.getSharedPreferences(WHAT_IS_NEW_PRE_NAME, Activity.MODE_PRIVATE);
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putBoolean(FIRST_USE_FLAG, false);
        editor.commit();
    }
    
}

新特性的主布局文件what_is_new.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <com.way.viewpager.DotMarks
        android:id="@+id/dot_marks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:paddingBottom="50dp" />

</RelativeLayout>
三个小圆点的布局文件dot_marks.xml:
<?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:orientation="horizontal" >


    <ImageView
        android:id="@+id/dot_mark1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/guide_default" />



    <ImageView
        android:id="@+id/dot_mark2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/guide_default" />


    <ImageView
        android:id="@+id/dot_mark3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/guide_default" />

</LinearLayout>
还有其他一些动画效果跟布局的文件,我就不贴出来了。


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics