Android仿QQ主界面

Android版的QQ使用的是ViewPager实现的，主要是可以实现TabHost的界面，但功能比Tabhost更好，因为可以实现用手滑动实现界面的切换。

下面我来实现这个效果

1.首先使用Google的附加库

android-support-v4.jar，这个库，请到网上下载。

2.XML布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="好友"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="群组"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="会话"
            android:textSize="25sp" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="#FF0000" />

</LinearLayout>

这个布局一点都不难。

下面是ViewPager中显示的View，是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="#FF0000"  
    android:orientation="vertical" >  
      
  
</LinearLayout>

 

 

 

另外两个分别是紫色和蓝色。

3.主Activity中的代码

TextView tv1,tv2,tv3;
 ViewPager vp;
 ArrayList al;

这是Activity的成员变量，三个TextView分别是上面的标签，vp是ViewPager，al保存ViewPager中的布局View。

下面是全部的代码

 

package com.zx.qq;

import java.util.ArrayList;



import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
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.TextView;

public class TenceDemoActivity extends Activity implements OnClickListener, OnPageChangeListener {
    TextView tv1,tv2,tv3;
    ViewPager vp;
    ArrayList al;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tv1=(TextView) findViewById(R.id.textView1);
        tv2=(TextView) findViewById(R.id.textView2);
        tv3=(TextView) findViewById(R.id.textView3);
        vp=(ViewPager) findViewById(R.id.viewpager);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        al=new ArrayList();
        LayoutInflater li=LayoutInflater.from(this);
        al.add(li.inflate(R.layout.zyc1, null));
        al.add(li.inflate(R.layout.zyc2, null));
        al.add(li.inflate(R.layout.zyc3, null));
        PagerAdapter pa=new PagerAdapter(){

            @Override
            public void destroyItem(View arg0, int arg1, Object arg2) {
                // TODO Auto-generated method stub
                ((ViewPager)arg0).removeView((View)al.get(arg1));
                
            }

            @Override
            public void finishUpdate(View arg0) {
                // TODO Auto-generated method stub
                
            }

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return al.size();
            }

            @Override
            public Object instantiateItem(View arg0, int arg1) {
                ((ViewPager)arg0).addView((View)al.get(arg1), 0);
                return (View)al.get(arg1);
            }

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

            @Override
            public void restoreState(Parcelable arg0, ClassLoader arg1) {
                // TODO Auto-generated method stub
                
            }

            @Override
            public Parcelable saveState() {
                // TODO Auto-generated method stub
                return null;
            }

            @Override
            public void startUpdate(View arg0) {
                // TODO Auto-generated method stub
                
            }};
        vp.setAdapter(pa);
        vp.setCurrentItem(0);
        vp.setOnPageChangeListener(this);
        
    }
    @Override
    public void onClick(View v) {
        
        if(v.getId()==R.id.textView1)
        {
            vp.setCurrentItem(0);
        }
        if(v.getId()==R.id.textView2)
        {
            vp.setCurrentItem(1);
        }
        if(v.getId()==R.id.textView3)
        {
            vp.setCurrentItem(2);
        }
        
        
    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        
    }
}

 

OnPageChangeListener中的几个方法是ViewPager的View发生改变是的监听，在这几个方法中可以处理ViewPager的事件。下面是运行的效果：

 

做的还是非常的像的，其实在ViewPager的View发声改变的时候我们可以改变标题的 字体大小和颜色，这个很容易实现的。就在监听器里实现。对了，QQ的界面在标题和ViewPager之间有一个ImageView，在切换 ViewPager的内容的时候有动画效果，这个我没有做，可按实际情况改动