界面效果：

2.主布局文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".PagerActivity" >
  
     <android.support.v4.view.ViewPager 
         android:id="@+id/viewpager" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center" >  
          
         <android.support.v4.view.PagerTitleStrip 
             android:id="@+id/pagertitle" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_gravity="bottom" 
             android:background="#896443" 
             android:textColor="#164263" /> 
     </android.support.v4.view.ViewPager>   
      <LinearLayout 
             android:layout_width="wrap_content" 
             android:layout_height="match_parent" 
             android:orientation="horizontal" >

         <Button
             android:id="@+id/start"
             android:layout_width="wrap_content"
             android:layout_height="50dp"
             android:layout_gravity="start"
             android:text="直接开始我的微信生活"
             android:textSize="18sp"
             android:textColor="#489466"
             />
 
      </LinearLayout> 
     <LinearLayout 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:orientation="horizontal" 
         android:paddingLeft="30dp"
         android:gravity="center_vertical" >        
  
         <ImageView 
             android:id="@+id/page1" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:alpha="60"
             android:layout_gravity="bottom" 
             android:layout_marginBottom="30dp"           
             android:layout_marginLeft="10dp" 
             android:scaleType="matrix" 
             android:src="/blog_article/@drawable/nn/index.html" /> 
         <ImageView 
             android:id="@+id/page2" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_gravity="bottom" 
             android:layout_marginBottom="30dp"           
             android:layout_marginLeft="10dp" 
             android:scaleType="matrix" 
             android:alpha="60"
             android:src="/blog_article/@drawable/page/index.html" /> 
         <ImageView 
             android:id="@+id/page3" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_gravity="bottom" 
             android:layout_marginBottom="30dp"           
             android:layout_marginLeft="10dp" 
             android:alpha="60"
             android:scaleType="matrix" 
             android:src="/blog_article/@drawable/page/index.html" /> 
         <ImageView 
             android:id="@+id/page4" 
            android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_gravity="bottom" 
             android:layout_marginBottom="30dp"           
             android:layout_marginLeft="10dp" 
             android:alpha="60"
             android:scaleType="matrix" 
             android:src="/blog_article/@drawable/page/index.html" /> 
     </LinearLayout> 
  
 </FrameLayout> 

3.每个图片需要定义的布局文件 为View1.xml   View2.xml  View3.xml  View4.xml  

每一页只是设置背景和一个textview文本控件，代码都是很相似的，只列举其中一个。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="@drawable/aa"
   >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="77dp"
        android:textSize="28sp"
        android:textColor="#d54661"
        android:text="微信不只是个聊天工具*****可以设置自己想显示的文字" />
    
</RelativeLayout>

4.微信启动界面完成后返回到程序操作入口 .即类似我们所见的微信登录界面。

界面布局可以是登录或者微信首页，根据自己的需要设置，这里我只是一个文本提示。

<RelativeLayout     android:background="@drawable/wx">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textColor="#89494a"
        android:textSize="20sp"
        android:layout_marginTop="151dp"
        android:text="欢迎来到微信首页，您的支持是我们最大的勇气！" />

</RelativeLayout>

5.关键的activity代码。实现多张图片滑动效果。

学习使用android提供的support.v4.view.ViewPager类，重写该类填充内容代码，更改适配器显示自定义的内容，并重写页面改变监听事件（OnPageChangeListener），处理图片动画效果。

public class PagerActivity extends Activity {
	private ViewPager mViewPager;// 声明ViewPager对象
	private PagerTitleStrip strip;// 声明动画标题，此处用不到，直接可以在getPageTitle（）设置
	private int currIndex = 0;// 当前页面
	private ImageView p1, p2, p3, p4;
	private Button main;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_pager);
		mViewPager = (ViewPager) this.findViewById(R.id.viewpager);
		mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
		strip = (PagerTitleStrip) this.findViewById(R.id.pagertitle);
		main=(Button) this.findViewById(R.id.start);
		p1 = (ImageView) this.findViewById(R.id.page1);
		p2 = (ImageView) this.findViewById(R.id.page2);
		p3 = (ImageView) this.findViewById(R.id.page3);
		p4 = (ImageView) this.findViewById(R.id.page4);
		//strip.s
		main.setOnClickListener(new Button.OnClickListener() {
			@Override
			public void onClick(View v) {
				Intent i=new Intent(PagerActivity.this,HelloActivity.class);
				startActivity(i);
				PagerActivity.this.finish();
			}
		});
		// 将要分页显示的View装入数组中
		LayoutInflater inflaters = LayoutInflater.from(this);
		View view1 = inflaters.inflate(R.layout.view1, null);
		View view2 = inflaters.inflate(R.layout.view2, null);
		View view3 = inflaters.inflate(R.layout.view3, null);
		View view4 = inflaters.inflate(R.layout.view4, null);
		// 每个页面的view数据
		final ArrayList<View> views = new ArrayList<View>();
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);
		// 每一个也没标题
		final List<String> titles = new ArrayList<String>();
		titles.add("第一页");
		titles.add("第二页");
		titles.add("第三页");
		titles.add("第四页");
		// 填充ViewPager的数据适配器，我们重写即可
		PagerAdapter mPagerAdapter = new PagerAdapter() {
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

			@Override
			public int getCount() {
				return views.size();
			}

			@Override
			public void destroyItem(View container, int position, Object object) {
				((ViewPager) container).removeView(views.get(position));//移除视图
			}

			@Override
			public CharSequence getPageTitle(int position) {
				return titles.get(position);//设置页标题，本项目位于屏幕底部
			}

			@Override
			public Object instantiateItem(View container, int position) {
				((ViewPager) container).addView(views.get(position));//获得当前视图
				return views.get(position);
			}
		};
		mViewPager.setAdapter(mPagerAdapter);// 设置重写的Adapter。这样就实现了ViewPager的滑动效果。
	}

	public class MyOnPageChangeListener implements OnPageChangeListener {
		public void onPageSelected(int arg0) {// 参数arg0为选中的View
			Animation animation = null;// 声明动画对象
			switch (arg0) {
			case 0:
				p1.setImageDrawable(getResources().getDrawable(R.drawable.nn));// 当前View
				p2.setImageDrawable(getResources().getDrawable(R.drawable.page));// 下一个View
				if (currIndex == arg0 - 1) {// 如果滑动到上一个View
					animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0); // 圆点移动效果动画，从当前View移动到下一个View
				} else if (currIndex == arg0 + 1) {// 圆点移动效果动画，从当前View移动到下一个View，下同。
					animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
				}
				break;
			case 1: 
				p2.setImageDrawable(getResources().getDrawable(R.drawable.nn));
				p1.setImageDrawable(getResources().getDrawable(R.drawable.page));
				p3.setImageDrawable(getResources().getDrawable(R.drawable.page));
				if (currIndex == arg0 - 1) {
					animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
				} else if (currIndex == arg0 + 1) {
					animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
				}
				break;
			case 2:
				p3.setImageDrawable(getResources().getDrawable(R.drawable.nn));
				p4.setImageDrawable(getResources().getDrawable(R.drawable.page));
				p2.setImageDrawable(getResources().getDrawable(R.drawable.page));
				if (currIndex == arg0 - 1) {
					animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
				} else if (currIndex == arg0 + 1) {
					animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
				}
				break;
			case 3:
				p4.setImageDrawable(getResources().getDrawable(R.drawable.nn));
				p3.setImageDrawable(getResources().getDrawable(R.drawable.page));
				if (currIndex == arg0 - 1) {
					animation = new TranslateAnimation(arg0 - 1, arg0, 0, 0);
				} else if (currIndex == arg0 + 1) {
					animation = new TranslateAnimation(arg0 + 1, arg0, 0, 0);
				}
				break;
			}
			currIndex = arg0;// 设置当前View
			animation.setFillAfter(true);// True:设置图片停在动画结束位置
			animation.setDuration(500);// 设置动画持续时间
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {

		}

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

		}
	}
}

使用的图片nn.gif（被选择时     page.gif（初始状态）

 微信上的是一个小点，效果是有很大区别，自己设计的没有那么美观，但是大体功能基本实现，自己学到了关于ViewPager类的使用。          图片按钮是在网上找的，并用图片处理程序稍微涂改了一下，以便区别用户当前选择的页，并实时更新图片。修改不仔细只是学会如何显示该功能，以后开发项目时应用到可以借鉴并美化好各个界面，达到给人一种美观效果，自己美化比较缺少，希望自己在网页设计上也有一定提高，继续学习！

在 XMPP通讯开发-服务器好友获取以及监听状态变化   中我们获取服务器上的用户好友信息，然后结合XMPP通讯开发-好友获取界面设计    我们将两个合并起来，首先获取用户组，然后把用户组用List存储起来用作对比好友的用户组，根据用户组的个数然后创建相应的DefaultMutableTreeNode节点用于添加好友，获取好友列表，根据用户组把当前用户添加的所属的用户组，这里要注意的是一个好友可以存在不同的用户组里面，所以获取的好友所在的组也是一个集合，最后在添加一个根的DefaultMutableTreeNode把之前用户组都添加到根组里面，最后把根组添加到JTree里面最后再把JTree添加到jTabbedPane里面.主要代码如下：

  /**
     * 获取用户好友
     */
    public void getRoster() {
        if (conn != null) {
            roster = conn.getRoster();
            getRosterPresenceChange();
            Collection<RosterGroup> groups = roster.getGroups();
            int size = groups.size();
            treeNode = new DefaultMutableTreeNode[size];
            int i = 0;
            for (RosterGroup group : groups) {
                groupsList.add(group.getName());
                treeNode[i] = new DefaultMutableTreeNode(group.getName());
                i++;
            }
            Collection<RosterEntry> entries = roster.getEntries();
            for (RosterEntry entry : entries) {
                Collection<RosterGroup> group = entry.getGroups();
                for (RosterGroup g : group) {
                    if (groupsList != null) {
                        int size_1 = groupsList.size();
                        for (i = 0; i < size_1; i++) {
                            if (g.getName().equals(groupsList.get(i))) {
                                treeNode[i].add(new DefaultMutableTreeNode(entry.getName()));
                            }
                        }
                    }
                }
            }
            for (i = 0; i < size; i++) {
                top.add(treeNode[i]);
            }
            JTree tree = new JTree(top);
            JScrollPane scrollPane = new JScrollPane();
            scrollPane.setViewportView(tree);
           jTabbedPane.addTab("好 友", scrollPane);
        }
    }

效果图如下：

源码项目：https://github.com/jwzhangjie/IChat_PC.git