标题栏与水平滑动界面: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);}}}
相关文章推荐
- android app主题UI界面框架搭建 tablayout+Viewpager+fragment 导航栏滑动和点击切换界面
- TabLayout+ViewPager+Fragment完成滑动界面
- 一个案例教你简单地玩转ViewPager(二)之ViewPaper+TabLayout+Fragment顶部标签界面滑动
- TabLayout 和ViewPager和Fragment的多页面滑动(主要实现一个水平的布局用来展示Tabs加上ViewPager实现联动效果)
- ViewPager,TabLayout,Fragment实现tabs滑动
- Tablayout+viewpager+fragment实现tab导航以及滑动切换
- ViewPager+Fragment+TabLayout实现的头部滑动
- 横向菜单滑动选择viewpager+tablayout+fragment
- TabLayout+TabItem+ViewPager+Fragment实现早期微信屏幕滑动效果
- 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
- TabLayout、ViewPager和Fragment的多页面滑动
- 【Android】viewpager+fragment+tablayout实现滑动菜单栏
- 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
- TabLayout让Fragment在ViewPager中的滑动切换更优雅
- TabLayout+Fragment+ViewPager的标题滑动使用
- TabLayout实现标题栏viewpager与Fragment联动,标题栏下面有指示器(小横线)
- TabLayout两种添加tab方式,结合ViewPager+Fragment实现常见界面视图
- Fragment+viewpager+tablayout滑动时无弹性的解决方法
- ViewPager 、TabLayout和Fragment实现标签滑动
- Fragment利用ViewPager实现左右滑动--第三方开源--SlidingTabLayout和SlidingTabStrip实现