Android之tab实现切换页面效果—FragmentTabHost

时间：2022-11-18 23:49:12

android常见的视觉效果，通过点击下方的Tab实现页面切换效果，用到的即是TabHost的子类之一：FragmentTabHost，他的好处即在于可以方便的编写具体页面内容，实现步骤如下：

1、主页面布局 —— activity_main.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="vertical"
    tools:context="com.example.android_myewj.MainActivity" >

    <FrameLayout 
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"/>
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

2、每一个点击Tab的布局 —— tab_item.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:orientation="vertical" 
    android:background="#eee"
    android:gravity="center">
    <ImageView 
        android:id="@+id/imageview"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:layout_margin="3dip"/>
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:textColor="#666"
        android:textSize="14sp"
        android:layout_marginTop="-3dip"
        android:layout_marginBottom="3dip"/>
</LinearLayout>

3、点击Tab时的背景图标变化 —— home_tab_changed.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_selected="true" android:drawable="@drawable/home"/>
    <item android:drawable="@drawable/home_default"/>
</selector>
注意：两个item之间不能互掉顺序，否则会导致一直是默认图片，不能达到切换效果

4、主程序来啦 —— MainActivity.java 

public class MainActivity extends FragmentActivity {
private FragmentTabHost tabhost;
private LayoutInflater inflater;
// tab上的title字体数组
private String[] tabTitleArray={"首页","频道","购物车","我的"};
// tab上的图片变化数组
private int tabImgArray[]={R.drawable.home_tab_changed,R.drawable.channel_tab_changed,R.drawable.buy_tab_changed,R.drawable.my_tab_changed};
// tab切换的不同fragment
private Class[] fragmentArray={HomeFragment.class,ChannelFragment.class,BuyFragment.class,MyFragment.class};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initTabHost();
    }

    // 初始化设置tab
    private void initTabHost(){
    inflater=LayoutInflater.from(this);
    tabhost=(FragmentTabHost)findViewById(android.R.id.tabhost);
    tabhost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
    // 为TabHost增加tab
    for(int i=0;i<fragmentArray.length;i++){
    TabSpec tabSpec=tabhost.newTabSpec(tabTitleArray[i]).setIndicator(getTabItem(i));
    tabhost.addTab(tabSpec,fragmentArray[i],null);
    }
    // 设置Tab间的分割线为null
    tabhost.getTabWidget().setDividerDrawable(null);
    }

    // 为Tab动态设置字体和小图标
    private View getTabItem(int index){
    View view=inflater.inflate(R.layout.tab_item, null);
    ImageView imageview=(ImageView)view.findViewById(R.id.imageview);
    TextView textview=(TextView)view.findViewById(R.id.textview);
    textview.setText(tabTitleArray[index]);
    imageview.setImageResource(tabImgArray[index]);
    return view;
    }
}
其中的fragment就是具体页面的内容展示了，因人而异

好了，到此即实现了简单的页面切换效果，效果图如下：

Android之tab实现切换页面效果—FragmentTabHost

可能有人发现了，微信、今日头条、微博等亦实现了左右滑动切换页面，且tab图标和字体有渐变切换效果，这个是我的下一步研究目标，有结果了会继续贴上来的

标签：

相关文章