Android仿QQ微信开场导航以及登陆界面-白红宇

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

阅读量：798 次

发布时间：2023-03-29

本文共 4114 字，大约阅读时间需要 13 分钟。

微信的UI界面设计在开发者中备受关注，尤其是其开场功能介绍和动画效果。以下是基于实际开发经验的详细解析和实现方法。

1. 开场欢迎动画

微信的开场动画采用了延迟加载的方式，通过Handler控制页面跳转。具体实现方式如下：

public class WelcomeA extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.strat);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(WelcomeA.this, WhatsnewPagesA.class));
                WelcomeA.this.finish();
            }
        }, 2000);
    }
}

2. 主要功能介绍界面

该界面主要使用ViewPager实现图片浏览，支持左右滑动浏览，并通过小圆点导航实现页面切换。核心代码如下：

public class WhatsnewPagesA extends Activity {
    private ViewPager viewPager;
    private ImageView[] imageViews;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        LayoutInflater inflater = getLayoutInflater();
        pageViews = new ArrayList<>();
        pageViews.add(inflater.inflate(R.layout.viewpager01, null));
        // 其他页面加载类似方式
        viewPager = (ViewPager) inflater.inflate(R.layout.viewpagers, null).findViewById(R.id.guidePagers);
        viewPoints = (ViewGroup) inflater.inflate(R.layout.viewpagers, null).findViewById(R.id.viewPoints);
        // 初始化小圆点
        imageViews = new ImageView[pageViews.size()];
        for (int i = 0; i < pageViews.size(); i++) {
            ImageView 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));
            }
            viewPoints.addView(imageViews[i]);
        }
        viewPager.setAdapter(new NavigationPageAdapter());
        viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
        setContentView(viewPictures);
    }
}

3. 动画效果实现

登录界面的动画效果通过TranslateAnimation实现，分别控制左右两幅图片的移动：

public class WhatsnewAnimationA extends Activity {
    private ImageView img_left, img_right;
    private AnimationSet animLeft, animRight;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.whatnew_animation);
        img_left = (ImageView) findViewById(R.id.doorpage_left);
        img_right = (ImageView) findViewById(R.id.doorpage_right);
        // 创建并开始动画
        animLeft = new AnimationSet(true);
        TranslateAnimation transLeft = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, -1f,
                Animation.RELATIVE_TO_SELF, 0f
        );
        transLeft.setDuration(2000);
        animLeft.addAnimation(transLeft);
        animLeft.setFillAfter(true);
        img_left.startAnimation(transLeft);
        transLeft.startNow();
        
        animRight = new AnimationSet(true);
        TranslateAnimation transRight = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0f,
                Animation.RELATIVE_TO_SELF, 1f,
                Animation.RELATIVE_TO_SELF, 0f
        );
        transRight.setDuration(2000);
        animRight.addAnimation(transRight);
        animRight.setFillAfter(true);
        img_right.startAnimation(transRight);
        transRight.startNow();
    }
}

4. 登录界面

登录界面采用简单的布局设计，代码如下：

public class LoginPageA extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);
        // 其他布局和逻辑
    }
}