Android ViewPager和Fragment实现顶部导航界面滑动效果

最新推荐文章于 2021-09-03 15:01:12 发布
最新推荐文章于 2021-09-03 15:01:12 发布
阅读量853 收藏 2
点赞数
文章标签： ViewPager 顶部导航 导航 左右滑动 android

在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。

一. ViewPager 官方API

首先我们来看一下ViewPager官方给出的解释，如图：

\

具体意思如下：

 

Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示该效果。

ViewPager很多时候会结合Fragment一块使用，这种方法使得管理每个页面的生命周期变得很方便。其中，有一些adapter的具体实现，可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括：FragmentPagerAdapter,和 FragmentStatePagerAdapter。

而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。

二.效果如下：

\

三.代码实现：

1.xml布局文件

1>主布局activity_main.xml

 

?
1
2
3
4
5
6
7
8
<span style= "font-family:Microsoft" ><linearlayout android:layout_height= "match_parent" android:layout_width= "match_parent" android:orientation= "vertical" xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" >
 
     <include layout= "@layout/activity_main_top_tab" >
 
     
     </android.support.v4.view.viewpager>
 
</include></linearlayout></span>
注意：布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况 系统 会自动引入)

 

2>顶部导航activity_main_top_tab.xml

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<span style= "font-family:Microsoft" ><linearlayout android:layout_height= "wrap_content" android:layout_width= "match_parent" android:orientation= "vertical" xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" >
 
     <linearlayout android:baselinealigned= "false" android:id= "@+id/id_switch_tab_ll" android:layout_height= "wrap_content" android:layout_width= "match_parent" android:orientation= "horizontal" >
 
         <linearlayout android:background= "@drawable/guide_round_selector" android:gravity= "center" android:id= "@+id/id_tab_chat_ll" android:layout_height= "wrap_content" android:layout_weight= "1" android:layout_width= "match_parent" android:orientation= "horizontal" android:padding= "10dip" >
 
             <textview android:gravity= "center" android:id= "@+id/id_chat_tv" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:text= "聊天" android:textcolor= "#0000FF" android:textsize= "15dip" >
         </textview></linearlayout>
 
         <linearlayout android:background= "@drawable/guide_round_selector" android:clickable= "true" android:gravity= "center" android:id= "@+id/id_tab_friend_ll" android:layout_height= "wrap_content" android:layout_weight= "1" android:layout_width= "match_parent" android:orientation= "horizontal" android:padding= "10dip" android:saveenabled= "false" >
 
             <textview android:gravity= "center" android:id= "@+id/id_friend_tv" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:text= "好友" android:textcolor= "#000000" android:textsize= "15dip" >
         </textview></linearlayout>
 
         <linearlayout android:background= "@drawable/guide_round_selector" android:focusable= "false" android:gravity= "center" android:id= "@+id/id_tab_contacts_ll" android:layout_height= "wrap_content" android:layout_weight= "1" android:layout_width= "match_parent" android:orientation= "horizontal" android:padding= "10dip" >
 
             <textview android:gravity= "center" android:id= "@+id/id_contacts_tv" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:text= "通讯录" android:textcolor= "#000000" android:textsize= "15dip" >
         </textview></linearlayout>
     </linearlayout>
 
     <imageview android:background= "@drawable/tab_selected_pressed_holo" android:contentdescription= "tab" android:id= "@+id/id_tab_line_iv" android:layout_height= "wrap_content" android:layout_width= "200dp" >
     </imageview>
 
     <view android:background= "#000000" android:layout_height= "1dp" android:layout_width= "match_parent" >
 
</view></linearlayout></span>

3>Fragment显示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只给出一个，其他类似)

 

 

?
1
2
3
4
5
<span style= "font-family:Microsoft" ><linearlayout android:layout_height= "match_parent" android:layout_width= "match_parent" android:orientation= "vertical" xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" >
 
     <textview android:gravity= "center" android:layout_height= "match_parent" android:layout_width= "match_parent" android:text= "聊天界面" android:textcolor= "#FF0000" android:textsize= "20sp" ></textview>
 
</linearlayout></span>
4>主函数MainActivity.java

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<span style= "font-family:Microsoft" > package com.example.viewpagerdemo;
 
import java.util.ArrayList;
import java.util.List;
 
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class MainActivity extends FragmentActivity {
 
     private List<fragment> mFragmentList = new ArrayList<fragment>();
     private FragmentAdapter mFragmentAdapter;
     
     private ViewPager mPageVp;
     /**
      * Tab显示内容TextView
      */
     private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;
     /**
      * Tab的那个引导线
      */
     private ImageView mTabLineIv;
     /**
      * Fragment
      */
     private ChatFragment mChatFg;
     private FriendFragment mFriendFg;
     private ContactsFragment mContactsFg;
     /**
      * ViewPager的当前选中页
      */
     private int currentIndex;
     /**
      * 屏幕的宽度
      */
     private int screenWidth;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         findById();
         init();
         initTabLineWidth();
 
     }
 
     private void findById() {
         mTabContactsTv = (TextView) this .findViewById(R.id.id_contacts_tv);
         mTabChatTv = (TextView) this .findViewById(R.id.id_chat_tv);
         mTabFriendTv = (TextView) this .findViewById(R.id.id_friend_tv);
 
         mTabLineIv = (ImageView) this .findViewById(R.id.id_tab_line_iv);
 
         mPageVp = (ViewPager) this .findViewById(R.id.id_page_vp);
     }
 
     private void init() {
         mFriendFg = new FriendFragment();
         mContactsFg = new ContactsFragment();
         mChatFg = new ChatFragment();
         mFragmentList.add(mChatFg);
         mFragmentList.add(mFriendFg);
         mFragmentList.add(mContactsFg);
 
         mFragmentAdapter = new FragmentAdapter(
                 this .getSupportFragmentManager(), mFragmentList);
         mPageVp.setAdapter(mFragmentAdapter);
         mPageVp.setCurrentItem( 0 );
 
         mPageVp.setOnPageChangeListener( new OnPageChangeListener() {
 
             /**
              * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
              */
             @Override
             public void onPageScrollStateChanged( int state) {
 
             }
 
             /**
              * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
              * offsetPixels:当前页面偏移的像素位置
              */
             @Override
             public void onPageScrolled( int position, float offset,
                     int offsetPixels) {
                 LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                         .getLayoutParams();
 
                 Log.e(offset:, offset + );
                 /**
                  * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来
                  * 设置mTabLineIv的左边距 滑动场景：
                  * 记3个页面,
                  * 从左到右分别为0,1,2
                  * 0->1; 1->2; 2->1; 1->0
                  */
 
                 if (currentIndex == 0 && position == 0 ) // 0->1
                 {
                     lp.leftMargin = ( int ) (offset * (screenWidth * 1.0 / 3 ) + currentIndex
                             * (screenWidth / 3 ));
 
                 } else if (currentIndex == 1 && position == 0 ) // 1->0
                 {
                     lp.leftMargin = ( int ) (-( 1 - offset)
                             * (screenWidth * 1.0 / 3 ) + currentIndex
                             * (screenWidth / 3 ));
 
                 } else if (currentIndex == 1 && position == 1 ) // 1->2
                 {
                     lp.leftMargin = ( int ) (offset * (screenWidth * 1.0 / 3 ) + currentIndex
                             * (screenWidth / 3 ));
                 } else if (currentIndex == 2 && position == 1 ) // 2->1
                 {
                     lp.leftMargin = ( int ) (-( 1 - offset)
                             * (screenWidth * 1.0 / 3 ) + currentIndex
                             * (screenWidth / 3 ));
                 }
                 mTabLineIv.setLayoutParams(lp);
             }
 
             @Override
             public void onPageSelected( int position) {
                 resetTextView();
                 switch (position) {
                 case 0 :
                     mTabChatTv.setTextColor(Color.BLUE);
                     break ;
                 case 1 :
                     mTabFriendTv.setTextColor(Color.BLUE);
                     break ;
                 case 2 :
                     mTabContactsTv.setTextColor(Color.BLUE);
                     break ;
                 }
                 currentIndex = position;
             }
         });
 
     }
 
     /**
      * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
      */
     private void initTabLineWidth() {
         DisplayMetrics dpMetrics = new DisplayMetrics();
         getWindow().getWindowManager().getDefaultDisplay()
                 .getMetrics(dpMetrics);
         screenWidth = dpMetrics.widthPixels;
         LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv
                 .getLayoutParams();
         lp.width = screenWidth / 3 ;
         mTabLineIv.setLayoutParams(lp);
     }
 
     /**
      * 重置颜色
      */
     private void resetTextView() {
         mTabChatTv.setTextColor(Color.BLACK);
         mTabFriendTv.setTextColor(Color.BLACK);
         mTabContactsTv.setTextColor(Color.BLACK);
     }
 
}
</fragment></fragment></span>

注意：

1.MainActivity继承于FragmentActivity;

2.初始化导航条的宽度：initTabLineWidth()，由于本例给出的是3个界面切换，固长度为整个屏幕宽度的1/3;

3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;

其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左)，给出导航条距离左边的边距，显示导航条滑动的效果。

 

5>Fragment适配器FragmentAdapter，继承于FragmentPagerAdapter
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<span style= "font-family:Microsoft" > package com.example.viewpagerdemo;
 
import java.util.ArrayList;
import java.util.List;
 
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
 
public class FragmentAdapter extends FragmentPagerAdapter {
 
     List<fragment> fragmentList = new ArrayList<fragment>();
     public FragmentAdapter(FragmentManager fm,List<fragment> fragmentList) {
         super (fm);
         this .fragmentList = fragmentList;
     }
 
     @Override
     public Fragment getItem( int position) {
         return fragmentList.get(position);
     }
 
     @Override
     public int getCount() {
         return fragmentList.size();
     }
 
}
</fragment></fragment></fragment></span>

6>Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个，其他类似)

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<span style= "font-family:Microsoft" > package com.example.viewpagerdemo;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class ChatFragment extends Fragment {
     @Override
     public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
         super .onCreateView(inflater, container, savedInstanceState);
         View chatView = inflater.inflate(R.layout.activity_tab_chat, container, false );
         return chatView;   
     }
     @Override
     public void onActivityCreated(Bundle savedInstanceState){
         super .onActivityCreated(savedInstanceState);
     }
}
</span>


 

攀峰者
关注
Android ViewPager和Fragment实现顶部导航界面滑动效果、标签下的tab位置
Sun的专栏
08-01 3797
在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。 一. ViewPager 官方API 首先我们来看一下ViewPager官方给出的解释，如图： 具体意思如下： Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现Pa
Android ViewPager实现圆点导航左右滑动和Fragment页面切换
09-22
并实例利用ViewPager，PagerAdapter和OnPageChangeListener实现圆点导航左右滑动效果，并实现了被滑动界面处理控件事件，同时通过Fragment实现两个页面切换效果
Android ViewPager +Fragment+TabLayout 实现滑动导航栏
小红妹
04-26 599
       ViewPager 让我印象最深的是，APP的引导页，当我们下载好一个软件点进去，APP就会有三张这样的引导页（告诉用户这款APP基本用途和操作）。当然，ViewPager 不止这样，        ViewPager 最大作用就是允许使用者滑动数据页面，简单的说ViewPager 是一种布局管理器。它是android扩展包v4包中的类。ViewPager类直接继承了ViewGro...
android viewpagerindicator tab,ViewPager系列之顶部滑动indicator+viewPager
weixin_35625324的博客
05-27 354
这个小插件用了githup上下载的一个第三方jar包。安装这个jar包就已经搞死我了，githup上下来直接把zip的后缀名改成了jar就复制粘贴到工程的lib下了，然后自己点击了Add as library没有用，还报出一堆缺少这个那个的内部jar包，也是醉了。。。耽误了不少时间，还要严格按照这个作者的引导，在build.gradle下写上规定的几句才能成功导进来。然后开始写这个小玩意，自己也是...
011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)
weixin_30950887的博客
03-04 565
1.TabLayout介绍 　　TabLayout提供了一个水平的布局用来展示Tabs，很多应用都有这样的设计，典型的有网易新闻，简书，知乎等。TabLayout就可以很好的完成这一职责，首先TabLayout一般都是配合Viewpager使用的，Viewpager里的Fragment随着顶部的Tab一起联动，这种场景再熟悉不过了。 注意：了解开源框架MagicIndicator，也能实现顶部...
android 顶部划出面板,Android滑动面板
weixin_42298081的博客
05-29 291
我正在尝试启动一个应用程序,我有点迷失在如何做我想要的事情上.这就是我要的两个红色面板应该能够向侧面滑动,如果其中一个(或两个)折叠,则白色面板应该展开,占据该面板空间.当我在屏幕上显示红色面板时,白色面板显示所有内容,而不是在任何面板下.到目前为止我尝试了什么：我开始尝试使用两个SlidingDrawers,但白色面板落后于红色面板,所以,那里没有运气.之后我尝试了2个LinearLayouts...
ViewPager+fragment打造顶部导航界面滑动效果源代码
06-04
本示例源代码——`ViewPagerTest`，显然是为了演示如何利用`ViewPager`和`Fragment`构建一个顶部导航界面的滑动效果。下面我们将深入探讨这个主题，了解实现这一功能的关键步骤和技术要点。 首先，我们需要在布局...
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
12-27
总的来说，使用`ViewPager`和`Fragment`在Android Studio中实现滑动切换界面是一个标准流程，能够帮助开发者创建功能丰富的多页面应用。通过理解并熟练掌握这些组件，你可以为用户提供更加流畅和直观的交互体验。在...
ViewPager 与 Fragment相结合实现微信界面实例代码
01-20
Fragment的使用使得每个页面的逻辑更加独立，同时ViewPager提供了流畅的滑动效果，提升了用户体验。需要注意的是，Fragment具有自己的生命周期，可以根据需要在不同生命周期方法中处理数据加载、视图更新等操作。在...
安卓Android源码——ViewPager+Fragment实现QQ界面.zip
10-14
最后，"Android ViewPager+Fragment实现QQ界面" 应该是实际的源代码文件，包含了所有相关的类和资源文件，供开发者研究和学习。 总的来说，通过学习和实践这个项目，开发者可以深入理解 `ViewPager` 和 `Fragment` ...
Android ViewPagerFragmentDemo
05-21
Android ViewPager选项卡使用Fragment，以及头部加上Android 3.0之后tab选择。效果跟tabtoast相同。但效果更佳。这是我的一个实践项目，以及有改变tab背景ui方法。欢迎下载！
viewpager+fragment的使用Demo
09-22
试用于各类型的APP框架滑动与点击切换并行
android viewpager+fragment做主界面(超容易理解的demo)
01-03
笔者之前已经写过了关于viewpager的demo，但是之前是通过将Activity转化为view，然后放入viewpager实现的，具体操作中有时候还是不如fragment方便。 之前的viewpager demo的地址：http://blog.csdn.net/double2hao/article/details/50183567 主要实现的功能与之前的一样： 1、滑动的同时改变标题栏 2、点击标题栏的同时滑动 3、点击fragment中的button能有toast提示
Android Viewpager 顶部或底部tab滑动效果，不是viewpager滑动效果
zhangyaobin_1989的博客
05-15 746
随着业务发展，对一些细节的要求逐渐严格，比如Viewpager滑动时顶部或底部tab的一些效果，现在网上有不少viewpager滑动的效果，tab的效果比较少；今天主要整理了 4点tab效果：tab字体大小缩放（ScaleAnimation）、tab字体颜色渐变（Alpha）、tab底部线（图片）位移渐变（TranslationAnimation）和tab底部线（图片）颜色渐变（AlphaAni
Fragment+ ViewPager 滑动以及联动 以及 ViewPage的Adapter
wang21hua的博客
02-16 183
package com.example.day2; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatA...
ViewPager滑动吸顶效果
Master-D的博客
09-03 273
public class MyCustomerActivity extends AppCompatActivity { private DachshundTabLayout dtbCart; private ViewPager viewpagerViewZnxuexi; private ArrayList<Fragment> fragments = new ArrayList<>(); private Fragment1 fragment1; .
ViewPagerFragment顶部标题联动类库
04-05 427
一般我们实现ViewPager Fragment和顶部标题的联动的时候，会特别的麻烦，下面介绍一种特别简单的写法，是通过导入第三方类库，来实现                                   首先导入类库  libary。不要忘记copy到本地工作空间，因为类库必须和项目在同一工作空间，否则类库，还有不要忘记如果V4包冲突的话，把项目的V4包删除掉就好了，因为类库中有
实现屏幕切换、滑动-ViewPager详解（三）之--------使用Fragment实现ViewPager滑动
womengmengyan的博客
09-02 924
系列文章： 1.实现屏幕切换、滑动-ViewPager详解（一）之——–基础知识 2.实现屏幕切换、滑动-ViewPager详解（二）之——–PagerTitleStrip与PagerTabStrip添加标题栏 3.实现屏幕切换、滑动-ViewPager详解（三）之——–使用Fragment实现ViewPager滑动1.概述;(API解释)android官方最推荐的一种实现方法却是使用frag
android 实现viewpager滑动的同时，上面小图标跟着一起滑动
仰视未来的专栏
05-04 2698
viewpager和fragment的综合使用能够实现一个很好的滑动效果，然后在添加类似的tab标签，这样就能标识所处的页面。（因职业操守，不能上传图片，请见谅）      但问题来了，tab的点击事件可以放到viewpager的onPageSelected中实现，但是在滑动的过程中，上面的小图标跟着一起滑动，就必须要放到onPageScrolled这个函数中了。     viewpaper函
使用ViewPager+Fragment构建微信样式界面教程
"使用ViewPager和Fragment实现微信界面的实例代码教程" 在Android开发中，创建复杂的、可滚动的用户界面是一项常见的任务。此实例教程聚焦于如何利用ViewPager与Fragment结合，来构建一个类似微信的界面。ViewPager...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值