android开发之viewpager and Fragment

  

     Android ViewPager和Fragment实现顶部导航界面滑动效果  

     Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示

该效果。ViewPager很多时候会结合Fragment一块使用，这种方法使得管理每个页面的生命周期变得很方便。

些adapter的具体实现，可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括：

其中，有一FragmentPagerAdapter,和 FragmentStatePagerAdapter。

而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。

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>  

activity_main_top_tab.xml

<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>

Fragment显示布局layout1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"  android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:id="@+id/linearLayout"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/editText">


        <TextView
            android:id="@+id/atext"
            android:text="上午"
            android:gravity="center"
            android:layout_width="54dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/text1"
            android:text="8"
            android:gravity="center"
            android:layout_width="44dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />

        <TextView
            android:text=":"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />


        <TextView
            android:id="@+id/text00"
            android:text="00"
            android:gravity="center"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />

        <Switch
            android:id="@+id/aswitch"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>



    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/btn"
        android:layout_marginBottom="319dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="176dp" />


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp" />

</RelativeLayout  >

主函数MainActivity.java

package asfas.myclock;

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.text.Layout;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;


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 Layout
    /**
     * 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 ViewPager.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);
    }

}

Fragment适配器

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

Fragment显示函数

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

  这是大概  明天修改。