Android之ViewPager（仿微信引导界面以及动画效果 ）（二）



大多数人想要改造这个世界，但却罕有人想改造自己。

本讲内容：仿微信引导界面以及动画效果

效果图：

   

下面是res/layout/activity_main.xml 布局文件：

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

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

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="25dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/paint0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_focused" />

        <ImageView
            android:id="@+id/paint1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_unfocused" />

        <ImageView
            android:id="@+id/paint2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_unfocused" />

        <ImageView
            android:id="@+id/paint3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_unfocused" />

        <ImageView
            android:id="@+id/paint4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_unfocused" />

        <ImageView
            android:id="@+id/paint5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="7dp"
            android:src="@drawable/page_indicator_unfocused" />
    </LinearLayout>

</RelativeLayout>

下面是res/layout/guide_view01.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/w01"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text01"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />

</RelativeLayout>

下面是res/layout/guide_view02.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/w02"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text02"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />

</LinearLayout>

下面是res/layout/guide_view03.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/w03"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text03"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />

</LinearLayout>

下面是res/layout/guide_view04.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/w04"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text04"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />

</LinearLayout>

下面是res/layout/guide_view05.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/w05"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text05"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />

</LinearLayout>

下面是res/layout/guide_view06.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/w06"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text06"
        android:textColor="@color/TextColor"
        android:textSize="25sp" />
    
    <Button 
        android:id="@+id/startBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_vertical"
        android:layout_marginBottom="120dp"
        android:background="@drawable/start_weixin_btn"
        android:text="@string/guide_btn_text"
        android:textColor="@color/TextColor"
        android:textSize="20sp"/>

</RelativeLayout>

下面是res/layout/guide_door.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" >

    <ImageView
        android:id="@+id/imageLeft"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:scaleType="fitXY"
        android:src="@drawable/w_left" />

    <ImageView
        android:id="@+id/imageRight"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:src="@drawable/w_right"
        android:visibility="visible" />

    <TextView
        android:id="@+id/anim_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text=" \n \n微信，是一个生活方式\n \n "
        android:textColor="#fff"
        android:textSize="25sp" />

</RelativeLayout>

下面是res/layout/activity_other.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:orientation="vertical" 
    android:background="@drawable/bg">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="亲，可以开始你的微信生活了!"
        android:gravity="center_horizontal|center"
        android:textSize="20sp" />

</LinearLayout>

 下面是res/drawable/start_weixin_btn.xml 文件：（自定义按钮的效果）

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/whatsnew_btn_pressed" android:state_enabled="true" android:state_pressed="true"/>
    <!-- 按下时的效果 -->
    <item android:drawable="@drawable/whatsnew_btn_nor" android:state_enabled="true"/>
    <!-- 正常状态的效果 -->
</selector>

下面是ViewPagerAdapter.java文件：

//ViewPager适配器，用来绑定数据和view  
public class ViewPagerAdapter extends PagerAdapter {
	 //界面列表
	private ArrayList<View> views;

	public ViewPagerAdapter(ArrayList<View> views) {
		this.views = views;
	}

	// 获得当前页卡的数量
	public int getCount() {
		if (views != null) {
			return views.size();
		}
		return 0;
	}

	// 实例化(初始化)页卡
	public Object instantiateItem(View container, int position) {
		((ViewPager) container).addView(views.get(position), 0);// 添加页卡
		return views.get(position);
	}

	// 销毁页卡
	public void destroyItem(View container, int position, Object object) {
		((ViewPager) container).removeView(views.get(position));// 删除页卡
	}

	// 判断是否由对象生成界面
	public boolean isViewFromObject(View arg0, Object arg1) {
		return (arg0 == arg1);// 官方提示这样写
	}

}

下面是MainActivity.java主界面文件：

public class MainActivity extends Activity implements OnPageChangeListener {
	private ViewPager viewPager;// 定义ViewPager对象
	private ViewPagerAdapter vpAdapter;// 定义ViewPager适配器
	private ArrayList<View> views;// 定义一个ArrayList来存放View

	// 定义各个界面View对象
	private View view1, view2, view3, view4, view5, view6;
	// 定义底部小点图片
	private ImageView paint0, paint1, paint2, paint3, paint4, paint5;

	// 定义开始按钮对象
	private Button startBt;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initView();
		initData();
	}

	// 初始化组件
	private void initView() {
		// 实例化各个界面的布局对象
		LayoutInflater mLi = LayoutInflater.from(this);
		view1 = mLi.inflate(R.layout.guide_view01, null);
		view2 = mLi.inflate(R.layout.guide_view02, null);
		view3 = mLi.inflate(R.layout.guide_view03, null);
		view4 = mLi.inflate(R.layout.guide_view04, null);
		view5 = mLi.inflate(R.layout.guide_view05, null);
		view6 = mLi.inflate(R.layout.guide_view06, null);

		// 实例化ArrayList对象
		views = new ArrayList<View>();
		// 将要分页显示的View装入数组中
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);
		views.add(view5);
		views.add(view6);

		// 实例化ViewPager
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		// 实例化ViewPager适配器
		vpAdapter = new ViewPagerAdapter(views);

		// 实例化底部小点图片对象
		paint0 = (ImageView) findViewById(R.id.paint0);
		paint1 = (ImageView) findViewById(R.id.paint1);
		paint2 = (ImageView) findViewById(R.id.paint2);
		paint3 = (ImageView) findViewById(R.id.paint3);
		paint4 = (ImageView) findViewById(R.id.paint4);
		paint5 = (ImageView) findViewById(R.id.paint5);

		// 实例化开始按钮
		startBt = (Button) view6.findViewById(R.id.startBtn);
	}

	// 初始化数据
	private void initData() {
		// 设置监听
		viewPager.setOnPageChangeListener(this);
		// 设置适配器数据
		viewPager.setAdapter(vpAdapter);

		// 给开始按钮设置监听
		startBt.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				startButton();
			}
		});

	}

	// 当滑动状态改变时调用
	public void onPageScrollStateChanged(int arg0) {

	}

	// 当前页面被滑动时调用
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}

	// 当新的页面被选中时调用
	public void onPageSelected(int position) {
		switch (position) {
		case 0:
			paint0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		case 1:
			paint1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			paint2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		case 2:
			paint2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			paint3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		case 3:
			paint3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			paint2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		case 4:
			paint4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			paint5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		case 5:
			paint5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));
			paint4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));
			break;
		}
	}

	// 相应按钮点击事件
	private void startButton() {
		Intent intent = new Intent();
		intent.setClass(MainActivity.this, GuideViewDoor.class);
		startActivity(intent);
		this.finish();
	}

}

下面是GuideViewDoor.java界面文件：（要注册）

//功能描述：实现动画效果的入口activity
public class GuideViewDoor extends Activity {
	private ImageView mLeft, mRight;// 定义左右两张图片对象
	private TextView mText;// 定义一个文本对象

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.guide_door);

		// 实例化对象
		mLeft = (ImageView) findViewById(R.id.imageLeft);
		mRight = (ImageView) findViewById(R.id.imageRight);
		mText = (TextView) findViewById(R.id.anim_text);

		// 实例化动画对象
		AnimationSet anim = new AnimationSet(true);
		// 实例化位移动画对象
		TranslateAnimation mytranslateanim = new TranslateAnimation(
			Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				-1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		// 设置动画持续时间
		mytranslateanim.setDuration(2000);
		// 设置启动时间
		anim.setStartOffset(800);
		// 将位移动画添加进动画效果中
		anim.addAnimation(mytranslateanim);
		// 动画结束后，保留在终止位
		anim.setFillAfter(true);
		// 左边图启动该动画效果
		mLeft.startAnimation(anim);

		AnimationSet anim1 = new AnimationSet(true);
		TranslateAnimation mytranslateanim1 = new TranslateAnimation(
			Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
				+1f, Animation.RELATIVE_TO_SELF, 0f,
				Animation.RELATIVE_TO_SELF, 0f);
		mytranslateanim1.setDuration(1500);
		anim1.addAnimation(mytranslateanim1);
		anim1.setStartOffset(800);
		anim1.setFillAfter(true);
		mRight.startAnimation(anim1);// 右边图启动该动画效果

		AnimationSet anim2 = new AnimationSet(true);
		ScaleAnimation myscaleanim = new ScaleAnimation(1f, 3f, 1f, 3f,
		Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
		myscaleanim.setDuration(1000);
		AlphaAnimation myalphaanim = new AlphaAnimation(1, 0.0001f);
		myalphaanim.setDuration(1500);
		anim2.addAnimation(myscaleanim);
		anim2.addAnimation(myalphaanim);
		anim2.setFillAfter(true);
		mText.startAnimation(anim2);// 文字启动该动画效果

		//public final boolean postDelayed(Runnable r, long delayMillis)
		//从当前时间开始延迟delayMillis时间后执行Runnable，只执行一次
		new Handler().postDelayed(new Runnable() {
			public void run() {
		Intent intent = new Intent(GuideViewDoor.this,OtherActivity.class);
				startActivity(intent);
				GuideViewDoor.this.finish();
			}
		}, 2300);
	}

}

下面是OtherActivity.java界面文件： (要注册)

public class OtherActivity extends Activity {
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_other);
	}
}

Take your time and enjoy it 要原码的、路过的、学习过的请留个言，顶个呗～～