Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

最新推荐文章于 2022-01-27 16:43:49 发布
最新推荐文章于 2022-01-27 16:43:49 发布
阅读量6.9k 收藏 8
点赞数 1
分类专栏： 技术类 安卓
         今天我们要实现的这个效果呢，在Android的应用中十分地常见，我们可以看到下面两张图，无论是系统内置的联系人应用，还是AnyView的阅读器应用，我们总能找到这样的影子，当我们滑动屏幕时，Tab可以相应地完成切换，而当我们点击Tab时，我们的屏幕同样可以完成切换。讲到滑动，我们会立即想到PagerView，讲到ActionBar，我们立即会想到将ActionBar的导航模式。那么，我们今天要做的一件事情就是，通过这些组件的组合，来实现这样一个效果。


    

     

       按照一般的思路，我们或许会这么做：首先，使用getActionBar()方法获得操作栏，然后我们将操作栏的导航模式设置为Tab，并添加一些Tab，然后实现TabListener接口；其次，我们将多个布局通过Inflater()方法变成View，然后放到ViewPager里面(其实呢，ViewPager就是个容器啦，你换成FrameLayout也是一样的，所以这里可以用Fragment替换就是这个道理)，并实现OnPageChangeListener接口就可以了。由此我们可以写出下面的代码：

[java]  view plain copy print ?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.FragmentActivity;  
  7. import android.support.v4.app.FragmentManager;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  10. import android.app.ActionBar;  
  11. import android.app.ActionBar.Tab;  
  12. import android.app.ActionBar.TabListener;  
  13. import android.app.Activity;  
  14. import android.app.FragmentTransaction;  
  15. import android.view.LayoutInflater;  
  16. import android.view.View;  
  17.   
  18.   
  19. public class MainActivity extends FragmentActivity implements TabListener,OnPageChangeListener {  
  20.       
  21.     private ActionBar mActionBar;  
  22.     private ViewPager mViewPager;  
  23.     private TabPagerAdapter mAdapter;  
  24.     private ArrayList<View> mViews;  
  25.     private ArrayList<ActionBar.Tab> mTabs;  
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.layout_main);  
  30.         //取得ActionBar  
  31.         mActionBar=getActionBar();  
  32.         //以Tab方式导航  
  33.         mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  34.         //禁用ActionBar标题  
  35.         mActionBar.setDisplayShowTitleEnabled(false);  
  36.         //禁用ActionBar图标  
  37.         mActionBar.setDisplayUseLogoEnabled(false);  
  38.         //禁用ActionBar返回键  
  39.         mActionBar.setDisplayShowHomeEnabled(false);  
  40.         //添加Tabs  
  41.         mTabs=new ArrayList<ActionBar.Tab>();  
  42.           
  43.         ActionBar.Tab tab0=mActionBar.newTab();  
  44.         tab0.setText("界面一");  
  45.         tab0.setTabListener(this);  
  46.         mTabs.add(tab0);  
  47.         mActionBar.addTab(tab0);  
  48.           
  49.         ActionBar.Tab tab1=mActionBar.newTab();  
  50.         tab1.setText("界面二");  
  51.         tab1.setTabListener(this);  
  52.         mTabs.add(tab1);  
  53.         mActionBar.addTab(tab1);  
  54.           
  55.         ActionBar.Tab tab2=mActionBar.newTab();  
  56.         tab2.setText("界面三");  
  57.         tab2.setTabListener(this);  
  58.         mTabs.add(tab2);  
  59.         mActionBar.addTab(tab2);  
  60.           
  61.         //获取ViewPager  
  62.         mViewPager=(ViewPager)findViewById(R.id.ViewPager);  
  63.         //初始化mViews  
  64.         mViews=new ArrayList<View>();  
  65.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_0, null));  
  66.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_1, null));  
  67.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_2, null));  
  68.         //初始化mAdapter  
  69.         mAdapter=new TabPagerAdapter(mViews);  
  70.         mViewPager.setAdapter(mAdapter);  
  71.         mViewPager.setOnPageChangeListener(this);  
  72.         //默认显示第二项  
  73.         mViewPager.setCurrentItem(2);  
  74.           
  75.     }  
  76.       
  77.   
  78.   
  79.     @Override  
  80.     public void onTabReselected(Tab mTab, FragmentTransaction arg1)   
  81.     {  
  82.           
  83.     }  
  84.   
  85.     @Override  
  86.     public void onTabSelected(Tab mTab, FragmentTransaction arg1)   
  87.     {  
  88.         if(mViewPager!=null)  
  89.         {  
  90.            mViewPager.setCurrentItem(mTab.getPosition());  
  91.         }  
  92.     }  
  93.   
  94.     @Override  
  95.     public void onTabUnselected(Tab mTab, FragmentTransaction arg1)   
  96.     {  
  97.           
  98.     }  
  99.   
  100.   
  101.     @Override  
  102.     public void onPageScrollStateChanged(int arg0)   
  103.     {  
  104.           
  105.     }  
  106.   
  107.   
  108.     @Override  
  109.     public void onPageScrolled(int arg0, float arg1, int arg2)   
  110.     {  
  111.           
  112.     }  
  113.   
  114.   
  115.     @Override  
  116.     public void onPageSelected(int Index)   
  117.     {  
  118.         //设置当前要显示的View  
  119.         mViewPager.setCurrentItem(Index);  
  120.         //选中对应的Tab  
  121.         mActionBar.selectTab(mTabs.get(Index));  
  122.     }  
  123.   
  124. }  
        其中，TabPagerAdapter是一个继承自PagerAdapter的适配器类：

[java]  view plain copy print ?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.support.v4.view.PagerAdapter;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.view.View;  
  8.   
  9. public class TabPagerAdapter extends PagerAdapter   
  10. {  
  11.   
  12.   
  13.   
  14.     private ArrayList<View> mViews;  
  15.     public TabPagerAdapter(ArrayList<View> mViews)  
  16.     {  
  17.         this.mViews=mViews;  
  18.     }  
  19.       
  20.     @Override  
  21.     public void destroyItem(View container, int position, Object object)   
  22.     {  
  23.         ((ViewPager)container).removeView(mViews.get(position));  
  24.     }  
  25.       
  26.     @Override  
  27.     public Object instantiateItem(View container, int position)   
  28.     {  
  29.         ((ViewPager)container).addView(mViews.get(position), 0);  
  30.          return mViews.get(position);  
  31.     }  
  32.       
  33.     @Override  
  34.     public int getCount()   
  35.     {  
  36.         return mViews.size();  
  37.     }  
  38.   
  39.     @Override  
  40.     public boolean isViewFromObject(View mView, Object mObject)   
  41.     {  
  42.         return (mView==mObject);  
  43.     }  
  44.   
  45.       
  46.   
  47. }  

           我们的代码从逻辑上来讲是没有什么问题的，但是当我们试图运行这段代码的时候，我们发现这段代码出了问题，而问题就出在OnTabSelected()上。但是我们冷静下来想了想，没有错啊，那么问题到底出在哪里呢？看到网上的朋友说，这里这个适配器应该继承自FragmentPagerAdapter：

[java]  view plain copy print ?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import android.support.v4.app.Fragment;  
  4. import android.support.v4.app.FragmentManager;  
  5. import android.support.v4.app.FragmentPagerAdapter;  
  6.   
  7. public class ViewPagerAdapter extends FragmentPagerAdapter {  
  8.   
  9.     //定义三个Fragment的索引  
  10.     public static final int Fragment_Index_0=0;  
  11.     public static final int Fragment_Index_1=1;  
  12.     public static final int Fragment_Index_2=2;  
  13.       
  14.     public ViewPagerAdapter(FragmentManager fragmentManager)   
  15.     {  
  16.         super(fragmentManager);  
  17.     }  
  18.   
  19.     @Override  
  20.     public Fragment getItem(int Index)   
  21.     {  
  22.         Fragment mFragemnt=null;  
  23.         switch(Index)  
  24.         {  
  25.           case Fragment_Index_0:  
  26.               mFragemnt=new Fragment_0();  
  27.               break;  
  28.           case Fragment_Index_1:  
  29.               mFragemnt=new Fragment_1();  
  30.               break;  
  31.           case Fragment_Index_2:  
  32.               mFragemnt=new Fragment_2();  
  33.               break;  
  34.         }  
  35.         return mFragemnt;  
  36.     }  
  37.   
  38.     @Override  
  39.     public int getCount()   
  40.     {  
  41.         return 3;  
  42.     }  
  43.   
  44. }  
      

        其中，Fragment_0、Fragment_1、Fragment_2是继承自Fragment的类，由于三个布局基本一样，这里只给出Fragment_0的代码：

[java]  view plain copy print ?
  1. package com.Android.AnyViewUI;  
  2.   
  3.   
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. public class Fragment_0 extends Fragment   
  11. {  
  12.   
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)   
  14.     {  
  15.         View mView=inflater.inflate(R.layout.layout_0, container, false);  
  16.         return mView;  
  17.     }  
  18.       
  19. }  

        现在，我们将开始写好的代码中的mAdapter用这个适配器类去替换，然后我们发现程序可以运行了，可是为什么啊？看了Android文档，上面说FragmentPagerAdapter是实现了PagerAdapter，换句话说，真正起作用的还是PagerAdapter这个类，好，我们回头看这个类，在我们开始的代码中，我们在instantiateItem()、destroyItem()操作的对象始终是View，如果我们把这个View换成Fragment，把View[]换成Fragment[],在类内部使用FragmentManager对Fragment进行管理，我们会发现这样的效果和继承FragmentPagerAdapter是一样的，这样对于这两个适配器的关系我们就已经很明确了。可是，我还是想知道为什么刚开始的那个方法不行呢？希望知道这个问题的答案的朋友，可以告诉我，最后放上效果图：



ViewPager相关文章：

1、Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

2、Android开发学习之基于ViewPager实现Gallery画廊效果

3、Android开发学习之使用ViewPager+PagerTabStrip制作可滑动的Tab

4、Android开发学习之使用ViewPager打造应用引导界面面

     

小人物2014
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android之实现ViewPager+Fragment左右滑动
SnowWitch的博客
01-29 4253
最近看新闻发现新闻的页面是可以左右滑动的，于是自己就好奇起来了，之前做过ViewPager展示图片，在想怎么加载页面呢？研究了一下，发现就是添加了Fragment，废话不多说，揭秘奥秘的时候到了。 使用过ViewPager小伙伴们都知道，Viewpager加载数据，需要数据源，这里我们定义4个Fragment。为了方便其他同事使用，我给这4个Fragment添加了一个基类，具体代码如下：
TabHost+ViewPager+Fragment实现页面的滑动，android开发工具deve
m0_64604636的博客
12-07 7474
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width=“match_parent” android:layout_height=“match_parent” android:layout_above="@+id/viewline" </android.support.v4.view.ViewPager> ViewPager是用到android v4包下的内容，v4包下有很多内
ViewPager+Fragment+AcitonBar整合 (可用于实现顶部或者底部菜单栏)
Townkoim的专栏
09-14 719
现在很流行ViewPager+Fragment来实现可滑动底部或者顶部的菜单，在这里我使用的是ActionBar。在真实开发中，很少会用到，但是可以根据自己的需求，将ActionBar换成顶部或者底部LinearLayout布局（或者用RadioGroup）来实现： import java.util.ArrayList; import java.util.List; import androi
BottomNavigationBar+viewPager实现可滑动的底部导航栏
GuldanHu的博客
08-16 2023
1.首先要在grade里依赖下 com.ashokvarma.android:bottom-navigation-bar:2.0.4 2.在布局文件里使用 &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro...
Viewpager+底部菜单栏
Dylan_null的专栏
03-09 1403
在apk中有很多的布局都用了viewpager+底部菜单栏来设置的.比如QQ,微信等.最近在项目中的设置也是用viewpager+底部菜单栏,在网上看了下他们的demo没有我想要的那样效果代码还很复制,最后觉得还是自定义一个底部菜单栏比较简单.首先我们把底部的菜单栏有几个功能键在布局中设置出来代码如下:这里只写了3个功能可以自己去扩展 <LinearLayout xmlns:android="h
玩Android项目开发1------首页（ViewPager+BottomNavigationBar实现导航栏）
qq_33235287的博客
02-12 1020
进入主界面后，主要分为5个模块：首页、知识体系、公众号、项目、导航，首先先将页面框架搭建起来，使用ViewPager + BottomNavigationBar实现布局。 1、搜集底部导航栏的图片。 在Android项目中，考虑到内存，我们还是尽量避免从外界引入图片，因此推荐使用svg图片。 svg图片的获取，可以从阿里的矢量图库获取，也可以从其他的地方获取。 但是Android不支持svg矢量...
Tablayout+Fragment+Viewpager实现分页滑动
m0_46350041的博客
10-30 293
PagerAdapter PagerAdapter是一个抽象类，它有两个实现子类供我们使用，分别是FragmentStatePagerAdapter和FragmentPagerAdapter FragmentPagerAdapter，FragmentStatePagerAdapter两者区别 FragmentPagerAdapter在销毁Fragment时不会调用onDestroy（）方法，而带了State的Adapter则会调用Fragment的onDestroy()方法，换言之，前者仅仅是销毁了Frag
Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
01-20
BottomBar 　BottomBar是Github上的...　我用的是Android studio开发，fragment全部导的V4的包（以为最开始就支持的是v4的，后面也支持了app.fragment）. 首先是dependencies compile ‘com.jakewharton:butterknife
Android之Viewpager+Fragment实现懒加载示例
08-31
"Android之Viewpager+Fragment实现懒加载示例" Android应用开发中，Viewpager和Fragment是非常常用的两个组件，Viewpager可以实现页面的滑动切换，而Fragment可以实现屏幕上的局部更新。但是，在使用Viewpager和...
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
08-26
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果是Android开发中常用的技术之一。本文将对其进行详细介绍，并提供了具体的实现代码。 知识点1：ViewPager的使用 ViewPager是Android支持包（Android ...
android ActionBarTabs+ViewPager+Fragment 实现tab 滑动翻页效果
11-07
android ActionBarTabs+ViewPager+Fragment 实现tab 滑动翻页效果
ViewPagerTabDemo实现Android Tab切换菜单
09-12
通过Fragment + Viewpager实现Android Tab切换菜单
4种 Tab选项 包括 FragmentPagerAdapter和ViewPagerIndicator
02-13
Tab选项卡几乎成为了App必备的一个功能，它的实现方法也是多种多样，本课程就将讲解迄今为止最主流的4种实现Tab的方法，包括ViewPager、Fragment、FragmentPagerAdapter和ViewPagerIndicator
pagerAdapter的简单介绍
qq_21956477的博客
10-22 837
前言：天下皆知美之为美，斯恶已，皆知善之为善，斯不善已。故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。是以圣人处无为之事，行不言之教。万物生焉而不辞，生而不有，为而不恃，功成而弗居。夫唯不居，是以不去。 一、pagerAdapter的四个函数分析@Override public int getCount() { return datas.size(); }类似其他的adapt
自定义PagerTab
Cricket_7的博客
04-03 207
1，实现效果 2，实现逻辑 【1】创建自定义控件 类copy到自己要用的项目内 资源文件的修改 bg_tab_text.xmltab背景资源 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/ap...
PagerAdapter深度解析和实践优化，看完你还觉得算法不重要
m0_66264673的博客
01-27 910
*/ public abstract class AbsLoopPagerAdapter extends PagerAdapter { private BannerView mViewPager; /** 用来存放View的集合 / private ArrayList mViewList = new ArrayList<>(); /* 刷新全部 */ @Override public void notifyDataSetChanged() { mViewList.clear(); initPo
Android Tab -- 使用ViewPager、PagerAdapter来实现
07-04 141
原文地址：http://blog.csdn.net/crazy1235/article/details/42678877 效果：滑动切换，自动切换。 代码：https://github.com/ldb-github/Layout_Tab 1、布局界面通过ViewPager标签来实现视图左右切换。 2、然后通过LinearLayout增加指示器功能，表明当前展示的是第几...
ViewPager+seekBar的联动效果
shediao4044的博客
08-23 567
主要实现的效果是，拖动seekbar的时候，viewpager跟随滑动。 拖动Viewpager的时候，seekbar进度条跟随滑动。 直接上代码 &lt;android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" andro...
Android tableLayout+viewpager+Fragment
最新发布
04-05
Android TableLayout is a ViewGroup which displays the data in a tabular form. It is used to create a user interface with rows and columns similar to a spreadsheet. ViewPager is a View which allows the user to swipe left and right to navigate between pages. Fragments are reusable components which can be used to create dynamic user interfaces. To create a TableLayout with ViewPager and Fragment, follow the below steps: 1. Create a new Android Studio project. 2. Add the required dependencies in the build.gradle file. 3. Create a new Fragment class for each tab. 4. Create a layout file for each Fragment. 5. Create a new FragmentPagerAdapter class to manage the Fragments. 6. Create a layout file for the Activity which will contain the TableLayout and ViewPager. 7. Add the TableLayout and ViewPager to the layout file. 8. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter. 9. Create a new TabLayout and add it to the layout file. 10. Add the TabLayout to the ViewPager. Example code: 1. Add the dependencies in the build.gradle file: ``` dependencies { implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.viewpager2:viewpager2:1.0.0' } ``` 2. Create a new Fragment class for each tab: ``` public class TabFragment extends Fragment { private int tabPosition; public TabFragment(int tabPosition) { this.tabPosition = tabPosition; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); TextView textView = view.findViewById(R.id.tab_text); textView.setText(getString(R.string.tab_text, tabPosition + 1)); return view; } } ``` 3. Create a layout file for each Fragment: ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:textAppearanceLarge" /> </LinearLayout> ``` 4. Create a new FragmentPagerAdapter class to manage the Fragments: ``` public class TabAdapter extends FragmentStateAdapter { public TabAdapter(FragmentActivity activity) { super(activity); } @Override public Fragment createFragment(int position) { return new TabFragment(position); } @Override public int getItemCount() { return 3; } } ``` 5. Create a layout file for the Activity which will contain the TableLayout and ViewPager: ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> ``` 6. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter: ``` public class MainActivity extends AppCompatActivity { private ViewPager2 viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); } } ``` 7. Create a new TabLayout and add it to the layout file: ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> ``` 8. Add the TabLayout to the ViewPager: ``` TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` This will create a TableLayout with ViewPager and Fragment. The user can swipe left and right to navigate between tabs. Each tab will display a Fragment with a TextView showing the tab number.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值