如何使用viewpager与fragment写一个app导航activity_百度知道
如何使用viewpager与fragment写一个app导航activity
提问者采纳
我这写了一个demo 就是用viewpage + fragment做的直接就可以用了
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁&&&&ViewPager+Fragment的app导航Activity的实现
&ViewPager+Fragment的app导航Activity的实现
ViewPager+Fragment的app导航Activity的实现
若举报审核通过，可奖励20下载分
被举报人：
bear_huangzhen
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
ViewPager+Fragment的app导航Activity的实现
所需积分：1
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
ViewPager+Fragment的app导航Activity的实现
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员Android ViewPager和Fragment实现顶部导航界面滑动效果 - 推酷
Android ViewPager和Fragment实现顶部导航界面滑动效果
在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。
一. ViewPager 官方API
首先我们来看一下ViewPager官方给出的解释，如图：
具体意思如下：
管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现
PagerAdapter
接口来显示该效果。
很多时候会结合
一块使用，这种方法使得管理每个页面的生命周期变得很方便。其中，有一些 adapter 的具体实现，可以适合于这种
使用的情况。这些 adapter 包括：
而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。
二.效果如下：
三.代码实现：
1.xml布局文件
1&主布局activity_main.xml
&span style=&font-family:Microsoft YaHfont-size:18&&&LinearLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/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 YaHfont-size:18&&&LinearLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/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& &
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& &
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& &
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&
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 YaHfont-size:18&&&LinearLayout xmlns:android=&/apk/res/android&
xmlns:tools=&/tools&
android:layout_width=&match_parent&
android:layout_height=&match_parent&
android:orientation=&vertical& &
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 YaHfont-size:18&&package com.example.
import java.util.ArrayL
import java.util.L
import android.graphics.C
import android.os.B
import android.support.v4.app.F
import android.support.v4.app.FragmentA
import android.support.v4.view.ViewP
import android.support.v4.view.ViewPager.OnPageChangeL
import android.util.DisplayM
import android.util.L
import android.widget.ImageV
import android.widget.LinearL
import android.widget.TextV
public class MainActivity extends FragmentActivity {
private List&Fragment& mFragmentList = new ArrayList&Fragment&();
private FragmentAdapter mFragmentA
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 currentI
* 屏幕的宽度
private int screenW
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findById();
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：什么都没做。
public void onPageScrollStateChanged(int state) {
* position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
* offsetPixels:当前页面偏移的像素位置
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);
public void onPageSelected(int position) {
resetTextView();
switch (position) {
mTabChatTv.setTextColor(Color.BLUE);
mTabFriendTv.setTextColor(Color.BLUE);
mTabContactsTv.setTextColor(Color.BLUE);
currentIndex =
* 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
private void initTabLineWidth() {
DisplayMetrics dpMetrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay()
.getMetrics(dpMetrics);
screenWidth = dpMetrics.widthP
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);
1.MainActivity继承于FragmentA
2.初始化导航条的宽度：initTabLineWidth()，由于本例给出的是3个界面切换，固长度为整个屏幕宽度的1/3;
3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;
其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左)，给出导航条距离左边的边距，显示导航条滑动的效果。
5&Fragment适配器FragmentAdapter，继承于FragmentPagerAdapter
&span style=&font-family:Microsoft YaHfont-size:18&&package com.example.
import java.util.ArrayL
import java.util.L
import android.support.v4.app.F
import android.support.v4.app.FragmentM
import android.support.v4.app.FragmentPagerA
public class FragmentAdapter extends FragmentPagerAdapter {
List&Fragment& fragmentList = new ArrayList&Fragment&();
public FragmentAdapter(FragmentManager fm,List&Fragment& fragmentList) {
super(fm);
this.fragmentList = fragmentL
public Fragment getItem(int position) {
return fragmentList.get(position);
public int getCount() {
return fragmentList.size();
6&Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个，其他类似)
&span style=&font-family:Microsoft YaHfont-size:18&&package com.example.
import android.os.B
import android.support.v4.app.F
import android.view.LayoutI
import android.view.V
import android.view.ViewG
public class ChatFragment extends Fragment {
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 chatV
public void onActivityCreated(Bundle savedInstanceState){
super.onActivityCreated(savedInstanceState);
上面就是本文的所有内容。
源码下载地址：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致