標題欄與水平滑動界面：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);
        }

    }
}