标题栏与水平滑动界面：TabLayout、ViewPager、Fragment；；引导页：ViewPager+View

一、

1、布局中添加TabLayout 控件 ，需要添加依赖；使用相关的属性，需要定义命名空间

compile 'com.android.support:design:25.0.1'  ----在app下的build.gradle

xmlns:app="http://schemas.android.com/apk/res-auto"

<android.support.design.widget.TabLayout            android:id="@+id/mTabLayout"            android:background="@color/colorPrimary"            app:tabGravity="fill"            app:tabIndicatorColor="@color/colorAccent"//指示器下标的颜色            app:tabMode="fixed"            app:tabSelectedTextColor="@color/colorAccent"//选中字体的颜色            app:tabTextColor="@android:color/white"            android:layout_width="match_parent"            android:layout_height="wrap_content">        </android.support.design.widget.TabLayout>
简书上完整--TabLayout详解

2、添加ViewPager控件

3、布局中初始化控件，添加List<Type>泛型作为存储 TabLayout 和 ViewPager 的数据源

private List<String> mTitle;    //标题文字private List<Fragment>mFragment;  //v4包下的，上下兼容
//标题栏内容
mTitle=new ArrayList<>();mTitle.add("在线课程");
//fragment  内容mFragment=new ArrayList<>();mFragment.add(new CourseFragment());
fragment类定义
public class CourseFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.coursefragment,null);        return view;    }
4、ViewPager加载数据源、滑动监听、加载适配器
//预加载mViewPager.setOffscreenPageLimit(mFragment.size());
    //滑动监听mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }        //选中的页卡    @Override    public void onPageSelected(int position) {        fab_setting.setVisibility(View.VISIBLE);    }    @Override    public void onPageScrollStateChanged(int state) {    }});
    //设置适配器mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {        //选中的Item    @Override    public Fragment getItem(int position) {        return mFragment.get(position);    }        //返回Item的个数    @Override    public int getCount() {        return mFragment.size();    }        //设置标题    @Override    public CharSequence getPageTitle(int position) {        return mTitle.get(position);    }});
5、将ViewPager和TabLayout绑定
mTabLayout.setupWithViewPager(mViewPager);

二、

1、布局中添加ViewPager，小圆点图片

2、实例化控件，添加数据源，装载数据源

private List<View> mList;private View view1,view2,view3;     //三个引导页
mList=new ArrayList<>();view1=View.inflate(this,R.layout.pager_item_one,null);mList.add(view1);
3、设置适配器，监听事件
mViewPager.setAdapter(new GuideAdapter());
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {。。}）;
public class GuideActivity extends AppCompatActivity implements View.OnClickListener {        private ViewPager mViewPager;    private List mList;    private View view1,view2,view3;     //三个引导页    private ImageView point1_iv,point2_iv,point3_iv;    //小点    private ImageView skip_iv;  //跳过    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_guide);                initView();            }/**初始化View   */    private void initView() {        point1_iv= (ImageView) findViewById(R.id.iv_point1);        point2_iv= (ImageView) findViewById(R.id.iv_point2);        point3_iv= (ImageView) findViewById(R.id.iv_point3);            //设置初始的圆点的默认图片        setPointImg(true,false,false);        mViewPager= (ViewPager) findViewById(R.id.mViewPager);        mList=new ArrayList<>();        view1=View.inflate(this,R.layout.pager_item_one,null);        view2=View.inflate(this,R.layout.pager_item_two,null);        view3=View.inflate(this,R.layout.pager_item_three,null);        mList.add(view1);        mList.add(view2);        mList.add(view3);            //按钮点击事件        view3.findViewById(R.id.btn_start).setOnClickListener(this);            //跳过        skip_iv= (ImageView) findViewById(R.id.iv_skip);        skip_iv.setOnClickListener(this);        //设置适配器        mViewPager.setAdapter(new GuideAdapter());            //监听ViewPager事件        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }        //pager 切换            @Override            public void onPageSelected(int position) {                L.i("position:"+position);                switch (position){                    case 0:                        setPointImg(true,false,false);                        skip_iv.setVisibility(View.VISIBLE);                        break;                    case 1:                        setPointImg(false,true,false);                        skip_iv.setVisibility(View.VISIBLE);                        break;                    case 2:                        setPointImg(false,false,true);                        skip_iv.setVisibility(View.GONE);                        break;                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    } /**点击事件   */    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.btn_start:                startActivity(new Intent(this, LoginActivity.class));                finish();                break;            case R.id.iv_skip:                startActivity(new Intent(this,LoginActivity.class));                finish();                break;        }    }    private class GuideAdapter extends PagerAdapter {        @Override        public int getCount() {            return mList.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }            //初始化        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(mList.get(position));            return mList.get(position);        }            //删除        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(mList.get(position));        }    }        //设置小圆点的图片--根据选中的状态    private void setPointImg(boolean isCheck1 ,boolean isCheck2 ,boolean isCheck3){        if (isCheck1){            point1_iv.setBackgroundResource(R.drawable.point_on);        } else {            point1_iv.setBackgroundResource(R.drawable.point_off);          }        if (isCheck2){            point2_iv.setBackgroundResource(R.drawable.point_on);        } else {            point2_iv.setBackgroundResource(R.drawable.point_off);        }        if (isCheck3){            point3_iv.setBackgroundResource(R.drawable.point_on);        } else {            point3_iv.setBackgroundResource(R.drawable.point_off);        }    }}