Android ViewPager和Fragment实现顶部导航界面滑动效果
在项目中,我们常常需要实现界面滑动切换的效果。例如,微信界面的左右滑动切换效果。那这种效果是怎么实现的?今天我就带大家简单了解ViewPager,并通过实例来实现该效果。
一. ViewPager 官方API
首先我们来看一下ViewPager官方给出的解释,如图:
具体意思如下:
Layout 管理器允许用户可以在页面上,左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示该效果。
ViewPager很多时候会结合Fragment一块使用,这种方法使得管理每个页面的生命周期变得很方便。其中,有一些adapter的具体实现,可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括:FragmentPagerAdapter,和 FragmentStatePagerAdapter。
而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。
二.效果如下:
三.代码实现:
1.xml布局文件
1>主布局activity_main.xml
- <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <include layout="@layout/activity_main_top_tab" />
- <android.support.v4.view.ViewPager
- android:id="@+id/id_page_vp"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1" >
- </android.support.v4.view.ViewPager>
- </LinearLayout></span>
注意:布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况系统会自动引入)
2>顶部导航activity_main_top_tab.xml
- <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="vertical" >
- <LinearLayout
- android:id="@+id/id_switch_tab_ll"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:baselineAligned="false"
- >
- <LinearLayout
- android:id="@+id/id_tab_chat_ll"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@drawable/guide_round_selector"
- android:gravity="center"
- android:orientation="horizontal"
- android:padding="10dip" >
- <TextView
- android:id="@+id/id_chat_tv"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:text="聊天"
- android:textColor="#0000FF"
- android:textSize="15dip" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/id_tab_friend_ll"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@drawable/guide_round_selector"
- android:clickable="true"
- android:gravity="center"
- android:orientation="horizontal"
- android:padding="10dip"
- android:saveEnabled="false" >
- <TextView
- android:id="@+id/id_friend_tv"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:text="好友"
- android:textColor="#000000"
- android:textSize="15dip" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/id_tab_contacts_ll"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1"
- android:background="@drawable/guide_round_selector"
- android:focusable="false"
- android:gravity="center"
- android:orientation="horizontal"
- android:padding="10dip" >
- <TextView
- android:id="@+id/id_contacts_tv"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:gravity="center"
- android:text="通讯录"
- android:textColor="#000000"
- android:textSize="15dip" />
- </LinearLayout>
- </LinearLayout>
- <ImageView
- android:id="@+id/id_tab_line_iv"
- android:layout_width="200dp"
- android:layout_height="wrap_content"
- android:contentDescription="tab"
- android:background="@drawable/tab_selected_pressed_holo" >
- </ImageView>
- <View
- android:layout_width="match_parent"
- android:layout_height="1dp"
- android:background="#000000" />
- </LinearLayout></span>
3>Fragment显示布局activity_tab_chat.xml,activity_tab_contacts.xml,activity_tab_friend.xml(只给出一个,其他类似)
- <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:text="聊天界面"
- android:textColor="#FF0000"
- android:textSize="20sp"
- android:gravity="center"
- ></TextView>
- </LinearLayout></span>
4>主函数MainActivity.java
- <span style="font-family:Microsoft YaHei;font-size:18px;">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);
- }
- }
- </span>
注意:
1.MainActivity继承于FragmentActivity;
2.初始化导航条的宽度:initTabLineWidth(),由于本例给出的是3个界面切换,固长度为整个屏幕宽度的1/3;
3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;
其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左),给出导航条距离左边的边距,显示导航条滑动的效果。
5>Fragment适配器FragmentAdapter,继承于FragmentPagerAdapter
- <span style="font-family:Microsoft YaHei;font-size:18px;">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();
- }
- }
- </span>
6>Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个,其他类似)
- <span style="font-family:Microsoft YaHei;font-size:18px;">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实现顶部导航界面滑动效果相关推荐
- Android 应用开发----7. ViewPager+Fragment一步步打造顶部导航界面滑动效果
ViewPager+Fragment一步步打造顶部导航界面滑动效果 在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间 ...
- boss直聘Android找工作界面,Android仿Boss直聘我的界面滑动效果
最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. image 其实我们拿到这个效果的时候,看到滑动,折 ...
- android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给Tab ...
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可以 ...
- android+qq底部界面,Android 高仿QQ 界面滑动效果
Android高仿QQ界面滑动效果 点击或者滑动切换画面,用ViewPager实现, 首先是布局文件: android:layout_width="match_parent" an ...
- ViewPager、Fragment和TabLayout实现切页效果
文章目录 ViewPager.Fragment和TabLayout实现切页效果 ViewPager.Fragment和TabLayout实现切页效果 不会上传动图,心里哭唧唧.但是是完整代码!新建一个 ...
- Android学QQ空间相册浏览类型横向滑动效果显示多图片MyHorizontalScrollView
Android学QQ空间相册浏览类型横向滑动效果显示多图片MyHorizontalScrollView 我们来定制一下吧 布局文件:activity_main.xml <LinearLayout ...
- android viewpager 嵌套fragment,Android ViewPager+Fragment多层嵌套(使用问题处理)
之前写了Android ViewPager+Fragment(使用问题处理),封装了一个BaseFragment,对于简单使用ViewPager+Fragment而言,是没有问题的. 不过,ViewP ...
- 关于Android ViewPager 与 Fragment 一起使用碰到的问题
2019独角兽企业重金招聘Python工程师标准>>> 这是我前段时间遇到的两个问题,情况是这样的:第一个问题:由于公司的 app 层级比较多,所以用了一个翻页的功能.在具体翻到某一 ...
最新文章
- 关于HttpClient上传中文乱码的解决办法
- 深度神经网络中的局部响应归一化LRN简介及实现
- JDK1.5 新特性
- 实践--课程表(仿超级课程表展示课表)
- 在OpenWrt中上传文件至路由器
- struts2标签集
- strace oracle
- 牛客 - Animal Protection(单调栈)
- Windows下Android开发环境搭建和配置
- Bitmap缩放(二)
- MySQL更新死锁问题
- 远程桌面计算机正在使用,远程桌面使用问题
- 【推荐】区块链技术及行业应用资料合集
- Flash actionscrip视频教程
- 你的朋友国庆假期都去了哪里玩?微信大数据告诉你!最远的朋友圈签到竟然来自……
- SN74LS00N芯片逻辑输出电平
- html5分镜头脚本范例,分镜头脚本教程图解
- 前Vertu设计师推出Android版iBeacon,无需专有硬件,没话费的旧手机都能做基站
- [mysql语法错误]--Cannot load connection class because of underlying exception
- [转]我们这么努力,也不过是为了成为一个普通人。
热门文章
- [Spring cloud 一步步实现广告系统] 15. 使用开源组件监听Binlog 实现增量索引准备...
- [Spring cloud 一步步实现广告系统] 10. 使用Ribbon 实现微服务调用
- Java基础23-集合类2(Set接口,Iterator迭代器)
- 【Redis】Redis学习(三) Redis 主从模式详解
- iOS深入探索直播推拉流实现流程(二:推流权限判断 )
- Data Mining Tools
- Delphi FastReport动态加载图片
- Oracle 不同用户之间 大量数据转移的方法测试
- 使用 Eigen 库写第一个程序
- 使用 github 和 jitpack 构建 android 依赖