android Tab =viewpager+fragmnet

浏览数：24 / 时间：2015年06月11日

1.定义几个fragment 的subclass 如fragmentone，fragmenttwo;

public class fragmentthree extends Fragment {
 private   View view;
    /**
     * 
     */
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SaveInflaterState){
        view=inflater.inflate(R.layout.fragmentthree, container, false);
        return  view;
    }

}

布局就是一个简单的TextView

<?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" >
<TextView android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:text="three fragment" />
</LinearLayout>

2.主布局是这样的

<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" >
 
    <android.support.v4.view.ViewPager
        android:id="@+id/mViewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1" />

 <include layout="@layout/top1" />  

</LinearLayout>

其中的top1.xml 如下；定义了三个TextView 作为Tab；

<?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="wrap_content"
    android:orientation="vertical" >
   <ImageView
        android:id="@+id/cursor_line"
        android:layout_width="fill_parent"
        android:layout_height="10dp"
        android:scaleType="matrix"
        android:src="@drawable/ic_launcher" /> 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tab01"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab01" />

        <TextView
            android:id="@+id/tab02"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab02" />

        <TextView
            android:id="@+id/tab03"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab03" />
    </LinearLayout>



</LinearLayout>

View Code

3.初始化viewpager

3.1

* 初始化viewpager 1. 数据源定义了一个List<Fragment> 并添加 Fragment 类 Subclass

* 如fragmentone; 2. 添加适配器 FragmentAdapter ;实例化FragmentAdapter 接口； 3.为

* viewpager 设置适配器；

public void initview() {
        // TODO Auto-generated method stub
        lf = new ArrayList<Fragment>(); // 1
        lf.add(new fragmentone());
        lf.add(new fragmenttwo());
        lf.add(new fragmentthree());
        mFragAdapter madapter = new mFragAdapter(getSupportFragmentManager(),
                lf);// 2
        vp = (ViewPager) findViewById(R.id.mViewpager);
        vp.setAdapter(madapter);// 3
        vp.setCurrentItem(0);
        vp.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                mCurrentPageIndex = position;
                tab1.setTextColor(Color.BLACK);
                tab2.setTextColor(Color.BLACK);
                tab3.setTextColor(Color.BLACK);
                switch (position) {
                case 0:
                    tab1.setTextColor(Color.RED);
                    break;
                case 1:
                    tab2.setTextColor(Color.RED);
                    break;
                case 2:
                    tab3.setTextColor(Color.RED);
                    break;

                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int arg2) {
                // TODO Auto-generated method stub
                //Log.e("TAG", position + "------->" + positionOffset);
                LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
                        .getLayoutParams();
                if (mCurrentPageIndex > position) {
                    lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
                            * mScreen1_3);
                } else {
                    lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
                            * mScreen1_3);
                }
                mTabline.setLayoutParams(lp);

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });

    }

其中适配器如下；

public class mFragAdapter extends FragmentPagerAdapter {
        private List<Fragment> mFragments;

        public mFragAdapter(FragmentManager fm, List<Fragment> fragments) {
            super(fm);
            // TODO Auto-generated constructor stub
            mFragments = fragments;
        }

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

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

    }

4.初始化Tab的滑动条的宽度

/*
     * 初始化滑动条的宽度 设置为手机屏幕的1/3
     */

    private void initTabLine() {
        mTabline = (ImageView) findViewById(R.id.cursor_line);
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreen1_3 = outMetrics.widthPixels / 3;// 屏幕的1/3
        // LayoutParams lp = (LayoutParams) mTabline.getLayoutParams();
        LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
                .getLayoutParams();
        lp.width = mScreen1_3;
        mTabline.setLayoutParams(lp);
    }

在3. 中同时定义了刚滑动viewpager 是Tab的滑动条也跟着一起动；

5.Tab按钮的点击事件的定义；

/*
     * 初始化tab按钮的事件； 点击某个tab按钮 viewpager 转换fragment 通过ViewPager
     * 类的setCurrentIndex()方法设置需要跳转的fragment
     */
    private void initTabBtn() {
        tab1 = (TextView) findViewById(R.id.tab01);
        tab2 = (TextView) findViewById(R.id.tab02);
        tab3 = (TextView) findViewById(R.id.tab03);
        tab1.setOnClickListener(new mlistenter());
        tab2.setOnClickListener(new mlistenter());
        tab3.setOnClickListener(new mlistenter());
        tab1.setTextColor(Color.RED);
    }

public class mlistenter implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            
            switch (v.getId()) {
            case R.id.tab01:
                vp.setCurrentItem(0);
                break;
            case R.id.tab02:
                vp.setCurrentItem(1);
                break;
            case R.id.tab03:
                vp.setCurrentItem(2);
                break;

            }
        }

    }