底部标签页+ViewPager+Fragment

实现的效果如下，点击GridView标签页中每一项，都可以切换轮播图，也可以通过手指左右滑动屏幕切换轮播图，并且在切换ViewPager时候，底部的标签页也在发生变化

---

实现思路：

底部标签页是通过GridView来实现的，标签页是一个ViewPager,通过ViewPager来做碎片的切换

---

具体做法如下：

---

入口Activity:

public class MainActivity extends FragmentActivity {
       private GridView grid;
       private ArrayList<Fragment> tt;
       ViewPager lunbo;
     private View[] vs=new View[5];
        private ImageView[] imgs = new ImageView[5];
        private TextView[] tvs = new TextView[5];
        private String[] str = {"案例","模型","进度","资料","我的"};
        private int[] resOff={R.drawable.icon_anli_off,R.drawable.icon_moxing_off,R.drawable.icon_jindu_off,R.drawable.icon_ziliao_off,R.drawable.icon_my_off};
        private int[] resOn={R.drawable.icon_anli_on,R.drawable.icon_moxing_on,R.drawable.icon_jindu_on,R.drawable.icon_ziliao_on,R.drawable.icon_my_on};
        void fragementInit(){
            tt=new ArrayList<Fragment>();
            tt.add(frag01.instance("xuguozhu"));
            tt.add(frag01.instance("xuguofu"));
            tt.add(frag01.instance("xuguoming"));
            tt.add(frag01.instance("zhouwa"));
            tt.add(frag01.instance("wangwa"));
        }

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

        fragementInit();


        //---ViewPager部分
        lunbo=(ViewPager) findViewById(R.id.lunbo);
        pageee kk=new pageee(getSupportFragmentManager(),tt);
        lunbo.setAdapter(kk); 
        lunbo.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                updateView(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

            }
        });

        // GridView部分
         for (int i = 0; i < vs.length; i++) {
                vs[i] = getLayoutInflater().inflate(R.layout.act_grid_item,null);
                imgs[i] = (ImageView) vs[i].findViewById(R.id.item_img);
                tvs[i]=(TextView) vs[i].findViewById(R.id.item_tv);
                imgs[i].setImageResource(resOff[i]);
                tvs[i].setText(str[i]);
            }
            imgs[0].setImageResource(resOn[0]);
            tvs[0].setTextColor(Color.parseColor("#0099cc"));

            grid = (GridView) findViewById(R.id.grid);
            grid.setAdapter(new MyAdapter());
            grid.setOnItemClickListener(new OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                  
                    lunbo.setCurrentItem(position);   //切换ViewPager             
                    for (int i = 0; i < 5; i++) {     //更新底部标签页
                            if(i==position){
                                imgs[i].setImageResource(resOn[i]);
                                tvs[i].setTextColor(Color.parseColor("#0099cc"));
                            }else{
                                imgs[i].setImageResource(resOff[i]);
                                tvs[i].setTextColor(Color.parseColor("#000000"));
                            }
                        }
                }
            }); 
    }

    void updateView(int position){
          for (int i = 0; i < 5; i++) {
                if(i==position){
                    imgs[i].setImageResource(resOn[i]);
                    tvs[i].setTextColor(Color.parseColor("#0099cc"));
                }else{
                    imgs[i].setImageResource(resOff[i]);
                    tvs[i].setTextColor(Color.parseColor("#000000"));
                }
            }
    }


    class MyAdapter extends BaseAdapter{

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

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return vs[position];
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            return vs[position];
        }

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

---

ViewPager的PageAdapter:

public class pageee extends FragmentStatePagerAdapter {
    private ArrayList<Fragment> tt;
    public pageee(FragmentManager fm,ArrayList<Fragment> nn) {
        super(fm);

        tt=nn;

    }

    @Override
    public Fragment getItem(int arg0) {
        return tt.get(arg0);
    }

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

}

---

Fragment：(碎片将被交给ViewPager来管理)

public class frag01 extends android.support.v4.app.Fragment {
private String path;

public static frag01  instance (String ss){
    frag01 mmFrag01=new frag01();
    Bundle bb=new Bundle();
    bb.putString("ww", ss);
    mmFrag01.setArguments(bb);
    return mmFrag01;
}

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        path = getArguments().getString("ww");
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View vv = inflater.inflate(R.layout.shuipian, container,false);
        TextView    tv = (TextView) vv.findViewById(R.id.wenzi);
        tv.setText(path);
        return vv;
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
    }
}

---

act_grid_item.xml 标签页GridView布局文件

<?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:gravity="center"
    android:orientation="vertical"
    android:background="#ffffff"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon_anli_off" />

    <TextView
        android:id="@+id/item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="案例"
        android:textColor="#000"
        android:textSize="16sp" />

</LinearLayout>

---

activity_main.xml 主Activity的布局文件

<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"
    tools:context=".MainActivity"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/lunbo"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
       />
    <GridView
        android:id="@+id/grid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:numColumns="5" />


</LinearLayout>

---

shuipian.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="horizontal"
    android:background="#FCE6C9">
    <TextView 
        android:id="@+id/wenzi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
      />
</LinearLayout>

---

---

---

FR:海涛高软（ 徐海涛）