ViewPager + Fragment 仿微信滑动切换页卡

1、新建类，继承Fragment --导入的是v4的包（向下兼容），利用布局加载器将其与xml结合起来

public class FragmentAddress extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.address_layout,container,false);
        return view;
    }
}

2、主布局类，继承FragmentActivity。使用FragmentPagerAdapter适配器加载页卡（数据源）

/**对item(页面)切换的相应   */
 private void setPager() {
     main_viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
         @Override
         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

         }

         @Override
         public void onPageSelected(int position) {
             int currentItem=main_viewpager.getCurrentItem();   //取得当前的item(或是被点击的)
             setTab(currentItem);
         }

         @Override
         public void onPageScrollStateChanged(int state) {

         }
     });
 }

三、主布局的xml文件

<android.support.v4.view.ViewPager
    android:id="@+id/vp_main"
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0dp">

</android.support.v4.view.ViewPager>

<include layout="@layout/tab" />	
--自定义的tab页卡标题--其中一部分
<LinearLayout
    android:id="@+id/ll_weixin"
    android:layout_weight="1"
    android:orientation="vertical"
    android:layout_width="0dp"
    android:layout_height="match_parent">
    <!--点击事件FALSE掉，不会和父布局冲突-->
    <ImageButton
        android:id="@+id/ib_weixin"
        android:clickable="false"
        android:layout_weight="3"
        android:background="@mipmap/tab_weixin_normal"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="0dp" />
    <TextView
        android:text="微信"
        android:textSize="19sp"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:gravity="center"
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="0dp" />
</LinearLayout>

例子如下：

  
  

   
   
//导入的为v4的fragment包
public class TabActivity extends FragmentActivity implements View.OnClickListener{

    private ViewPager main_viewpager;
    private FragmentPagerAdapter adapter_fragment;
    private List
     
     
      
       list_fragment;

    private LinearLayout weixin_ll;
    private LinearLayout address_ll;
    private LinearLayout setting_ll;
    private LinearLayout friend_ll;
//改变背景颜色和item 相互对应
    private ImageButton weixin_ib;
    private ImageButton address_ib;
    private ImageButton setting_ib;
    private ImageButton friend_ib;


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

        initView();
        initEvent();    //点击事件的初始化
        
    }
    /**点击事件的初始化  */
    private void initEvent() {
        weixin_ll.setOnClickListener(this);
        address_ll.setOnClickListener(this);
        setting_ll.setOnClickListener(this);
        friend_ll.setOnClickListener(this);
    }



    /**初始化控件  */
    private void initView() {
                //要把点击的属性FALSE掉，不会和父布局冲突
        weixin_ib= (ImageButton) findViewById(R.id.ib_weixin);
        address_ib= (ImageButton) findViewById(R.id.ib_address);
        friend_ib=  (ImageButton) findViewById(R.id.ib_friend);
        setting_ib= (ImageButton) findViewById(R.id.ib_setting);

        weixin_ll= (LinearLayout)  findViewById(R.id.ll_weixin);
        address_ll= (LinearLayout) findViewById(R.id.ll_address);
        friend_ll= (LinearLayout) findViewById(R.id.ll_friend);
        setting_ll= (LinearLayout) findViewById(R.id.ll_setting);

        main_viewpager= (ViewPager) findViewById(R.id.vp_main);

        //將fragment添加進數據源中
        list_fragment=new ArrayList<>();
        Fragment weixin_fragment=new FragmentWeixin();  //实例化一个Fragment子类对象--自定义的
        Fragment address_fragment=new FragmentAddress();
        Fragment friend_fragment=new FragmentFriend();
        Fragment setting_fragment=new FragmentSetting();

        list_fragment.add(weixin_fragment);         //加入数组中,,注意顺序
        list_fragment.add(address_fragment);
        list_fragment.add(friend_fragment);
        list_fragment.add(setting_fragment);


        initAdapter();  //初始化适配器
        main_viewpager.setAdapter(adapter_fragment);
        setPager();
        setTab(0);   //先默认第二个显示--不然一开始都是暗色的/-一起item改变


    }
/**对item(页面)切换的相应   */
    private void setPager() {
        main_viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int currentItem=main_viewpager.getCurrentItem();   //取得当前的item(或是被点击的)
                setTab(currentItem);
            }

            @Override
            public void onPageScrollStateChanged(int state) {


            }
        });
    }

    //适配器初始化
    private void initAdapter() {
        adapter_fragment=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return list_fragment.get(position);
            }

            @Override
            public int getCount() {
                return list_fragment.size();
            }
        };
    }

    /**每一个tab(LinearLayout)---的点击事件  */
    @Override
    public void onClick(View v) {
        resetImage();   //重置所有的imagebutton的背景颜色---暗色
        switch (v.getId()){
            case R.id.ll_weixin:
                setSelect(0);   //对点击事件作出具体的反应--传参数方法
             break;
            case R.id.ll_address:
                setSelect(1);   //对点击事件作出具体的反应--传参数方法
                break;
            case R.id.ll_friend:
                setSelect(2);   //对点击事件作出具体的反应--传参数方法
                break;
            case R.id.ll_setting:
                setSelect(3);   //对点击事件作出具体的反应--传参数方法
                break;
        }


    }
/**对传来的点击事件作出响应--图片改变/内容对应 */
    private void setSelect(int i) {

        setTab(i);
        main_viewpager.setCurrentItem(i);   //设置当前的item为点击的item
    }

/**根据传来的参数i做具体的相应    */
    private void setTab(int i) {
        resetImage();   //滑动时  重置所有的imagebutton的背景颜色---暗色
        switch (i){
            case 0:
                weixin_ib.setBackgroundResource(R.mipmap.tab_weixin_pressed);

              break;
            case 1:
                address_ib.setBackgroundResource(R.mipmap.tab_address_pressed);
              break;
            case 2:
                friend_ib.setBackgroundResource(R.mipmap.tab_find_frd_pressed);
              break;
            case 3:
                setting_ib.setBackgroundResource(R.mipmap.tab_settings_pressed);
              break;
        }
    }

    /**使所有的imagebutton的颜色变暗   */
    private void resetImage() {
        weixin_ib.setBackgroundResource(R.mipmap.tab_weixin_normal);
        address_ib.setBackgroundResource(R.mipmap.tab_address_normal);
        friend_ib.setBackgroundResource(R.mipmap.tab_find_frd_normal);
        setting_ib.setBackgroundResource(R.mipmap.tab_settings_normal);
    }
}package codefirst.materia_design.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;     //导入的是此包
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import codefirst.materia_design.R;

//各个fragment类 --用来与xml布局文件关联起来
public class FragmentWeixin extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.weixin_layout,container,false);
        return view;

    }
}