Android仿QQ主界面

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

：

 

 

 

 

 

 

下面我来实现这个效果

工程下载：点击下载

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.zhycheng.viewpagerwork;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 ViewPagerWorkActivity 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(){@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {// TODO Auto-generated method stub((ViewPager)arg0).removeView((View)al.get(arg1));}@Overridepublic void finishUpdate(View arg0) {// TODO Auto-generated method stub}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn al.size();}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager)arg0).addView((View)al.get(arg1), 0);return (View)al.get(arg1);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0==arg1;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub}@Overridepublic Parcelable saveState() {// TODO Auto-generated method stubreturn null;}@Overridepublic void startUpdate(View arg0) {// TODO Auto-generated method stub}};        vp.setAdapter(pa);        vp.setCurrentItem(0);vp.setOnPageChangeListener(this);            }@Overridepublic 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);}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}}

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

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