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



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

    }

       源码下载


智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告