android的Tab切换效果

最新推荐文章于 2025-05-23 15:12:30 发布

原创最新推荐文章于 2025-05-23 15:12:30 发布 · 844 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #android开发

移动开发同时被 2 个专栏收录

6 篇文章

订阅专栏

android

4 篇文章

订阅专栏

本文介绍了一个简单的Android开发案例，展示了如何自定义实现Tab页面切换效果。通过创建自定义项目和布局，实现了Tab选项卡和相应页面的交互。文章详细解释了每个组件的作用，包括初始化视图、图片动画、页面适配器和事件监听等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习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();
}

}