ViewPager和Fragment结合使用，可以做出顶部导航界面滑动效果

时间：2016-05-13 03:48:08 阅读：214 评论：0 收藏：0 [点我收藏+]

标签：

在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解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> 

源码下载地址：http://download.csdn.net/detail/zqr772791008/9512905

ViewPager和Fragment结合使用，可以做出顶部导航界面滑动效果

标签：

原文地址：http://blog.csdn.net/zqr772791008/article/details/51338128

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行