From:http://blog.csdn.net/zhy_cheng/article/details/8119933
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(){
- @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的内容的时候有动画效果,这个我没有做。要是做其实也不难,因为现在在我的需求你这个没有必要。一切以需求为准。