求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
     
   
分享到
Android仿QQ微信开场导航以及登陆界面
 

作者：eyu8874521，发布于2012-12-28，来源：CSDN
 

相信大家对于微信等社交应用的UI界面已经都很熟悉了，该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片，可以左右滑动浏览，最后进入应用，这一效果适用于多种项目中，相信今后开发应用一定会用得到。网路上也有不少这样的例子可以参考，不过看别人的代码是一回事，自己实际做起来又是另一回事，今天的这个微信的Demo是研究过多个类似的界面后自己动手去实现的效果，并且都加上了详细的注释(虽然有的多余)，方便以后回顾一看就能看明白，只有真正亲自写一写，体会才会更深刻，例子中的图片都是在微信的APK中提取出来的，涉及到的知识点无外乎是ViewPager和Animation。

首先是开场闪屏的一个界面，使用handler控制该页面指定时间后进行跳转

package com.example.weichat.UI;

import com.example.weichat.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

/** 开场欢迎动画 */
public class WelcomeA extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.strat);
		//延迟两秒后执行run方法中的页面跳转
		new Handler().postDelayed(new Runnable() {

			@Override
			public void run() {
				Intent intent = new Intent(WelcomeA.this, WhatsnewPagesA.class);
				startActivity(intent);
				WelcomeA.this.finish();
			}
		}, 2000);

接着是主要的部分，也就是一系列的功能介绍图片，主要是viewpager来实现，嵌套在上面的小圆点的跟随导航也是要实现的效果之一

        

package com.example.weichat.UI;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import com.example.weichat.R;

/** What's new 的导航界面 */
public class WhatsnewPagesA extends Activity {
	/** Viewpager对象 */
	private ViewPager viewPager;
	private ImageView imageView;
	/** 创建一个数组，用来存放每个页面要显示的View */
	private ArrayList<View> pageViews;
	/** 创建一个imageview类型的数组，用来表示导航小圆点 */
	private ImageView[] imageViews;
	/** 装显示图片的viewgroup */
	private ViewGroup viewPictures;
	/** 导航小圆点的viewgroup */
	private ViewGroup viewPoints;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		pageViews = new ArrayList<View>();
		pageViews.add(inflater.inflate(R.layout.viewpager01, null));
		pageViews.add(inflater.inflate(R.layout.viewpager02, null));
		pageViews.add(inflater.inflate(R.layout.viewpager03, null));
		pageViews.add(inflater.inflate(R.layout.viewpager04, null));
		pageViews.add(inflater.inflate(R.layout.viewpager05, null));
		pageViews.add(inflater.inflate(R.layout.viewpager06, null));

		// 小圆点数组，大小是图片的个数
		imageViews = new ImageView[pageViews.size()];
		// 从指定的XML文件中加载视图
		viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null);

		viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
		viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);

		// 添加小圆点导航的图片
		for (int i = 0; i < pageViews.size(); i++) {
			imageView = new ImageView(WhatsnewPagesA.this);
			imageView.setLayoutParams(new LayoutParams(20, 20));
			imageView.setPadding(5, 0, 5, 0);
			// 吧小圆点放进数组中
			imageViews[i] = imageView;
			// 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是
			if (i == 0)
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
			else
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_unfocused));
			// 将imageviews添加到小圆点视图组
			viewPoints.addView(imageViews[i]);
		}

		setContentView(viewPictures);

		viewPager.setAdapter(new NavigationPageAdapter());
		// 为viewpager添加监听，当view发生变化时的响应
		viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
	}

	// 导航图片view的适配器，必须要实现的是下面四个方法
	class NavigationPageAdapter extends PagerAdapter {

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

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		// 初始化每个Item
		@Override
		public Object instantiateItem(View container, int position) {
			((ViewPager) container).addView(pageViews.get(position));
			return pageViews.get(position);
		}

		// 销毁每个Item
		@Override
		public void destroyItem(View container, int position, Object object) {
			((ViewPager) container).removeView(pageViews.get(position));
		}

	}

	// viewpager的监听器，主要是onPageSelected要实现
	class NavigationPageChangeListener implements OnPageChangeListener {

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override
		public void onPageSelected(int position) {
			// 循环主要是控制导航中每个小圆点的状态
			for (int i = 0; i < imageViews.length; i++) {
				// 当前view下设置小圆点为选中状态
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
				// 其余设置为飞选中状态
				if (position != i)
					imageViews[i].setImageDrawable(getResources().getDrawable(
							R.drawable.page_indicator_unfocused));
			}
		}

	}

	// 开始按钮方法，开始按钮在XML文件中onClick属性设置；
	// 我试图把按钮在本activity中实例化并设置点击监听，但总是报错，使用这个方法后没有报错，原因没找到
	public void startbutton(View v) {
		Intent intent = new Intent(WhatsnewPagesA.this, WhatsnewAnimationA.class);
		startActivity(intent);
		WhatsnewPagesA.this.finish();
	}

}

而后的便是开门的动画效果了，这一块还是比较简单的，分别控制两幅图片的移动动画就可以实现

package com.example.weichat.UI;

import com.example.weichat.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

/**导航过后的动画效果界面*/
public class WhatsnewAnimationA extends Activity {

	private ImageView img_left, img_right;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.whatnew_animation);
		img_left = (ImageView) findViewById(R.id.doorpage_left);
		img_right = (ImageView) findViewById(R.id.doorpage_right);

		//创建一个AnimationSet对象
		AnimationSet animLeft = new AnimationSet(true);
		TranslateAnimation transLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				-1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//设置动画效果持续的时间
		transLeft.setDuration(2000);
		//将anim对象添加到AnimationSet对象中
		animLeft.addAnimation(transLeft);
		animLeft.setFillAfter(true);
		img_left.startAnimation(transLeft);
		transLeft.startNow();
		
		
		
		//创建一个AnimationSet对象
		AnimationSet animRight = new AnimationSet(true);
		TranslateAnimation transRight = new TranslateAnimation(
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		//设置动画效果持续的时间
		transRight.setDuration(2000);
		//将anim对象添加到AnimationSet对象中
		animRight.addAnimation(transRight);
		animRight.setFillAfter(true);
		img_right.startAnimation(transRight);
		transRight.startNow();
		
		new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				Intent intent = new Intent(WhatsnewAnimationA.this, FirstPageA.class);
				startActivity(intent);
				WhatsnewAnimationA.this.finish();
			}
		}, 1000);
	}
	

}

最后进入到我们的登陆界面，就是一个简单的微信登陆布局，代码就不贴了

OK了，以上就是微信第一次使用的时候开场功能介绍和动画，比较使用，适用于为自己发布新产品的时候作为导航简介，大家可以根据具体要求具体设计，不过大致思路都是这样的。

 
分享到
 
 

android人机界面指南
Android手机开发（一）
Android手机开发（二）
Android手机开发（三）
Android手机开发（四）
iPhone消息推送机制实现探讨
手机软件测试用例设计实践
手机客户端UI测试分析
手机软件自动化测试研究报告
更多...   

Android高级移动应用程序
Android应用开发
Android系统开发
手机软件测试
嵌入式软件测试
Android软、硬、云整合

领先IT公司 android开发平台最佳实践
北京 Android开发技术进阶
某新能源领域企业 Android开发技术
某航天公司 Android、IOS应用软件开发
阿尔卡特 Linux内核驱动
艾默生 嵌入式软件架构设计
西门子 嵌入式架构设计
更多...