一、
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);
}
}
}