Android小程序-Walker导航页面（四）

最新推荐文章于 2024-04-10 08:15:50 发布

Vivinia_Vivinia

最新推荐文章于 2024-04-10 08:15:50 发布

阅读量5.1k

点赞数

分类专栏： Android项目文章标签：导航小圆点 Activity Android Button

本文链接：https://blog.csdn.net/hester_hester/article/details/51252000

版权

Android项目专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍如何创建Android小程序的Walker导航页面，包括欢迎界面的模糊到清晰过渡，自动跳转到带有小圆点指示器的导航页面。在第四页，通过点击Go按钮可进入登录界面。主要涉及的步骤包括新建WelcomeActivity和GuideActivity，设置背景图及小圆点导航等。

摘要由CSDN通过智能技术生成

目标效果：

程序运行出现图一walker的欢迎界面，从模糊变清晰，过了几秒自动跳到图二的导航界面，下边有小圆点表示第几个页面，第四个导航页面有一个Go按钮，点击跳转到登录界面。

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.运行就可以出现导航效果了。

参考代码：点击打开链接