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;}@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(views.get(position));return views.get(position);}@Overridepublic 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 {@Overrideprotected 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) {}/*动画过程中*/@Overridepublic void onAnimationRepeat(Animation animation) {}/*动画结束后*/@Overridepublic void onAnimationEnd(Animation animation) {Intent intent=new Intent(WelcomeActivity.this,GiudeActivity.class);//跳转到导航页面startActivity(intent);finish();//跳转过后销毁原页面，使点击返回键时不回返回该页面}});}@Overridepublic 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;@Overrideprotected 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页面转换成viewguideViews.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() {@Overridepublic 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);//不是当前页面的圆点图标为未选中的}}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});tvGo.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {Intent intent=new Intent(GiudeActivity.this,LoginActivity.class);startActivity(intent);finish();//跳转过后销毁原页面，使点击返回键时不回返回该页面}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.giude, menu);return true;}}

10.运行就可以出现导航效果了。

更多相关文章

随机推荐