黑马北京新闻项目连载(1)--->引导界面

看引导界面效果



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



activity_welcome.xml

[html] view
plaincopy





<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

[java] view
plaincopy





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

[java] view
plaincopy





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

[html] view
plaincopy





<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

[html] view
plaincopy





<?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

[html] view
plaincopy





<?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

[html] view
plaincopy





<?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

[html] view
plaincopy





<?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

[java] view
plaincopy





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

[html] view
plaincopy





<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</RelativeLayout>

MainActivity.java

[java] view
plaincopy





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);

}

}