ViewPager+Fragment（滑动+点击）

在viewpager内包含了多个fragment，也就是我们说的滑动的页面，这里我只用了两个页面的滑动，借用一张大神的界面分析图。

一、布局文件
1、main_common_layout.xml 这是一个顶部菜单栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/MyToolbar"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true">

            <TextView
                style="@style/MytoolbarTitle"
                android:text="聊天"
                android:id="@+id/tb_title"/>

            <ImageButton
                style="@style/MytoolbarButton"
                android:id="@+id/tb_bt"
                android:src="@drawable/iab_popup_ic_retry_pressed"
                android:onClick="refresh"/>

        </android.support.v7.widget.Toolbar>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/menu_top"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/mytoolbarcolor"
        android:gravity="center"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center">

            <ImageView
                android:id="@+id/friend_realtime_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:src="@drawable/gnb_chats_bg"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1">

            <ImageView

                android:id="@+id/friend_name_group_list"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:src="@drawable/gnb_friends_bg" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/line_layout"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@color/mytoolbarcolor">
             <ImageView
                 android:id="@+id/tabline"
                 android:layout_width="wrap_content"
                 android:layout_height="match_parent"
                 android:background="@color/white" />
         </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#e9e8e8"/>
    </LinearLayout>


</LinearLayout>

2、myfragment_activiyt.xml 是MyFragmentActivity的布局文件

<?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:fitsSystemWindows="true"
    android:orientation="vertical">

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


    <android.support.v4.view.ViewPager
        android:id="@+id/main_fragment_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

3、两个Fragment内容一样，就一个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">

    <TextView
        android:id="@+id/msg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white" />

</LinearLayout>

二、Java代码
1、MFragmentActivity.java

package com.example.administrator.wechat.activity;

import android.content.ActivityNotFoundException;
...
import butterknife.Bind;
import butterknife.ButterKnife;

public class MyFragmentActivity extends Netcheck_Activity {

    @Bind(R.id.tb_title)
    TextView tb_title;
    @Bind(R.id.tb_bt)
    ImageButton tb_button;
    @Bind(R.id.friend_realtime_info)
    ImageView friend_realtime_info;
    @Bind(R.id.friend_name_group_list)
    ImageView friend_name_group_list;
    @Bind(R.id.tabline)
    ImageView tabline;
    @Bind(R.id.main_fragment_vp)
    ViewPager viewPager;// 声明一个viewpager对象

    private List<Fragment> frag_list;// 声明一个list集合存放Fragment（数据源）
    private int tabLineLength;// 1/3屏幕宽
    private int currentPage = 0;// 初始化当前页为0（第一页）


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.myfragment_activity);
        ButterKnife.bind(this); //注解，用的是ButterKnife包
        // 初始化滑动条1/2
        initTabLine();
        // 初始化界面
        initView();
        //单击事件
        initListener();
    }

    private void initTabLine() {

        // 得到显示屏宽度（网上一堆方法，这里我是直接调用的） ,tabline为1/2屏幕宽度
        tabLineLength = MyApplication.screenWidth / 2;
        // 控件参数
        ViewGroup.LayoutParams lp = tabline.getLayoutParams();
        lp.width = tabLineLength;
        tabline.setLayoutParams(lp);
    }

    //单击事件监听
    private  void initListener(){
        //再加按钮，只需要add,并改initTabLine中的数字即可
        list_imgview = new ArrayList<>();
        list_imgview.add(friend_realtime_info);
        list_imgview.add(friend_name_group_list);

        for (int i= 0;i< list_imgview.size();i++){
            final int finalI = i;
            list_imgview.get(i).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    viewPager.setCurrentItem(finalI);
                }
            });
        }


    }
    private void initView() {
        // 设置数据源
        MainFragment fragment1 = new MainFragment();
        FriendGroupFragment fragment2 = new FriendGroupFragment();
        // 实例化对象
        frag_list = new ArrayList<Fragment>();
        frag_list.add(fragment1);
        frag_list.add(fragment2);


        // 设置适配器
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(
                getSupportFragmentManager()) {

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

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


        };

        // 绑定适配器
        viewPager.setAdapter(adapter);
        viewPager.setCurrentItem(0);
        // 设置滑动监听
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // 当页面被选择时，先讲2个imageview的图标初始化
                friend_realtime_info.setImageResource(R.drawable.gnb_ic_chats_normal);
                friend_name_group_list.setImageResource(R.drawable.gnb_ic_friends_normal);

                // 再改变当前选择页（position）对应的图标和textview
                switch (position) {
                    case 0:
                        friend_realtime_info.setImageResource(R.drawable.gnb_ic_chats_selected);
                        tb_title.setText("聊天");
                        break;
                    case 1:
                        friend_name_group_list.setImageResource(R.drawable.gnb_ic_friends_selected);
                        tb_title.setText("好友");
                        break;

                }

                currentPage = position;

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                //arg0在第一页到第二页的过程中curentPage=0，arg0=0，最后到达第二页curentPage=1，arg=1，中间过程全为0
                // arg1是个偏移值

                // 取得该控件的实例
                LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tabline
                        .getLayoutParams();

                if (currentPage == 0 && arg0 == 0) { // 0->1移动(第一页到第二页)


                tabline.setLayoutParams(ll);

            }

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

            }
        });

    }
}

2、fragment1.java （第二个省略）

public class FriendGroupFragment extends Fragment {


    private TextView tview;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

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

        tview= view.findViewById(R.id.tv);
        tview.setText("这是第一个");
        return view;
    }
}

三、需要注意的问题
1、由于xml我是直接复制的，导致在两个fragment的布局文件以及菜单栏文件main_common_layout.xml中有这么一条语句：

    android:fitsSystemWindows="true"

这句话直接导致我的viewpager与上面的菜单栏中间隔了一段空白距离，找了好久原来是它的问题。fitsSystemWindows如果为true，就会调用view的padding属性来给SystemWindow留出空间。

2、其他错误
报错：*Attempt to invoke virtual method ‘boolean java.lang.String.
equals(java.lang.Object)’ on a null object reference*
原因： xml文件中View写成了view