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

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

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

　　package comexampleweichatUI;

　　import comexampleweichatR;

　　import androidappActivity;

　　import androidcontentIntent;

　　import androidosBundle;

　　import androidosHandler;

　　/** 开场欢迎动画 */

　　public class WelcomeA extends Activity {

　　@Override

　　public void onCreate(Bundle savedInstanceState) {

　　superonCreate(savedInstanceState);

　　setContentView(Rlayoutstrat);

　　//延迟两秒后执行run方法中的页面跳转

　　new Handler()postDelayed(new Runnable() {

　　@Override

　　public void run() {

　　Intent intent = new Intent(WelcomeAthis WhatsnewPagesAclass);

　　startActivity(intent);

　　WelcomeAthisfinish();

　　}

　　} );

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

　　package comexampleweichatUI;

　　import javautilArrayList;

　　import androidappActivity;

　　import androidcontentIntent;

　　import androidosBundle;

　　import androidsupportvviewPagerAdapter;

　　import androidsupportvviewViewPager;

　　import androidsupportvviewViewPagerOnPageChangeListener;

　　import androidviewLayoutInflater;

　　import androidviewView;

　　import androidviewViewGroup;

　　import androidviewViewGroupLayoutParams;

　　import androidviewWindow;

　　import androidwidgetImageView;

　　import comexampleweichatR;

　　/** Whats new 的导航界面 */

　　public class WhatsnewPagesA extends Activity {

　　/** Viewpager对象 */

　　private ViewPager viewPager;

　　private ImageView imageView;

　　/** 创建一个数组用来存放每个页面要显示的View */

　　private ArrayList pageViews;

　　/** 创建一个imageview类型的数组用来表示导航小圆点 */

　　private ImageView[] imageViews;

　　/** 装显示图片的viewgroup */

　　private ViewGroup viewPictures;

　　/** 导航小圆点的viewgroup */

　　private ViewGroup viewPoints;

　　@Override

　　protected void onCreate(Bundle savedInstanceState) {

　　// TODO Autogenerated method stub

　　superonCreate(savedInstanceState);

　　requestWindowFeature(WindowFEATURE_NO_TITLE);

　　LayoutInflater inflater = getLayoutInflater();

　　pageViews = new ArrayList();

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　pageViewsadd(inflaterinflate(Rlayoutviewpager null));

　　// 小圆点数组大小是图片的个数

　　imageViews = new ImageView[pageViewssize()];

　　// 从指定的XML文件中加载视图

　　viewPictures = (ViewGroup) inflaterinflate(Rlayoutviewpagers null);

　　viewPager = (ViewPager) viewPicturesfindViewById(RidguidePagers);

　　viewPoints = (ViewGroup) viewPicturesfindViewById(RidviewPoints);

　　// 添加小圆点导航的图片

　　for (int i = ; i < pageViewssize(); i++) {

　　imageView = new ImageView(WhatsnewPagesAthis);

　　imageViewsetLayoutParams(new LayoutParams( ));

　　imageViewsetPadding(   );

　　// 吧小圆点放进数组中

　　imageViews[i] = imageView;

　　// 默认选中的是第一张图片此时第一个小圆点是选中状态其他不是

　　if (i == )

　　imageViews[i]setImageDrawable(getResources()getDrawable(

　　Rdrawablepage_indicator_focused));

　　else

　　imageViews[i]setImageDrawable(getResources()getDrawable(

　　Rdrawablepage_indicator_unfocused));

　　// 将imageviews添加到小圆点视图组

　　viewPointsaddView(imageViews[i]);

　　}

　　setContentView(viewPictures);

　　viewPagersetAdapter(new NavigationPageAdapter());

　　// 为viewpager添加监听当view发生变化时的响应

　　viewPagersetOnPageChangeListener(new NavigationPageChangeListener());

　　}

　　// 导航图片view的适配器必须要实现的是下面四个方法

　　class NavigationPageAdapter extends PagerAdapter {

　　@Override

　　public int getCount() {

　　return pageViewssize();

　　}

　　@Override

　　public boolean isViewFromObject(View arg Object arg) {

　　return arg == arg;

　　}

　　// 初始化每个Item

　　@Override

　　public Object instantiateItem(View container int position) {

　　((ViewPager) container)addView(pageViewsget(position));

　　return pageViewsget(position);

　　}

　　// 销毁每个Item

　　@Override

　　public void destroyItem(View container int position Object object) {

　　((ViewPager) container)removeView(pageViewsget(position));

　　}

　　}

　　// viewpager的监听器主要是onPageSelected要实现

　　class NavigationPageChangeListener implements OnPageChangeListener {

　　@Override

　　public void onPageScrollStateChanged(int arg) {

　　}

　　@Override

　　public void onPageScrolled(int arg float arg int arg) {

　　}

　　@Override

　　public void onPageSelected(int position) {

　　// 循环主要是控制导航中每个小圆点的状态

　　for (int i = ; i < imageViewslength; i++) {

　　// 当前view下设置小圆点为选中状态

　　imageViews[i]setImageDrawable(getResources()getDrawable(

　　Rdrawablepage_indicator_focused));

　　// 其余设置为飞选中状态

　　if (position != i)

　　imageViews[i]setImageDrawable(getResources()getDrawable(

　　Rdrawablepage_indicator_unfocused));

　　}

　　}

　　}

　　// 开始按钮方法开始按钮在XML文件中onClick属性设置;

　　// 我试图把按钮在本activity中实例化并设置点击监听但总是报错使用这个方法后没有报错原因没找到

　　public void startbutton(View v) {

　　Intent intent = new Intent(WhatsnewPagesAthis WhatsnewAnimationAclass);

　　startActivity(intent);

　　WhatsnewPagesAthisfinish();

　　}

　　}

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

　　package comexampleweichatUI;

　　import comexampleweichatR;

　　import androidappActivity;

　　import androidcontentIntent;

　　import androidosBundle;

　　import androidosHandler;

　　import androidviewanimationAnimation;

　　import androidviewanimationAnimationSet;

　　import androidviewanimationTranslateAnimation;

　　import androidwidgetImageView;

　　/**导航过后的动画效果界面*/

　　public class WhatsnewAnimationA extends Activity {

　　private ImageView img_left img_right;

　　@Override

　　protected void onCreate(Bundle savedInstanceState) {

　　// TODO Autogenerated method stub

　　superonCreate(savedInstanceState);

　　setContentView(Rlayoutwhatnew_animation);

　　img_left = (ImageView) findViewById(Riddoorpage_left);

　　img_right = (ImageView) findViewById(Riddoorpage_right);

　　//创建一个AnimationSet对象

　　AnimationSet animLeft = new AnimationSet(true);

　　TranslateAnimation transLeft = new TranslateAnimation(

　　AnimationRELATIVE_TO_SELF f AnimationRELATIVE_TO_SELF

　　f AnimationRELATIVE_TO_SELF f

　　AnimationRELATIVE_TO_SELF f);

　　//设置动画效果持续的时间

　　transLeftsetDuration();

　　//将anim对象添加到AnimationSet对象中

　　animLeftaddAnimation(transLeft);

　　animLeftsetFillAfter(true);

　　img_leftstartAnimation(transLeft);

　　transLeftstartNow();

　　//创建一个AnimationSet对象

　　AnimationSet animRight = new AnimationSet(true);

　　TranslateAnimation transRight = new TranslateAnimation(

　　AnimationRELATIVE_TO_SELF f AnimationRELATIVE_TO_SELF

　　f AnimationRELATIVE_TO_SELF f

　　AnimationRELATIVE_TO_SELF f);

　　//设置动画效果持续的时间

　　transRightsetDuration();

　　//将anim对象添加到AnimationSet对象中

　　animRightaddAnimation(transRight);

　　animRightsetFillAfter(true);

　　img_rightstartAnimation(transRight);

　　transRightstartNow();

　　new Handler()postDelayed(new Runnable() {

　　@Override

　　public void run() {

　　// TODO Autogenerated method stub

　　Intent intent = new Intent(WhatsnewAnimationAthis FirstPageAclass);

　　startActivity(intent);

　　WhatsnewAnimationAthisfinish();

　　}

　　} );

　　}

　　}

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