您的位置:首页 > 其它

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

2017-05-19 19:46 549 查看

一、

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 
4000
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;  //跳过@Overrideprotected 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() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}//pager 切换@Overridepublic 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;}}@Overridepublic void onPageScrollStateChanged(int state) {}});}/**点击事件   */@Overridepublic 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 {@Overridepublic int getCount() {return mList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}//初始化@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mList.get(position));return mList.get(position);}//删除@Overridepublic 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);}}}

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息