ViewPager+Fragment实现主页面切换

1、先看下效果，ViewPager+Fragment使得页面的切换效果更佳自然，可以加底部tab按钮的单击切换效果，比较实用。

2、实现方法
（1）布局activity_main_viewpager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewpager_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"
        />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:orientation="horizontal"
    android:layout_marginTop="1dp"
    android:background="@color/white"
    >
    <LinearLayout
        android:id="@+id/main_viewpager_message_ll"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <ImageView
                android:id="@+id/main_viewpager_message_iv"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="8dp"
                android:src="@mipmap/"
                />
               <!--此处为下角标布局-->
            <LinearLayout
                android:id="@+id/main_viewpager_point_ll"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:background="@drawable/raduios_red_bg_1"
                android:layout_marginBottom="-10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                >
                <TextView
                    android:id="@+id/main_viewpager_point_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="99"
                    android:textSize="10sp"
                    android:textColor="@color/white"
                    />
            </LinearLayout>
            <TextView
                android:id="@+id/main_viewpager_message_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/text_color_detail"
                android:textSize="12sp"
                android:text="消息"
                android:layout_gravity="bottom|center_horizontal"
                />
        </FrameLayout>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/main_viewpager_hr_ll"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >

            <ImageView
                android:id="@+id/main_viewpager_hr_iv"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="8dp"
                android:src="@mipmap/"
                />
            <LinearLayout
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:background="@drawable/raduios_red_bg_1"
                android:layout_marginBottom="-10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:visibility="gone"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="99"
                    android:textSize="10sp"
                    android:textColor="@color/white"
                    />
            </LinearLayout>
            <TextView
                android:id="@+id/main_viewpager_hr_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/text_color_detail"
                android:textSize="12sp"
                android:text="HR"
                android:layout_gravity="bottom|center_horizontal"
                />
        </FrameLayout>

    </LinearLayout>
    <LinearLayout
        android:id="@+id/main_viewpager_my_ll"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        >
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >

            <ImageView
                android:id="@+id/main_viewpager_my_iv"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="8dp"
                android:src="@mipmap/"
                />
            <LinearLayout
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:background="@drawable/raduios_red_bg_1"
                android:layout_marginBottom="-10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="2dp"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:visibility="gone"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="99"
                    android:textSize="10sp"
                    android:textColor="@color/white"
                    />
            </LinearLayout>
            <TextView
                android:id="@+id/main_viewpager_my_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/text_color_detail"
                android:textSize="12sp"
                android:text="MY"
                android:layout_gravity="bottom|center_horizontal"
                />
        </FrameLayout>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

（2）布局适配器PagerMainAdapter

public class PagerMainAdapter extends FragmentPagerAdapter {
    private final List<Fragment> frags;

    public PagerMainAdapter(FragmentManager fm, List<Fragment> frags) {
        super(fm);
        this.frags = frags;
    }

    @Override
    public Fragment getItem(int position) {
        return frags.get(position);
    }

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

（3）页面使用

 /**
     * Created by rjj on 2019/1/10
     */
    public class PagerMainActivity extends BaseActivity implements View.OnClickListener {
    
        @BindView(R.id.main_viewpager_vp)
        ViewPager main_vp;
    
        private List<Fragment> mFragments;
    
        @Override
        protected int getLayoutId() {
            return R.layout.activity_main_viewpager;
        }
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            StatusBarUtil1.setImmersiveStatusBar(this,true);
            StatusBarUtil1.setStatusBarColor(this,       getResources().getColor(R.color.white));
            EventBus.getDefault().register(this);
        }
    
        @Override
        protected void initView() {
            ButterKnife.bind(this);
         
            mFragments=new ArrayList<>();
            mFragments.add(new OAFragment());
            mFragments.add(new HRFragment());
            mFragments.add(new MFragment());
            // 设置填充器
            main_vp.setAdapter(new PagerMainAdapter(getSupportFragmentManager(),mFragments));
            // 设置缓存页面数
            main_vp.setOffscreenPageLimit(3);
            main_vp.setCurrentItem(1);//初始化页面
            //初始化tab样式
            message_iv.setBackgroundResource(R.mipmap.oa_icon_pre);
            
            //滑动方法
            main_vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    switch (position) {
                        case 0:
                           
                            break;
                        case 1:
                          
                            break;
                        case 2:
                         
                            break;
                    }
                }
                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                }
                @Override
                public void onPageScrollStateChanged(int arg0) {
                }
            });
        }
   //底部tab的单击方法
        @Override
        public void onClick(View v) {
            switch (v.getId()){
                    case R.id.main_viewpager_message_ll:
                        main_vp.setCurrentItem(0);//显示当前页内容
                        
                        break;
                    case R.id.main_viewpager_hr_ll:
                        main_vp.setCurrentItem(1);
                        
                        break;
                    case R.id.main_viewpager_my_ll:
                        main_vp.setCurrentItem(2);
                      
            }
    
        }
    }

3、其中的fragment页面

public class HRFragment extends BaseFragment {
    @Override
    protected void initView() {

    }

    @Override
    protected int getLayoutId() {
        return R.layout.fragment_e;
    }

}