一起来做个拜年App吧!

下载apk试用密码: wjep
去github看源码

前言

马上就要过年了, 做一个App来送祝福是不错的哦, 这里我考虑用ViewPager来做, 大家可以考虑用其它的试试看哦.

效果图

不废话, 先上图. 可以认为分成两部分, 先是一个闪屏页, 然后再是滑动页.

效果图

闪屏页

布局图

闪屏页不难做, 关键是动画的设置. 直接上代码.

public class SplashActivity extends AppCompatActivity {

    private LinearLayout ll_splash;
    private AnimationSet animationSet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        initUI();
        initAnim();
        //4. 启动动画
        ll_splash.setAnimation(animationSet);
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Intent intent = new Intent(getApplication(), GuideActivity.class);
                startActivity(intent);
                finish();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

    /**
     * 初始化动画Animation
     */
    private void initAnim() {
        //1.1 旋转动画
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);

        //1.2 设置时长
        rotateAnimation.setDuration(500);
//        rotateAnimation.setRepeatCount(1);
//        rotateAnimation.setRepeatMode(Animation.REVERSE);

        //1.3 保持动画结束
        rotateAnimation.setFillAfter(true);

        //2. 缩放动画
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);

        scaleAnimation.setDuration(500);
        scaleAnimation.setFillAfter(true);

        //3. 渐变动画
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(1000);
        alphaAnimation.setFillAfter(true);

        //4. 动画集合
        animationSet = new AnimationSet(true);
        animationSet.addAnimation(rotateAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(alphaAnimation);
    }

    /**
     * 初始化界面ui
     */
    private void initUI() {
        ll_splash = (LinearLayout) findViewById(R.id.ll_splash);
    }
}

解析:

来简单解析一下, 第一步就是创建各种动画(你可以弄得简约一些, 也可以夸张一些), 然后添加到一个动画集合当中, 设置给我们的视图. 之后还要监听下动画结束, 在结束之后调用下一个activity并且关闭当前的activity, 然后就到了滑动页.

滑动页

来看看滑动页布局代码, 因为有些视图是在代码中生成, 所以布局图看不出效果.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.so.happynewyear.activity.GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/bt_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="52dp"
        android:background="@drawable/btn_guide_selector"
        android:onClick="toMain"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:text="@string/bt_start"
        android:textColor="@drawable/color_guide_selector"
        android:visibility="invisible" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp">

        <LinearLayout
            android:id="@+id/ll_guide_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>

        <ImageView
            android:id="@+id/iv_red_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/shape_point_red"
            tools:ignore="ContentDescription" />
    </RelativeLayout>
</RelativeLayout>

滑动页就没有这么简单了, 当然了, 如果你有一个自己已经写好的PagerAdapter子类就要舒服多了. 适配器的代码我就不添了, 可以去看源码.

    /**
     * 初始化数据
     */
    private void initData() {
        imageViews = new ArrayList<>();
        for (int i = 0; i < mImageIds.length; i++) {
            //1. 添加图片资源
            ImageView view = new ImageView(this);
            view.setBackgroundResource(mImageIds[i]);
            imageViews.add(view);

            //2. 初始化导航圆点
            ImageView point = new ImageView(this);

            //3. 修改属性值
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);

            if (i > 0) {
                params.leftMargin = 32;
            }

            point.setLayoutParams(params);

            //4. 添加导航圆点
            point.setImageResource(R.drawable.shape_point_gray);
            ll_guide_point.addView(point);
        }
    }

解析:

先要初始化数据, 向ArrayList中添加图片和同等数量的圆点. 不要忘了给圆点设置外边距, 否则就难看了.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);

        initUI();
        initData();

        vp_pager.setAdapter(new GuideAdapter(this, imageViews));

        vp_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                float leftMargin = mPointsDis * (position + positionOffset);

                RelativeLayout.LayoutParams params
                        = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();

                params.leftMargin = (int) leftMargin;

                iv_red_point.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {
                if (position == imageViews.size() - 1) {
                    bt_start.setVisibility(View.VISIBLE);
                } else {
                    bt_start.setVisibility(View.INVISIBLE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                        //measure->layout->draw(在onCreate执行完成之后执行)
                        //layout方法执行结束之后的回调
                        mPointsDis = ll_guide_point.getChildAt(1).getLeft() - ll_guide_point.getChildAt(0).getLeft();
                        Log.i(TAG, "mPointsDis: " + mPointsDis);
                    }
                });
    }

在填充好ArrayList之后, 我们要对滑页进行监听, 主要有两个目的:

第一个就是前面的页面都是不需要按钮的, 最后一个页面要加上一个按钮, 可以用来关闭App或者是跳转到其它activity.

第二个就是滑动页面的时候让下面的小红点(代表当前页所在位置)一起跟着动. 有一个麻烦的点就是说, 要等视图绘制完成了我们才可以计算出两个小圆点之间的距离, 但是我们现在在onCreate之中, 所以我这里加了一个监听, 绘制(onLayout)完成会回调我们这里加的监听, 当然我们监听以此就可以了, 之后不需要了, 记得取消iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);.

最后

行了, 就说到这里. 大家完全可以在我的代码的基础上加上更多有趣的东西, 比如播放语音啊, 贴上照片啊, 或者改成情人节告白App也是妥妥的哦. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也没问题哦.

下载apk试用密码: wjep
去github看源码

一起来做个拜年App吧!

前言

效果图

闪屏页

滑动页

最后

猜你喜欢