下载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);
}
}
解析:
来看看滑动页布局代码, 因为有些视图是在代码中生成, 所以布局图看不出效果.
<?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);
}
}
解析:
@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之后, 我们要对滑页进行监听, 主要有两个目的:
iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this);
.行了, 就说到这里. 大家完全可以在我的代码的基础上加上更多有趣的东西, 比如播放语音啊, 贴上照片啊, 或者改成情人节告白App也是妥妥的哦. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也没问题哦.
下载apk试用 密码: wjep 去github看源码