京东APP手机客户端项目开发
项目工程创建
欢迎界面搭建
欢迎界面Activity创建
说明：
SplashActivity，它是整个APP启动的欢迎界面。相当于是一个引导界面，会有一定的动画效果。
MainActivity，相应于整个APP主窗口界面。此主窗口界面会通过SplashActivity引导来加载
AndroidManifest.xml文件代码
package="com.gxaedu.ui"
android:versionCode="1"
android:versionName="1.0">
android:minSdkVersion="14"
android:targetSdkVersion="17"/>
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
android:name="com.gxaedu.ui.SplashActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
欢迎界面的布局文件创建
splash.xml文件是整个欢迎界面的布局文件，参考代码如下：
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_bg">
android:id="@+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="120dp"
android:background="@drawable/splash_logo"/>
android:id="@+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/splash_logo"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/splash_loading_bg"/>
android:id="@+id/splash_loading_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="@drawable/splash_loading_item"/>
欢迎界面的图片资源加载
图片资源的加载会对应上面的splash.xml布局文件。根据上面的步骤运行测试效果图
欢迎界面动画效果实现
先告知大家一下，欢迎界面加载后会有一个进度条动画加载效果，当进度条加载完毕后会引导进行下一个MainActivity主窗口界面
Animation类介绍
在Android整个UI界面动画效果设计上提供一个套非常好的API，它可以实现旋转、缩放、淡入淡出等效果。
Android中的动画分类
TweenedAnimation：它提供旋转、移动、伸展、淡出等效果。Alpha代表淡出，Scale代表缩放，Rotate代表旋转，Translate代表移动
FrameAnimation：它可以创建Drawable序列，这些Drawable可以按照指定的时间间歇一个一个的显示。类似gif图片原理
注意：而这次我们设计京东APP欢迎界面就会用到Animation中移动效果（Translate）
如何实现Translate移动效果
这里采取利用配置xml文件来完成Translate的动画效果定义。在res目录下加载一个anim文件夹，这个文件夹就用来定义整个APP的动画
splash_loading.xml文件代码
android:duration="1000"//加载动画时间
android:fromXDelta="0.0"//始于X坐标
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toXDelta="60%p"//终于X坐标
android:fillAfter="true"/> Translate移动效果实例化
packagecom.gxaedu.ui;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.animation.Animation;
importandroid.view.animation.AnimationUtils;
importandroid.widget.ImageView;
publicclassSplashActivityextendsActivity{
privateImageViewiv_splash=null;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
iv_splash=(ImageView)findViewById(R.id.splash_loading_item);
Animationtranslate=AnimationUtils.loadAnimation(this,R.anim.splash_loading);
iv_splash.setAnimation(translate);
}
}
欢迎界面切换到主界面
从欢迎界面切换到主界面，我们需要先实现欢迎界面的动画监听事件，等待动画完成后调用startActivity进行两个Activity的切换。
Translate动画事件监听
动画事件的监听方法setAnimationListener，其中实现AnimationListener监听接口，且此接口中的方法如下：
onAnimationStart：当动画开始加载的时候运行此方法
onAnimationRepeat：当动画重复性的执行时候运行此方法
onAnimationEnd：当动画执行结束的时候运行此方法
packagecom.gxaedu.ui;
importandroid.app.Activity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.view.animation.Animation;
importandroid.view.animation.AnimationUtils;
importandroid.widget.ImageView;
publicclassSplashActivityextendsActivity{
privateImageViewiv_splash=null;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
iv_splash=(ImageView)findViewById(R.id.splash_loading_item);
Animationtranslate=AnimationUtils.loadAnimation(this,R.anim.splash_loading);
translate.setAnimationListener(newAnimation.AnimationListener(){//实现translate动画监听事件
@Override
publicvoidonAnimationStart(Animationanimation){
}
@Override
publicvoidonAnimationRepeat(Animationanimation){
}
@Override
publicvoidonAnimationEnd(Animationanimation){//动画结束后加载MainActivity
Intentintent=newIntent(SplashActivity.this,MainActivity.class);
startActivity(intent);
SplashActivity.this.finish();
}
});
iv_splash.setAnimation(translate);//设置图片的动画效果
}
}
|
|
