欢迎界面+引导进入经典案例

时间：2015-03-14 23:14:50 阅读：200 评论：0 收藏：0 [点我收藏+]

标签：

看引导界面效果

技术分享

先看欢迎界面的布局（动画效果）

技术分享

activity_welcome.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rl_root"
    android:background="@drawable/splash_bg_newyear" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash_horse_newyear" />

</RelativeLayout>

再看欢迎界面的activity

WelcomeActivity.java

package com.example.bjnews.activity;

import com.example.bjnews.R;
import com.example.bjnews.util.SPUtil;

import android.os.Bundle;
import android.util.Log;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;
import android.widget.Toast;
import android.app.Activity;
import android.content.Intent;

public class WelcomeActivity extends Activity {
	private RelativeLayout rl_root;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_welcome);
		init();
	}

	private void init() {
		rl_root = (RelativeLayout) findViewById(R.id.rl_root);
		//旋转
		RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		rotateAnimation.setDuration(2000);
		rotateAnimation.setFillAfter(true);
		//缩放
		ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		scaleAnimation.setDuration(2000);
		scaleAnimation.setFillAfter(true);
		//透明度
		AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
		alphaAnimation.setDuration(2000);
		alphaAnimation.setFillAfter(true);
		//添加动画
		AnimationSet animationSet = new AnimationSet(false);
		animationSet.addAnimation(rotateAnimation);
		animationSet.addAnimation(scaleAnimation);
		animationSet.addAnimation(alphaAnimation);
		rl_root.startAnimation(animationSet);
		
		//动画监听事件
		animationSet.setAnimationListener(new MyAnimation());
	}
	class MyAnimation implements AnimationListener{

		@Override
		public void onAnimationEnd(Animation animation) {
			//是否已经进入过主界面（默认没有进入过）
			boolean isEnterMain = SPUtil.getInstance(WelcomeActivity.this).getboolean("isEnterMain", false);
			
			Log.e("TAG", "isEnterMain"+isEnterMain);
			if (isEnterMain) {
				//进入过，进入到主界面
				startActivity(new Intent(WelcomeActivity.this,MainActivity.class ));
				Log.e("TAG", "Main");
			}else {
				//没进入过，计入向导界面
				Log.e("TAG", "guide");
				startActivity(new Intent(WelcomeActivity.this,GuideActivity.class ));
			}
			finish();
		}

		@Override
		public void onAnimationRepeat(Animation animation) {
			
		}

		@Override
		public void onAnimationStart(Animation animation) {
			
		}
		
	}
}

另外为上对象提供一个工具类（用来保存是否是第一次进入应用）

SPUtil.java

package com.example.bjnews.util;

import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;

public class SPUtil {
	// 构造器私有
	private SPUtil() {
	}

	// 私有、静态实例
	private static SPUtil instance = new SPUtil();

	// 公共、静态方法获取实例
	public static SPUtil getInstance(Context context) {
		if (sp == null) {
			sp = context.getSharedPreferences("atguigu", Context.MODE_PRIVATE);
		}
		return instance;
	}

	private static SharedPreferences sp;

	// 保存数据的方法
	public void put(String key, Object defValue) {
		
		Editor edit = sp.edit();
		if (defValue instanceof Boolean) {
			edit.putBoolean(key, (Boolean) defValue);
		}
		if (defValue instanceof String) {
			edit.putString(key, (String) defValue);
		}
		if (defValue instanceof Integer) {
			edit.putInt(key, (Integer) defValue);
		}
		edit.commit();
		
	}

	// 获取数据
	public String getString(String key, String defValue) {
		return sp.getString(key, defValue);
	}

	public int getInt(String key, int defValue) {
		return sp.getInt(key, defValue);
	}

	public boolean getboolean(String key, boolean defValue) {
		return sp.getBoolean(key, defValue);
	}
}

接下来开始进行引导界面的操作了

先看布局

activity_guide.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/btn_enterMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        android:background="@drawable/enter_main_button_selector_bg"
        android:text="开始体验"
        android:textColor="@drawable/enter_main_button_text_selector"
        android:visibility="gone" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp" >

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <View
            android:id="@+id/red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_red"/>
    </RelativeLayout>

</RelativeLayout>

针对引导界面还需要提供4个xml文件（进入体验button的按下效果切换，以及还有3个状态切换圆点）
enter_main_button_selector_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:drawable="@drawable/button_red_pressed"></item>
    <item android:state_checked="false" android:drawable="@drawable/button_red_normal"></item>

</selector>

enter_main_button_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:color="@android:color/black"></item>
    <item android:state_checked="false" android:color="@android:color/white"></item>

</selector>

point_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#55000000"/>
</shape>

point_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#ff0000"/>
</shape>

接下来就该注意的向导界面代码了

GuideActivity.java

package com.example.bjnews.activity;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;

import com.example.bjnews.R;
import com.example.bjnews.util.SPUtil;

public class GuideActivity extends Activity {
	private ViewPager viewpager;// 三个滑动的页面
	private ArrayList<ImageView> imageViews;// 三个滑动页面对应的图片集合
	private Button btn_enterMain;// 开始体验按钮

	private LinearLayout ll_point_group;// 下方的三个显示圆点为
	private View red_point;// 当前页面的高亮显示圆点

	private int leftMax;// 2个原点之前的距离

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guide);
		// 获取点的集合
		ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
		// 获取高亮的红点
		red_point = findViewById(R.id.red_point);
		// 获取viewpager
		viewpager = (ViewPager) findViewById(R.id.viewpager);
		// 获取button(开始体验)
		btn_enterMain = (Button) findViewById(R.id.btn_enterMain);
		// 创建集合
		imageViews = new ArrayList<ImageView>();

		// 准备数据
		int[] ids = { R.drawable.guide_1, R.drawable.guide_2,
				R.drawable.guide_3 };
		for (int i = 0; i < ids.length; i++) {
			ImageView imageView = new ImageView(this);// 创建图片对象
			imageView.setBackgroundResource(ids[i]);// 为图片设置背景
			imageViews.add(imageView);// 添加图片
			View point = new View(this);// 添加下标点-创建点击
			LayoutParams params = new LayoutParams(10, 10);// 创建布局参数
			// 除开第0个点，其他的都要距离左边有10个像素
			if (i != 0) {
				params.leftMargin = 10;
			}

			point.setBackgroundResource(R.drawable.point_normal);// 添加背景图片

			point.setLayoutParams(params);// 设置布局参数

			ll_point_group.addView(point);// 添加指示点击

		}

		// 设置适配器
		viewpager.setAdapter(new viewpagerAdapter());

		// 监听当onLayout方法执行的时候再去
		red_point.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {
					@Override
					public void onGlobalLayout() {

						// 取消注册监听--因为孩子也会调用
						red_point.getViewTreeObserver()
								.removeGlobalOnLayoutListener(this);
						// 两点间的间距
						leftMax = ll_point_group.getChildAt(1).getLeft()
								- ll_point_group.getChildAt(0).getLeft();
					}
				});

		/**
		 * 设置页面改变监听
		 */
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int position) {
				//只有第三种页面显示进入按钮
				if (position == 2) {
					btn_enterMain.setVisibility(View.VISIBLE);
				} else {
					btn_enterMain.setVisibility(View.GONE);
				}
			}

			/*
			 * 位置 屏幕上滑动的百分比 滑动的显示
			 */
			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// 计算要滑动的距离=间距*在屏幕上滑动的百分比
				int distance = (int) (leftMax * (positionOffset + position));
				RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
						10, 10);
				params.leftMargin = distance;
				red_point.setLayoutParams(params);
			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
		/**
		 * 为开始体验button添加点击事件
		 */
		btn_enterMain.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// 标记为true
				SPUtil.getInstance(GuideActivity.this).put("isEnterMain", true);
				// 进入主界面
				startActivity(new Intent(GuideActivity.this, MainActivity.class));
				// 干掉自己
				finish();
			}
		});
	}

	class viewpagerAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return imageViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return (arg0 == arg1);
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			ImageView imageView = imageViews.get(position);
			container.addView(imageView);

			return imageView;
		}
	}
}

另外最后还有一个主界面测试用（布局文件没有东西）

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

</RelativeLayout>

MainActivity.java

package com.example.bjnews.activity;

import com.example.bjnews.R;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

欢迎界面+引导进入经典案例

标签：

原文地址：http://blog.csdn.net/u013210620/article/details/44264129

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行