android的Tab切换效果

最近在学习Android开发，自己看了一些android中Tab页面切换的例子，根据自己的理解写了一个一样的效果，如果有什么写得不对或者觉得有什么不妥，请各位大神指出，具体的效果图如下：






2.废话不说了，直接进入主题，首先创建一个自己定义的android项目（我自己的命名为：MyselfTab）,如下图：



3.Activice主要是使用了以下的四个（MainActivity,tab_1,tab_2,tab_3），如下图：



3.1页面布局也比较简单，主要写了四个XML,如图：



4.MainActiviy.java文件中的代码为：

package com.tab.myselftab;

import java.util.ArrayList;

import java.util.List;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.app.ActionBar;

import android.support.v4.app.Fragment;

import android.support.v4.app.LoaderManager;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.support.v4.view.ViewPager.PageTransformer;

import android.app.LocalActivityManager;

import android.app.TabActivity;

import android.content.Intent;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.Window;

import android.view.animation.Animation;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

import android.os.Build;

public class MainActivity extends TabActivity {

//Tab切换中的三个选项卡

private TextView tab1,tab2,tab3;

//滑动效果使用的图片

private ImageView imageview;

private List<View> listview=new ArrayList<View>();

private TabHost tabhost;

private ViewPager viewPager;

//Tab切换中的当前页变量

private int currIndex=0;

//图片偏移量的计算使用的变量

private int offices=0;

//图片宽度

private int bmw=0;

//用于加载

private LocalActivityManager loadermanger=null;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.tab_main);

InitAllView(savedInstanceState);//初始化所有页面的方法

InitImage();//初始化图片的动画的方法

setAllViewLister();//设置控件的事件方法

}

/***

* 初始化图片的方法

*/

public void InitImage(){

//获得图片的宽度

bmw=BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();

//获取屏幕分辨率

DisplayMetrics dm=new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(dm);

int screenW=dm.widthPixels;//获得设备屏幕分辨率的宽度

offices=(screenW/3-bmw)/2;//计算偏移量

Matrix ma=new Matrix();

//设置最初图片偏移量

ma.postTranslate(offices, 0);

imageview.setImageMatrix(ma);

}

/***

* 初始化所有页面的方法

*/

public void InitAllView(Bundle savedInstanceState){

tabhost=getTabHost();

//初始化LocalActivityManager的对象的方法

loadermanger=new LocalActivityManager(this,true);

loadermanger.dispatchCreate(savedInstanceState);

viewPager=(ViewPager)this.findViewById(R.id.viewPager);

imageview=(ImageView)this.findViewById(R.id.imageview);

tab1=(TextView)this.findViewById(R.id.tab1);

tab2=(TextView)this.findViewById(R.id.tab2);

tab3=(TextView)this.findViewById(R.id.tab3);

}

/***

* 设置所有控件的事件

*/

public void setAllViewLister(){

//初始化Tab切换页面

Intent intent1=new Intent(MainActivity.this,tab_1.class);

Intent intent2=new Intent(MainActivity.this,tab_2.class);

Intent intent3=new Intent(MainActivity.this,tab_3.class);

listview.add(getView("1", intent1));

listview.add(getView("2", intent2));

listview.add(getView("3", intent3));

//初始化ViewPager页面适配器

MyPageAdpater pageadpater=new MyPageAdpater(listview);

//设置ViewPager的页面适配器

viewPager.setAdapter(pageadpater);

//设置当前显示的Tab中的第一个选项卡

viewPager.setCurrentItem(0);

//设置三个tab选项卡的点击事件

tab1.setOnClickListener(new MyOnclickLister(0));

tab2.setOnClickListener(new MyOnclickLister(1));

tab3.setOnClickListener(new MyOnclickLister(2));

//ViewPager在切换Tab页面的时候，触发的事件

viewPager.setOnPageChangeListener(new MyPageChangeLister());

}

/***

* 在ViewPager中的页面进行切换的时候，设置的监听事件

* @author simon

*

*/

class MyPageChangeLister implements OnPageChangeListener{

int one=offices*2+bmw;

int two=one*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) {

//设置图片偏移的动画

Animation animaction=null;

switch (arg0) {

case 0:

tabhost.setCurrentTab(0);

if(currIndex==1){

animaction=new TranslateAnimation(one,0,0,0);

}else if(currIndex==2){

animaction=new TranslateAnimation(two,0,0,0);

}

break;

case 1:

tabhost.setCurrentTab(1);

if(currIndex==0){

animaction=new TranslateAnimation(offices,one,0,0);

}else if(currIndex==2){

animaction=new TranslateAnimation(two,one,0,0);

}

break;

case 2:

tabhost.setCurrentTab(2);

if(currIndex==0){

animaction=new TranslateAnimation(offices,two,0,0);

}else if(currIndex==1){

animaction=new TranslateAnimation(one,two,0,0);

}

break;

default:

break;

}

currIndex=arg0;

animaction.setFillAfter(true);

animaction.setDuration(300);

imageview.setAnimation(animaction);

}

}

/***

* 点击Tab标题切换目录的时候的点击事件

* @author simon

*

*/

class MyOnclickLister implements OnClickListener{

private int index;

public MyOnclickLister(int index){

this.index=index;

}

@Override

public void onClick(View arg0) {

viewPager.setCurrentItem(index);

}

}

/***

* tab页面切换，页面适配器

* @author simon

*

*/

class MyPageAdpater extends PagerAdapter{

private List<View> listview=null;

public MyPageAdpater(List<View> listview){

this.listview=listview;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return listview.size();

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

// TODO Auto-generated method stub

return arg0==arg1;

}

@Override

public void destroyItem(View container, int position, Object object) {

// TODO Auto-generated method stub

((ViewPager)container).removeView(listview.get(position));

}

@Override

public Object instantiateItem(View container, int position) {

// TODO Auto-generated method stub

((ViewPager)container).addView(listview.get(position), 0);

return listview.get(position);

}

}

/***

* 包装视图的方法

* @param id

* @param intent

* @return

*/

public View getView(String id,Intent intent){

return loadermanger.startActivity(id, intent).getDecorView();

}

}

4.1tab_1.java中的代码：

package com.tab.myselftab;

import java.util.ArrayList;

import java.util.List;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.app.ActionBar;

import android.support.v4.app.Fragment;

import android.support.v4.app.LoaderManager;

import android.support.v4.view.ViewPager;

import android.app.Activity;

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

import android.os.Build;

public class tab_1 extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);//这个设置是去掉Android系统自带的标题，实际自定义标题的效果

setContentView(R.layout.tab_1);

}

}

4.2.tab_2.java的代码为：

package com.tab.myselftab;

import java.util.ArrayList;

import java.util.List;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.app.ActionBar;

import android.support.v4.app.Fragment;

import android.support.v4.app.LoaderManager;

import android.support.v4.view.ViewPager;

import android.app.Activity;

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

import android.os.Build;

public class tab_2 extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.tab_2);

}

}

4.3.tab_3.java中的代码为：

package com.tab.myselftab;

import java.util.ArrayList;

import java.util.List;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.app.ActionBar;

import android.support.v4.app.Fragment;

import android.support.v4.app.LoaderManager;

import android.support.v4.view.ViewPager;

import android.app.Activity;

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

import android.os.Build;

/***

*

* @author simon

*

*/

public class tab_3 extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.tab_3);

}

}

5.layout布局环境中的tab_main.xml的代码为：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@android:id/tabhost"

>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="47dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="标题1"/>

</RelativeLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_marginTop="47dp"

android:orientation="vertical">

<TabWidget

android:layout_width="wrap_content"

android:layout_height="1dp"

android:id="@android:id/tabs">

</TabWidget>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center"

android:layout_weight="1"

android:text="Tab1"

android:id="@+id/tab1"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="center"

android:layout_gravity="center"

android:text="Tab2"

android:id="@+id/tab2"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:gravity="center"

android:layout_gravity="center"

android:text="Tab3"

android:id="@+id/tab3"

/>

</LinearLayout>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/a"

android:id="@+id/imageview"/>

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="fill_parent"

android:layout_height="wrap_content" >

</android.support.v4.view.ViewPager>

<FrameLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:id="@android:id/tabcontent">

</FrameLayout>

</LinearLayout>

</TabHost>

5.1.tab_1.xml的代码为：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab1" />

</LinearLayout>

5.2.tab_2.xml的代码为：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab2" />

</LinearLayout>

5.3.tab_2.xml的代码为：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab3s" />

</LinearLayout>

以上是一个简单的Android开发的Tab页面切换效果的代码，如有什么说得不对或者写得不对的，请各位指出，谢谢！