什么是Fragment？
Fragment是Android3.0后新增的概念，Fragment名為碎片，不過卻和Activity十分相似，具有自己的生命周期，它是用來描述一些行為或一部分用戶界面在一個Activity中，我們可以合並多個Fragment在一個單獨的activity中建立多個UI面板，或者重用Fragment在多個activity中。
關於Fragment的生命周期，由於Fragment需要依賴Activity，也就是說當一個Activity的生命周期結束之后，那么Fragment的生命周期也自然結束。如果把一個Activiy比作一座大宅子的話，那么Fragment就可以比作大宅子里的房間，大宅子里的房間其中一間倒塌了，並不會引起整個大宅子的倒塌，但如果大宅子倒塌了，那么大宅里的房間也就都倒塌了。
下面來看下Fragment的生命周期： Activity和Fragment生命周期對比（相似）：
為了更好的理解Fragment，我找了下面的一張圖：
看左邊這張圖，它是我們傳統的手機界面，假設它現在呈現的是一個新聞列表頁，那么當我們點擊列表項中，我們將會跳轉到新聞詳細頁中，上面是標題，下面是正文，這里是2個Activity。
再看看右邊的圖，左邊是新聞列表頁，右邊是新聞詳細頁，我們可以動態的點擊左邊的列表項，使得右邊的新聞詳細頁動態變化，這里只有1個Activity里面嵌套了2個Fragment，左邊一個，右邊一個。
好了，做了簡單的介紹后，先來看看今天我們要實現的效果圖：（高仿微信主界面）
這里我畫了張界面分析圖，畫圖永遠的痛，湊合着看哈
這里的XML布局文件，我把每一部分都分開寫了：
top1.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/bg"
android:paddingLeft="12dp"
android:paddingRight="12dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/weixin" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:text="微信"
android:textColor="@android:color/white"
android:textSize="18dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/search" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/add" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/more" />
</LinearLayout>
</RelativeLayout>
top2.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="37dp"
android:gravity="center_vertical"
android:background="#cccccc"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="聊天"
android:textColor="#339900"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="發現"
android:textColor="@android:color/black"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通訊錄"
android:textColor="@android:color/black"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="3dp" >
<ImageView
android:id="@+id/tabline"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="@drawable/tabline" />
</LinearLayout>
</LinearLayout>
mywx.xml(用include包含前2個布局文件，並設置垂直排列)
<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.example.weixin_test.MyWxTest" >
<include layout="@layout/top1" />
<include layout="@layout/top2" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
Fragment1.xml(由於Flagment的布局文件只是簡單采用字符標示，布局都一樣，這里只給出第一個Fragment布局文件)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是第一個界面"
android:textSize="30dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
接下來是JAVA代碼了，注釋很全（其實用法還是之前的ViewPager，只不過之前的ViewPager的數據源里存放的是view對象，而這里是Fragment）
package com.example.weixin_test;
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.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MyWxTest extends FragmentActivity {
private ViewPager viewPager;// 聲明一個viewpager對象
private TextView tv1;
private TextView tv2;
private TextView tv3;
private ImageView tabline;
private List<Fragment> list;// 聲明一個list集合存放Fragment（數據源）
private int tabLineLength;// 1/3屏幕寬
private int currentPage = 0;// 初始化當前頁為0（第一頁）
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.mywx);
// 初始化滑動條1/3
initTabLine();
// 初始化界面
initView();
}
private void initTabLine() {
// 獲取顯示屏信息
Display display = getWindow().getWindowManager().getDefaultDisplay();
// 得到顯示屏寬度
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
// 1/3屏幕寬度
tabLineLength = metrics.widthPixels / 3;
// 獲取控件實例
tabline = (ImageView) findViewById(R.id.tabline);
// 控件參數
LayoutParams lp = tabline.getLayoutParams();
lp.width = tabLineLength;
tabline.setLayoutParams(lp);
}
private void initView() {
// 實例化對象
viewPager = (ViewPager) findViewById(R.id.viewpager);
tv1 = (TextView) findViewById(R.id.tv1);
tv2 = (TextView) findViewById(R.id.tv2);
tv3 = (TextView) findViewById(R.id.tv3);
list = new ArrayList<Fragment>();
// 設置數據源
Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
Fragment3 fragment3 = new Fragment3();
list.add(fragment1);
list.add(fragment2);
list.add(fragment3);
// 設置適配器
FragmentPagerAdapter adapter = new FragmentPagerAdapter(
getSupportFragmentManager()) {
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
};
// 綁定適配器
viewPager.setAdapter(adapter);
// 設置滑動監聽
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// 當頁面被選擇時，先講3個textview的字體顏色初始化成黑
tv1.setTextColor(Color.BLACK);
tv2.setTextColor(Color.BLACK);
tv3.setTextColor(Color.BLACK);
// 再改變當前選擇頁（position）對應的textview顏色
switch (position) {
case 0:
tv1.setTextColor(Color.rgb(51, 153, 0));
break;
case 1:
tv2.setTextColor(Color.rgb(51, 153, 0));
break;
case 2:
tv3.setTextColor(Color.rgb(51, 153, 0));
break;
}
currentPage = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
Log.i("tuzi", arg0 + "," + arg1 + "," + arg2);
// 取得該控件的實例
LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tabline
.getLayoutParams();
if (currentPage == 0 && arg0 == 0) { // 0->1移動(第一頁到第二頁)
ll.leftMargin = (int) (currentPage * tabLineLength + arg1
* tabLineLength);
} else if (currentPage == 1 && arg0 == 1) { // 1->2移動（第二頁到第三頁）
ll.leftMargin = (int) (currentPage * tabLineLength + arg1
* tabLineLength);
} else if (currentPage == 1 && arg0 == 0) { // 1->0移動（第二頁到第一頁）
ll.leftMargin = (int) (currentPage * tabLineLength - ((1 - arg1) * tabLineLength));
} else if (currentPage == 2 && arg0 == 1) { // 2->1移動（第三頁到第二頁）
ll.leftMargin = (int) (currentPage * tabLineLength - (1 - arg1)
* tabLineLength);
}
tabline.setLayoutParams(ll);
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
}
對這個類做下說明：
1、這里的滑動屏幕下划線動態跟隨的效果，其實實現方法有2種，原理是一樣的
（1）可以使用ViewPager的兩個子類ViewFlipper和ViewSwitche，這種方法比較簡單，直接用就行。
（2）用原生代碼實現，也就是動態的去控制下划線的左外邊距。
這里我采用的是第2種方法，我覺得授人予魚還不如授人予漁，其實也並不復雜，細節去理下細節就懂了。
這里需要注意一個地方，我們在給ViewPager設置監聽器時，這邊會復寫一個onPageScrolled方法，里面有3個參數，我用Log打印出它們在頁面滑動時的數據變化
這是頁面一向頁面二滑動時候的數據記錄：
我們可以發現第一個參數值直接從0->1，第二個參數值從0.0依次增加到0.9xx無限靠近1，然后頁面到達第二頁它又恢復成了0，第三個參數從1開始累積到300+（這個我們不去關注）
這是頁面二向頁面三滑動時候的數據記錄：
我們可以發現第一個參數值直接從1->2，第二個參數值從0.0依次增加到0.9xx無限靠近1，然后頁面到達第二頁它又恢復成了0，第三個參數從1開始累積到300+（這個我們不去關注）
因此我們可以發現一個規律：
當ViewPager頁面值為0（第一頁）且當參數一為0時，頁面的狀態時從 第一頁到第二頁
當ViewPager頁面值為1（第二頁）且當參數一為1時，頁面的狀態時從 第一頁到第二頁
以此類推，大家可以自己打印出來看看，對這些數據比較有感覺，由於文章篇幅問題，這里就不再貼圖了。
我們可以利用第二個參數從0.0推薦遞增到1，這個數據來控制左外邊距（在第一頁時左外邊距為0，第二頁時左外邊距為1/3屏幕寬，第三頁時左外邊距為2/3屏幕寬）
由此推導出的公式為：
向左滑時：當前頁數*屏幕1/3寬+onPageScrolled方法第二個參數*屏幕1/3寬
向右滑時：當前頁數*屏幕1/3寬-（1-onPageScrolled方法第二個參數）*屏幕1/3寬
2、由於這里使用到了Fragment，這里就不再和以往一樣繼承Activity，這里需要繼承Activity的子類FragmentActivity。
package com.example.weixin_test;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
來講一下關於這個類的說明：
1、Fragment一般是作為Activity界面的一部分，它把Layout對象嵌入到了Activity之中，若要對一個Fragment提供Layout對象必須去調用一個onCreateView()方法，它的返回值是一個View對象，這個方法為我們提供了一個LayoutInflater便於我們把XML布局文件轉換成View對象。
2、onCreateView()方法中：
container參數是用來存放Fragment的layout。
saveInstanceState參數是一個Bundle，跟Activity的onCreate()中Bundle差不多，用於狀態恢復。
3、inflate()方法中有三個參數：
1：layout的資源id。
2：存放fragment的layout的ViewGroup。
3：這個布爾值是代表是否在創建Fragment的layout期間，把layout附加到container上，由於系統已經把layout對象存放在了ViewGroup中，所以這里為false。
由於3個Fragment的代碼幾乎一致，所以這里只給出Fragment1.java