相信大家对于微信等社交应用的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); } }
最后进入到我们的登陆界面，就是一个简单的微信登陆布局，代码就不贴了
