Android小程序-Walker注册页面（四）
目标效果：
程序运行出现图一walker的欢迎界面，从模糊变清晰，过了几秒自动跳到图二的导航界面，下边有小圆点表示第几个页面，第四个导航页面有一个Go按钮，点击跳转到登录界面。
项目压缩包：http://pan.baidu.com/s/1c2t11Kk
1.首先新建两个Android页面，生成WelcomeActivity.java页面和对应的xml布局，GiudeActivity.java页面和对应的xml布局。
2.activity_welcome.xml页面添加背景图。
activity_welcome.xml页面：
<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"
android:id="@+id/layoutwelcome"
android:background="@drawable/welcome_bg"
tools:context=".WelcomeActivity" >
</RelativeLayout>
3.新建view1_of_pager.xml页面，view2_of_pager.xml页面，view3_of_pager.xml页面，view4_of_pager.xml页面，其中前三个页面除背景图片外都一样，第四个页面多了一个text为Go的TextView。
view1_of_pager.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_1"
android:orientation="vertical" >
</LinearLayout>
view4_of_pager.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_4"
android:orientation="vertical" >
<TextView
android:id="@+id/tvGo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="16dp"
android:layout_marginRight="19dp"
android:background="@drawable/start_select"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="30sp"
android:text="Go" />
</RelativeLayout>
4.新建start_select.xml页面，作为Go的点击样式处理页面，start_before.xml页面为点击前样式页面，start_after.xml页面为点击后样式页面。
start_select.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<!-- Go点击选择 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/start_before"
android:state_pressed="false"/><!-- 未按下 -->
<item android:drawable="@drawable/start_after"
android:state_pressed="true"/><!-- 按下 -->
</selector>
start_before.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<!-- Go点击之前样式 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#2362a7"/>
<size android:height="80dp"
android:width="80dp"/>
</shape>
start_after.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<!-- Go点击之后样式 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#333333"/>
<size android:height="80dp"
android:width="80dp"/>
</shape>
5.因为在导航页面翻动时下边的小圆点会根据页面来改变样式，新建bg_point_select.xml页面为小圆点选中样式页面，bg_point.xml页面为小圆点未选中样式页面。
bg_point_select.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#427ab7"/>
<size
android:height="8dp"
android:width="8dp"/>
</shape>
bg_point.xml页面：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@android:color/black"/>
<size
android:height="8dp"
android:width="8dp"/>
</shape>
6.activity_giude.xml页面放置导航背景和下边四个小圆点。
activity_giude.xml页面：
<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=".GiudeActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/vpGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp" >
<ImageView
android:id="@+id/ivGuide_dot1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_point_selected" />
<ImageView
android:id="@+id/ivGuide_dot2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_point" />
<ImageView
android:id="@+id/ivGuide_dot3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_point" />
<ImageView
android:id="@+id/ivGuide_dot4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_point" />
</LinearLayout>
</RelativeLayout>
7.新建GuideAdapter.java页面，作为处理页面翻动的适配器。
GuideAdapter.java页面：
package com.example.login;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class GuideAdapter extends PagerAdapter {
private List<View> views;
public GuideAdapter(List<View> views){
this.views=views;
}
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view=views.get(position);
container.removeView(view);
}
}
8.WelcomeActivity.java页面处理欢迎界面的动画效果。
WelcomeActivity.java页面：
package com.example.login;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.widget.RelativeLayout;
public class WelcomeActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_welcome);
RelativeLayout layoutWelcome=(RelativeLayout) findViewById(R.id.layoutwelcome);//获取xml布局
AlphaAnimation alphaAnimation=new AlphaAnimation(0.1f,1.0f);//实例动画设置透明度的变化，参数为float型
alphaAnimation.setDuration(3000);//动画的变化时间
layoutWelcome.startAnimation(alphaAnimation);//将动画应用到获取到的布局上
/*动画对应的三个过程*/
alphaAnimation.setAnimationListener(new AnimationListener() {
@Override
/*动画开始*/
public void onAnimationStart(Animation animation) {
}
/*动画过程中*/
@Override
public void onAnimationRepeat(Animation animation) {
}
/*动画结束后*/
@Override
public void onAnimationEnd(Animation animation) {
Intent intent=new Intent(WelcomeActivity.this,GiudeActivity.class);//跳转到导航页面
startActivity(intent);
finish();//跳转过后销毁原页面，使点击返回键时不回返回该页面
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.welcome, menu);
return true;
}
}
9.GiudeAdapter.java页面处理导航页面的翻动和点击事件。
GiudeAdapter.java页面：
package com.example.login;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;
public class GiudeActivity extends Activity {
private List<View> guideViews;
private ViewPager vpGuide;
private int[] guide_dots={R.id.ivGuide_dot1,R.id.ivGuide_dot2,R.id.ivGuide_dot3,R.id.ivGuide_dot4};
private ImageView[] dots;
private TextView tvGo;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_giude);
initGuideViews();
initDots();
setListeners();
}
private void initGuideViews() {
vpGuide=(ViewPager) findViewById(R.id.vpGuide);
guideViews=new ArrayList<View>();
LayoutInflater layoutInflater=LayoutInflater.from(this);//寻找Layout下边的xml文件
guideViews.add(layoutInflater.inflate(R.layout.view1_of_pager,null));
guideViews.add(layoutInflater.inflate(R.layout.view2_of_pager,null));
guideViews.add(layoutInflater.inflate(R.layout.view3_of_pager,null));
/*需要获取id为tvGo的控件，所以需要抽取出view4_of_pager.xml页面*/
View view4=layoutInflater.inflate(R.layout.view4_of_pager,null);//将xml页面转换成view
guideViews.add(view4);
tvGo=(TextView)view4.findViewById(R.id.tvGo);
GuideAdapter guideAdapter=new GuideAdapter(guideViews);//实例自定义适配器
vpGuide.setAdapter(guideAdapter);//添加适配器
}
/*设置圆点小图标*/
private void initDots() {
dots=new ImageView[4];
for(int i=0;i<dots.length;i++){
dots[i]=(ImageView) findViewById(guide_dots[i]);
}
}
/*导航滑动*/
private void setListeners() {
vpGuide.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
for(int i=0;i<guide_dots.length;i++){
if(position==i){
dots[i].setImageResource(R.drawable.bg_point_selected);//当前页面圆点图标为选中的
}
else{
dots[i].setImageResource(R.drawable.bg_point);//不是当前页面的圆点图标为未选中的
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
tvGo.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Intent intent=new Intent(GiudeActivity.this,LoginActivity.class);
startActivity(intent);
finish();//跳转过后销毁原页面，使点击返回键时不回返回该页面
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.giude, menu);
return true;
}
}
10.运行就可以出现导航效果了。