`
wangqiang6028
  • 浏览: 87672 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

阅读更多
相信大家对于微信等社交应用的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了,以上就是微信第一次使用的时候开场功能介绍和动画,比较使用,适用于为自己发布新产品的时候作为导航简介,大家可以根据具体要求具体设计,不过大致思路都是这样的。
转自:http://blog.csdn.net/eyu8874521/article/details/8332366
  • 大小: 93 KB
  • 大小: 56.6 KB
  • 大小: 40.1 KB
  • 大小: 50.1 KB
  • 大小: 26 KB
分享到:
评论

相关推荐

    基于Android的仿QQ微信聊天系统 (2).zip

    【标题】: "基于Android的仿QQ微信聊天系统 (2)" 涉及的主要知识点是构建一个类似QQ和微信的移动通信应用,该系统在Android平台上实现,利用Java编程语言和可能涉及到的Apache相关技术。 【描述】: "基于Android的...

    Android 仿QQ微信登录页面-IT计算机-毕业设计.zip

    在Android应用开发中,创建一个类似QQ或微信的登录页面是一项常见的任务,它涉及到界面设计、用户交互以及数据验证等多个方面。本项目“Android 仿QQ微信登录页面”是一个源码示例,适用于毕业设计和论文研究,旨在...

    android studio仿微信主界面

    在Android开发领域,构建类似微信主界面的应用是一个常见的需求,这涉及到用户界面设计、导航以及交互体验等多个方面。本文将详细讲解如何使用Android Studio来实现这一目标,主要聚焦于ViewPager和Fragment的结合...

    Android应用源码之仿QQ微信登录页面.zip

    这篇详细的分析将带你深入理解如何在Android平台上创建一个仿照QQ和微信登录界面的应用。首先,我们要明白,这个源码项目旨在教你如何构建一个具有用户输入框、登录按钮以及可能包含验证码功能的登录界面,这样的...

    Android仿QQ微信登录界面效果.rar

    一个界面设计方面的例子,Android仿QQ微信登录界面效果,主要是基于对布局main.xml上控件的操作,模拟出了微信整体的登录界面样式和风格,包括了登录时的弹框和提示,以及文字变颜色等功能,是学习android手机界面...

    Android 仿QQ微信登录页面.zip

    在本项目"Android 仿QQ微信登录页面"中,开发者旨在提供一个仿照QQ和微信登录界面的Android应用示例。这个源码项目是对于初学者或者希望提升UI设计技能的开发者来说,是一个很好的学习资源。它涵盖了Android平台上的...

    基于Android的仿QQ微信聊天系统

    在本项目"基于Android的仿QQ微信聊天系统"中,我们将会探讨如何使用Android平台开发一个类似QQ和微信的即时通讯应用。这个系统的核心功能包括用户注册与登录、好友管理、一对一聊天以及群组聊天。这里我们将深入解析...

    Android仿 QQ 微信 表情

    本项目“Android仿QQ微信表情”旨在帮助开发者理解并实现这些平台的表情输入和展示机制。通过分析和学习该项目,我们可以掌握以下几个关键知识点: 1. **自定义键盘(Soft Keyboard)**: - Android系统提供了`...

    仿QQ微信小程序源码.zip

    【标题】: "仿QQ微信小程序源码.zip" 指的是一份包含有类似QQ与微信小程序设计和功能的源代码压缩包。这通常是一个开发项目,旨在为用户提供一个平台,体验与QQ和微信小程序类似的交互和界面设计。源码是软件开发的...

    Android 仿qq微信@功能

    在Android应用开发中,"仿qq微信@功能"是一个常见的需求,主要涉及到用户在聊天或者评论中提及(@)其他用户的功能。这个功能的核心在于实现用户输入时的自动补全、高亮显示以及后续的数据交互。下面将详细介绍实现...

    仿QQ微信,Android开发中网络连接状态的判断(判断android设备是否有网络)

    仿QQ微信,Android开发中网络连接状态的判断(判断android设备是否有网络),详细了解请移步http://blog.csdn.net/zxc514257857/article/details/69219113

    仿微信 Android Studio

    【标题】"仿微信 Android Studio" 是一个专为Android开发者设计的项目,旨在帮助他们学习如何构建类似微信的用户界面。这个项目不仅关注外观的模仿,更注重代码的组织结构和可读性,使得初学者能够理解并学习到...

    原创android仿QQ微信,融云输入框

    "原创android仿QQ微信,融云输入框"项目正是这样一个实例,它实现了融云SDK与微信、QQ风格的输入框功能。下面将详细阐述这个项目中的关键知识点。 首先,我们关注的是自定义View的概念。在Android中,系统提供的...

    android 仿微信界面

    在Android开发中,仿微信界面是一项常见的需求,它涉及到用户界面设计、动画效果以及功能实现等多个方面。微信作为一款社交应用,其用户界面简洁而高效,具有很高的用户体验标准。下面,我们将深入探讨如何在Android...

    Android 仿QQ微信登录页面.zip项目安卓应用源码下载

    Android 仿QQ微信登录页面.zip项目安卓应用源码下载Android 仿QQ微信登录页面.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考

Global site tag (gtag.js) - Google Analytics