开发学院手机开发 Android 开发 Android仿QQ微信开场导航以及登陆界面阅读

Android仿QQ微信开场导航以及登陆界面

　2012-12-20 15:17:13　来源：WEB开发网　　　

核心提示： 大家对于微信等社交应用的UI界面已经都很熟悉了，该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片，Android仿QQ微信开场导航以及登陆界面，可以左右滑动浏览，最后进入应用，开始按钮在XML文件中onClick属性设置；// 我试图把按钮在本activity中实例化并设置点击监听，但总是报错，这一效果适

大家对于微信等社交应用的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();
	}

}