Android之粗仿微信6.0——微信6.0的欢迎界面

      日常，在app的更新或者上新的时候，常常都有一个欢迎界面，用于介绍该版本的app有什么功能或者新增了哪些功能。

这里以微信的6.0版本的欢迎界面为例，做一个粗仿，只是一个粗仿，并不一定是微信本身的做法。

      这里先看一下欢迎界面编写完成后的效果：

       

       

一、设计

      采用原始，不添加防腐剂的方式：ViewPager+多个XML+底部进度显示+末页的进入按钮。

      ViewPager用于承载多个View的切换，XML用于构建View，末页的按钮用于触发事件，进入主界面。

二、开始实施

（1）引入ViewPager+底部的进度标识，这里主要是配置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:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_welcome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        />

    <LinearLayout  
        android:id="@+id/point"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"  
        android:layout_marginBottom="24.0dip"  
        android:orientation="horizontal"  
        >  
   
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/point_selector"/>  
   
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/point_selector"/>  
   
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/point_selector"/>  
   
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/point_selector"/>  
    </LinearLayout>  
</RelativeLayout>

这里有两点请注意：

1-1、引入ViewPager，节点名称要写全。

1-2、底部的进度标识，我们用小圆点来表示，控制小圆点的亮与暗，我们用了state_enabled的属性以及point_selector这个自定义的文件来判断。

point_selector：

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

</selector>

（2）欢迎界面入场

      这里我们设置了四个界面，每个界面配图用于显示更新内容或者提示。除了第四个界面意外，其他三个界面的配置是一样的，如下：

 第一界面：

<?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/wel1"
    android:orientation="vertical" >
     
   

</LinearLayout>

第四界面：

<?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/wel4"
    android:orientation="vertical" >
    
    <Button
        android:id="@+id/go2login"
        android:text="微  信"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@drawable/button_welcom_selector"
        />
</RelativeLayout>

第四界面的按钮背景，用一个selector表示即可，未引入图片。

（3）将四个界面添加到VeiwPager中。这个也是全部的代码，以下有详细注释。

package com.example.wechat;

import java.util.ArrayList;
import java.util.List;

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.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class WelcomeActivity extends Activity {

	//承载容器
	private ViewPager viewPager;
	//被承载的View（界面）
	private View view1,view2,view3,view4;
	//被承载View集合
	private List<View> list;
	//底部进度标识
	private   ImageView[] list_image;
	//当前界面
	private int currentPage;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_welcome);
	
		initView();
	}
    //初始化
	public void initView(){
		viewPager=(ViewPager)findViewById(R.id.viewpager_welcome);
		//各个View的实例化
		LayoutInflater layoutInflater=LayoutInflater.from(this);
		view1=layoutInflater.inflate(R.layout.wel1, null);
		view2=layoutInflater.inflate(R.layout.wel2, null);
		view3=layoutInflater.inflate(R.layout.wel3, null);
		view4=layoutInflater.inflate(R.layout.wel4, null);
		//将View添加到集合中
		list=new ArrayList<View>();
		list.add(view1);
		list.add(view2);
		list.add(view3);
		list.add(view4);
		//设置ViewPager的界面改变时的事件
		viewPager.setOnPageChangeListener(new pageOnchange());
		//设置ViewPager的适配
		viewPager.setAdapter(new viewPagerAdapter());
		//底部标识的亮与暗的控制，通过state_enable的状态来控制
		initPoint(list.size());
		//点击事件，去往主界面
		Button btn=(Button)view4.findViewById(R.id.go2login);
		btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				toMain();
			}
		});
	}
	//去往主界面
	public void toMain(){
		Intent intent=new Intent();
		intent.setClass(this, MainActivity.class);
		startActivity(intent);
	}
    //设置底部标识变化的逻辑，Enable为true时亮，为false时暗
	public void initPoint(int count){
		LinearLayout layout=(LinearLayout)findViewById(R.id.point);
		list_image=new ImageView[4];
		for(int i=0;i<count;i++){
			list_image[i]=(ImageView)layout.getChildAt(i);
			list_image[i].setEnabled(false);
		}
		list_image[0].setEnabled(true);
	}
	//界面改变监听
	private class pageOnchange implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			
		}

		@Override
		public void onPageSelected(int arg0) {
			//enable状态修改
			currentPage=arg0;
			list_image[currentPage].setEnabled(true);
			for(int i=0;i<list_image.length;i++){
				if(i!=currentPage){
					list_image[i].setEnabled(false);
				}
			}
		}
		
	}
	//ViewPager适配
	private class viewPagerAdapter extends PagerAdapter{
		
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return list.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return (arg0==arg1);
		}

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

		@Override
		public Object instantiateItem(View container, int position) {
			viewPager.addView(list.get(position));
			return list.get(position);
		}
		
	}
	
	
}

至此，欢迎界面就ok了。

三、源码地址

 http://download.csdn.net/detail/yangzhaomuma/9553259