Android ViewPager和Fragment实现仿微信导航界面及滑动效果

来源：互联网发布：电脑网络链接别人电脑编辑：程序博客网时间：2024/05/01 00:49

1 先看看实现的效果：

ps：上面每一帧Fragment中，包含是来自网络的图片；

实现ViewPager+Fragment的页面滑动和底部导航原理

主布局文件如下：

<?xml version="1.0" encoding="utf-8"?><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"    tools:context="com.troy.fragmentnavigation.MainActivity">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/blue">        <TextView            android:id="@+id/title"            android:layout_centerInParent="true"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="我的订单"            android:textSize="20sp"            android:textColor="@android:color/white"/>    </RelativeLayout>    <android.support.v4.view.ViewPager        android:id="@+id/mainViewPager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="40dp"        android:background="@android:color/white"        android:paddingTop="5dp"        android:paddingBottom="5dp"        android:orientation="horizontal"        android:layout_marginTop="1dp"        android:gravity="center_vertical"        android:baselineAligned="false">        <TextView            android:id="@+id/item_weixin"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="match_parent"            android:gravity="center_horizontal|center_vertical"            android:text="微信"            android:textSize="15dp"            android:textColor="@drawable/main_tab_text_color"/>        <TextView            android:id="@+id/item_tongxunlu"            android:layout_width="0dp"            android:layout_height="match_parent"            android:gravity="center_horizontal|center_vertical"            android:layout_weight="1"            android:text="通讯录"            android:textSize="15dp"            android:textColor="@drawable/main_tab_text_color"/>        <TextView            android:id="@+id/item_faxian"            android:layout_width="0dp"            android:layout_height="match_parent"            android:gravity="center_horizontal|center_vertical"            android:layout_weight="1"            android:text="发现"            android:textSize="15dp"            android:textColor="@drawable/main_tab_text_color"/>        <TextView            android:id="@+id/item_me"            android:layout_width="0dp"            android:layout_height="match_parent"            android:gravity="center_horizontal|center_vertical"            android:layout_weight="1"            android:text="我"            android:textSize="15dp"            android:textColor="@drawable/main_tab_text_color"/>    </LinearLayout></LinearLayout>

MainActivity核心代码如下：

给FragmentList添加数据

</pre><p>mFragmentList.add(oneFragment); </p><p>mFragmentList.add(twoFragment); </p><p>mFragmentList.add(threeFragment); </p><p>mFragmentList.add(fouthFragmen);</p><pre>

ViewPager的监听事件--滑动ViewPager的时候触发修改文本的操作

 mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);        vp.setOffscreenPageLimit(4);//ViewPager的缓存为4帧        vp.setAdapter(mFragmentAdapter);        vp.setCurrentItem(0);//初始设置ViewPager选中第一帧        item_weixin.setTextColor(Color.parseColor("#66CDAA"));        //ViewPager的监听事件        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                /*此方法在页面被选中时调用*/                title.setText(titles[position]);                changeTextColor(position);            }            @Override            public void onPageScrollStateChanged(int state) {                /*此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。                arg0 ==1的时辰默示正在滑动，                arg0==2的时辰默示滑动完毕了，                arg0==0的时辰默示什么都没做。*/            }        });

点击底部Text 动态修改ViewPager的内容

 /**点击底部Text 动态修改ViewPager的内容，底部是采用4个textView，当然也可以使用RadioButton，*/    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.item_weixin:                vp.setCurrentItem(0, true);                break;            case R.id.item_tongxunlu:                vp.setCurrentItem(1, true);                break;            case R.id.item_faxian:                vp.setCurrentItem(2, true);                break;            case R.id.item_me:                vp.setCurrentItem(3, true);                break;        }    }

FragmentAdapter

 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();        }    }

源码下载

0 0