FragmentTabHost和FragmentViewPager使用

使用v4包下的FragmentTabHost
Activity 继承FragmentActivity
布局使用
：

image.png

FragmentViewPager

image.png

---

--------------效果图-----------------------

image.png

首先我们定义一个底部布局
FragmentTabHost这里动态加载
tab.xml
···
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center"
>
android:id="@+id/tab_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

    />

···
点击时图片颜色字体颜色的变化
我们定义一个选择器
图片的selector 有几个定义几个 这里我们一共五个底部按钮 这里我定义一个，其他都是一样

···




···
字体：
···

···
这里有5个布局 定义5个布局文件 我定义一个，其他一样
···

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="首页"

    />

···
相应的有5个类 继承Fragment
···
public class MoreFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_more, null);
return view;
}
···
这里ViewPager需要有一个Adapter

------代码如下-----------
···
package com.example.app002_fragment;

import java.util.ArrayList;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter{
private ArrayList mList;
public MyPagerAdapter(FragmentManager fm,ArrayList list) {
super(fm);
mList=list;
}

@Override
public Fragment getItem(int arg0) {
    // TODO Auto-generated method stub
    return mList.get(arg0);
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return mList.size();
}

}

···
这里实现MainActivity 的代码-------------

···
package com.example.app002_fragmenttabhost;

import java.util.ArrayList;

import com.example.app002_fragment.HomeFragment;
import com.example.app002_fragment.MessageFragment;
import com.example.app002_fragment.MoreFragment;
import com.example.app002_fragment.MyPagerAdapter;
import com.example.app002_fragment.SelfInfoFragment;
import com.example.app002_fragment.SquareFragment;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {

private FragmentTabHost mTabHost;
private ViewPager viewpager;

private String name[]={"首页", "发现", "我的", "泡泡", "联系人"};
private int icon[]={R.drawable.selector_home,R.drawable.selector_message,R.drawable.selector_more,
        R.drawable.selector_info,R.drawable.selector_square};
private ArrayList list=new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //1.找到FragmentTabHost控件
    mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    //2.配置該控件(找到要替换的布局)
    mTabHost.setup(MainActivity.this, getSupportFragmentManager(), R.id.main_vp);
    add();//添加集合
    initViewPager();// 配置viewpager
    ininttabhost();// 配置tabhost
}
private void ininttabhost() {
    for (int i = 0; i < list.size(); i++) {
        //3.添加table
        TabSpec newTabSpec = mTabHost.newTabSpec(i+"");
        //4.定义布局
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.tab_item, null);
        ImageView img = (ImageView) view.findViewById(R.id.tab_img);
        TextView tv = (TextView) view.findViewById(R.id.tba_tv);
        img.setImageResource(icon[i]);
        tv.setText(name[i]);
        tv.setTextColor(getResources().getColorStateList(R.drawable.color));
        
        
        //5.把布局添加到tabHost里面
        newTabSpec.setIndicator(view);
        //6.把TabHost和对应的fragment添加到FragmnerTabHost中
        //.把tabSpec添加到tabhost里面参1是按钮参2是内容布局.class
        mTabHost.addTab(newTabSpec,list.get(i).getClass(),null);


    }//设置没有竖白线
    mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
    mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
        // tab变化监听
        public void onTabChanged(String tabId) {
            viewpager.setCurrentItem(Integer.parseInt(tabId));
        }
    });  

}
private void initViewPager() {
    viewpager = (ViewPager) findViewById(R.id.main_vp);
    
     viewpager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), list));
       viewpager.setOnPageChangeListener(new OnPageChangeListener() {
        
        @Override
        public void onPageSelected(int arg0) {
            Toast.makeText(MainActivity.this, "页面:"+arg0, Toast.LENGTH_SHORT).show();
         mTabHost.setCurrentTab(arg0);// 设置切换页面
        }
        
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub
            
        }
        
        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub
            
        }
    });
    
    }

private void add() {

list.add(new HomeFragment());
list.add(new MessageFragment());
list.add(new MoreFragment());
list.add(new SelfInfoFragment());
list.add(new SquareFragment());
}
}

···