标题栏与水平滑动界面：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);
        }

    }
}