ViewPager实现Tab

主页面的布局文件

<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" >
    <include layout="@layout/top"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager" 
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_width="match_parent">
    </android.support.v4.view.ViewPager>
    <include layout="@layout/bottom"/>
</LinearLayout>

底部按钮的布局

<?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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
    
    <LinearLayout
        android:id="@+id/tab_tty" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton
            android:id="@+id/tab_yyg_img" 
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="游泳馆"
            android:textColor="#ffffff"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_frd" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:background="#00000000"
            android:clickable="false"
            android:id="@+id/tab_frd_img"
            android:src="@drawable/tab_find_frd_normal"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_address" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton
            android:background="#00000000"
            android:id="@+id/tab_address_img" 
            android:clickable="false"
            android:src="@drawable/tab_address_normal"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="地址"
            android:textColor="#ffffff"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_settings" 
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:background="#00000000"
            android:id="@+id/tab_settings_img"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="设置"
            android:textColor="#ffffff"/>
    </LinearLayout>
    
</LinearLayout>
View Code

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="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <WebView 
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/web1"/>
</LinearLayout>

获取ViewPager

mPager = (ViewPager) findViewById(R.id.viewpager);

获取每个tab加入数组

     LayoutInflater inflater=LayoutInflater.from(this);
        View tab1= inflater.inflate(R.layout.tab1, null);
        View tab2= inflater.inflate(R.layout.tab2, null);
        View tab3= inflater.inflate(R.layout.tab3, null);
        View tab4= inflater.inflate(R.layout.tab4, null);
        mView.add(tab1);
        mView.add(tab2);
        mView.add(tab3);
        mView.add(tab4);

 

设置ViewPager的适配器

       adapter=new PagerAdapter() {
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                
                return arg0==arg1;
            }
            
            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                container.removeView(mView.get(position));
            }
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view=mView.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public int getCount() {
                return mView.size();
                
            }
        };
        mPager.setAdapter(adapter);
posted @ 2015-01-23 14:51  代码小黑  阅读(67)  评论(0)    收藏  举报