下载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看源码
网友评论