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;@Overrideprotected 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() {@Overridepublic 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{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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{@Overridepublic int getCount() {// TODO Auto-generated method stubreturn list.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn (arg0==arg1);}@Overridepublic void destroyItem(View container, int position, Object object) {viewPager.removeView(list.get(position));}@Overridepublic Object instantiateItem(View container, int position) {viewPager.addView(list.get(position));return list.get(position);}}}

至此，欢迎界面就ok了。

三、源码地址

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