8、Dp Notes底部导航栏
程序员文章站
2022-03-11 11:21:10
...
实现了点击切换效果(只是图标状态变化),如何结合页面,点击时切换页面,页面滑动时图标有渐变。需要一个新的控件ViewPager,看名字就知道是管理页面切换的,在底部的QEndBar之上加入一个ViewPager:
ViewPager控件在android-support-v4中,写法和其他控件不同,给他一个id(vp_main),位置在底部QEndBar之上(above="@+id/qeb_main")。
ViewPager的用法要在java代码中,把xml中的ViewPager转化为java中的ViewPager对象。MainActivity.java定义ViewPager对象vp_main,onCreat()初始化:
转为对象之后如何使用,ViewPager.setAdapter()可以为ViewPager设置一个Adapter(适配器,某些控件留出的数据控制的封装,通过适配器可以控制某些控件(ViewPager,ListView)显示的内容,很方便的一种操作模式)。setAdapter()参数PagerAdapter,官方推荐ViewPager与Fragment(说不清楚,百度)一块使用,百度搜索了下(之前没用过),有个FragmentPagerAdapter可以当参数传入,实现ViewPager和Fragment一块使用。定义一个FragmentPagerAdapter adapter(就像普通对象的声明,觉得开始声明太乱,可以放最后):
为ViewPager设置vp_main.setAdapter(adapter);(没有设置时直接new,而是像变量一样外部定义,便于管理),getSupportFragmentManager()这个方法Activity没有,要FragmentActivity才有,所以MainActivity继承从Activity改为FragmentActivity。看一下adapter中的函数getCount()返回个数(ViewPager有几页),getItem()返回Fragment,参数position可以判断要显示第几个页面,Fragment,并没有,要新建,怎么建,怎么用,百度,要新建一个类继承自Fragment并实现其中的方法。新建一个包(例:com.zdphpn.dpnotes.fragment),包里新建类(例HomeFragment)继承自Fragment(为统一选择v4包下的Fragment)。HomeFragment重载onCreateView方法:
怎么用?还得百度,可以通过inflater.inflate(R.layout.xxx, container, false);将一个布局转为View并返回,有点理解了?新建个布局文件试试吧,layout/新建Android XML Layout File,fragment_home.xml,中间位置拖上一个TextView(不建议拖,自己xml写,测试可以拖无所谓而且比较快)。修改onCreateView返回值:
ViewPager中显示出HomeFragment,adapter的getCount()改为return 1,getItem()中:
运行,上方显示出了TextView,getCount()改为4,运行。
注:这是一个.gif动图,ctrl点击图片查看。
涉及到的东西有点多,乱。
<android.support.v4.view.ViewPager android:id="@+id/vp_main" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/qeb_main" > </android.support.v4.view.ViewPager>
ViewPager控件在android-support-v4中,写法和其他控件不同,给他一个id(vp_main),位置在底部QEndBar之上(above="@+id/qeb_main")。
ViewPager的用法要在java代码中,把xml中的ViewPager转化为java中的ViewPager对象。MainActivity.java定义ViewPager对象vp_main,onCreat()初始化:
ViewPager vp_main; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vp_main=(ViewPager)findViewById(R.id.vp_main); }
转为对象之后如何使用,ViewPager.setAdapter()可以为ViewPager设置一个Adapter(适配器,某些控件留出的数据控制的封装,通过适配器可以控制某些控件(ViewPager,ListView)显示的内容,很方便的一种操作模式)。setAdapter()参数PagerAdapter,官方推荐ViewPager与Fragment(说不清楚,百度)一块使用,百度搜索了下(之前没用过),有个FragmentPagerAdapter可以当参数传入,实现ViewPager和Fragment一块使用。定义一个FragmentPagerAdapter adapter(就像普通对象的声明,觉得开始声明太乱,可以放最后):
FragmentPagerAdapter adapter=new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { // TODO Auto-generated method stub return 0; } @Override public Fragment getItem(int position) { // TODO Auto-generated method stub return null; } };
为ViewPager设置vp_main.setAdapter(adapter);(没有设置时直接new,而是像变量一样外部定义,便于管理),getSupportFragmentManager()这个方法Activity没有,要FragmentActivity才有,所以MainActivity继承从Activity改为FragmentActivity。看一下adapter中的函数getCount()返回个数(ViewPager有几页),getItem()返回Fragment,参数position可以判断要显示第几个页面,Fragment,并没有,要新建,怎么建,怎么用,百度,要新建一个类继承自Fragment并实现其中的方法。新建一个包(例:com.zdphpn.dpnotes.fragment),包里新建类(例HomeFragment)继承自Fragment(为统一选择v4包下的Fragment)。HomeFragment重载onCreateView方法:
@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub return super.onCreateView(inflater, container, savedInstanceState); }
怎么用?还得百度,可以通过inflater.inflate(R.layout.xxx, container, false);将一个布局转为View并返回,有点理解了?新建个布局文件试试吧,layout/新建Android XML Layout File,fragment_home.xml,中间位置拖上一个TextView(不建议拖,自己xml写,测试可以拖无所谓而且比较快)。修改onCreateView返回值:
return inflater.inflate(R.layout.fragment_home, container, false);
ViewPager中显示出HomeFragment,adapter的getCount()改为return 1,getItem()中:
return new HomeFragment();
运行,上方显示出了TextView,getCount()改为4,运行。
注:这是一个.gif动图,ctrl点击图片查看。
涉及到的东西有点多,乱。
温故知新——2016/10/26
推荐阅读
-
vue自定义底部导航栏Tabbar的实现代码
-
Android开发之React Navigation 导航栏样式调整+底部角标消息提示
-
Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果
-
android中Fragment+RadioButton实现底部导航栏
-
微信小程序实战之仿android fragment可滑动底部导航栏(4)
-
Android用Scroller实现一个可向上滑动的底部导航栏
-
基于vue-cli vue-router搭建底部导航栏移动前端项目
-
Android实现美团外卖底部导航栏动画
-
React Navigation 导航栏样式调整+底部角标消息提示
-
vue自定义底部导航栏Tabbar的实现代码