Android使用Fragment實現兼容手機和平板的程序

Posted on by

一

記得我之前參與開發過一個華為的項目，要求程序可以支持好幾種終端設備，其中就包括 Android 手機和 Android Pad。然後為瞭節省人力，公司無節操地讓 Android 手機和 Android Pad 都由我們團隊開發。當時項目組定的方案是，制作兩個版本的 App，一個手機版，一個 Pad 版。由於當時手機版的主體功能已經做的差不多瞭，所以 Pad 版基本上就是把手機版的代碼完全拷過來，然後再根據平板的特性部分稍作修改就好瞭。

但是，從此以後我們就非常苦逼瞭。每次要添加什麼新功能，同樣的代碼要寫兩遍。每次要修復任何 bug，都要在手機版代碼和 Pad 版代碼裡各修改一遍。這還不算什麼，每到出版本的時候就更離譜瞭。華為要求每次需要出兩個版本，一個華為內網環境的版本，一個客戶現場的版本，而現在又分瞭手機和 Pad，也就是每次需要出四個版本。如果在出完版本後自測還出現瞭問題，就可以直接通宵瞭。這尤其是苦瞭我們的 X 總 (由於他 dota 打的比較好，我都喜歡叫他 X 神)。他在我們項目組中單獨維護一個模塊，並且每次打版本都是由他負責，加班的時候我們都能跑，就是他跑不瞭。這裡也是贊揚一下我們 X 神的敬業精神，如果他看得到的話。

經歷過那麼苦逼時期的我也就開始思考，可不可以制作同時兼容手機和平板的 App 呢？答案當然是肯定的，不過我這個人比較懶，一直也提不起精神去鉆研這個問題。直到我一個在美國留學的朋友 Gong 讓我幫她解決她的研究生導師佈置的作業 (我知道你研究生導師看不懂中文 ^-^)，正好涉及到瞭這一塊，也就借此機會研究瞭一下，現在拿出來跟大傢分享。

二

我們先來看一下 Android 手機的設置界面，點擊一下 Sound，可以跳轉到聲音設置界面，如下面兩張圖所示：

然後再來看一下 Android Pad 的設置界面，主設置頁面和聲音設置頁面都是在一個界面顯示的，如下圖所示：

如果這分別是兩個不同的 App 做出的效果，那沒有絲毫驚奇之處。但如果是同一個 App，在手機上和平板上運行分別有以上兩種效果的話，你是不是就已經心動瞭？我們現在就來模擬實現一下。

首先你需要對 Fragment 有一定的瞭解，如果你還沒接觸過 Fragment，建議可以先閱讀 Android Fragment 完全解析，關於碎片你所需知道的一切 這篇文章。並且本次的代碼是運行在 Android 4.0 版本上的，如果你的 SDK 版本還比較低的話，建議可以先升升級瞭。

新建一個 Android 項目，取名叫 FragmentDemo。打開或新建 MainActivity 作為程序的主 Activity，裡面有如下自動生成的內容：

public class MainActivity extends Activity {
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
 
}

作為一個 Android 老手，上面的代碼實在太小兒科瞭，每個 Activity 中都會有這樣的代碼。不過今天我們的程序可不會這麼簡單，加載佈局這一塊還是大有文章的。

打開或新建 res/layout/activity_main.xml 作為程序的主佈局文件，裡面代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity" >
 
    <fragment
        android:id="@+id/menu_fragment"
        android:name="com.example.fragmentdemo.MenuFragment"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
 
</LinearLayout>

這個佈局引用瞭一個 MenuFragment，我們稍後來進行實現，先來看一下今天的一個重點，我們需要再新建一個 activity_main.xml，這個佈局文件名和前面的主佈局文件名是一樣的，但是要放在不同的目錄下面。

在 res 目錄下新建 layout-large 目錄，然後這個目錄下創建新的 activity_main.xml，加入如下代碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:baselineAligned="false"
    tools:context=".MainActivity"
    >
 
    <fragment
        android:id="@+id/left_fragment"
        android:name="com.example.fragmentdemo.MenuFragment"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        />
    
    <FrameLayout 
        android:id="@+id/details_layout"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="3"
        ></FrameLayout>
 
</LinearLayout>

這個佈局同樣也引用瞭 MenuFragment，另外還加入瞭一個 FrameLayout 用於顯示詳細內容。其實也就是分別對應瞭平板界面上的左側佈局和右側佈局。

這裡用到瞭動態加載佈局的技巧，首先 Activity 中調用 setContentView(R.layout.activity_main) ，表明當前的 Activity 想加載 activity_main 這個佈局文件。而 Android 系統又會根據當前的運行環境判斷程序是否運行在大屏幕設備上，如果運行在大屏幕設備上，就加載 layout-large 目錄下的 activity_main.xml，否則就默認加載 layout 目錄下的 activity_main.xml。

關於動態加載佈局的更多內容，可以閱讀 Android 官方提供的支持不同屏幕大小的全部方法 這篇文章。

三

下面我們來實現久違的 MenuFragment，新建一個 MenuFragment 類繼承自 Fragment，具體代碼如下：

public class MenuFragment extends Fragment implements OnItemClickListener {
 
	/**
	 * 菜單界面中隻包含瞭一個ListView。
	 */
	private ListView menuList;
 
	/**
	 * ListView的適配器。
	 */
	private ArrayAdapter<String> adapter;
 
	/**
	 * 用於填充ListView的數據，這裡就簡單隻用瞭兩條數據。
	 */
	private String[] menuItems = { "Sound", "Display" };
 
	/**
	 * 是否是雙頁模式。如果一個Activity中包含瞭兩個Fragment，就是雙頁模式。
	 */
	private boolean isTwoPane;
 
	/**
	 * 當Activity和Fragment建立關聯時，初始化適配器中的數據。
	 */
	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		adapter = new ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, menuItems);
	}
 
	/**
	 * 加載menu_fragment佈局文件，為ListView綁定瞭適配器，並設置瞭監聽事件。
	 */
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.menu_fragment, container, false);
		menuList = (ListView) view.findViewById(R.id.menu_list);
		menuList.setAdapter(adapter);
		menuList.setOnItemClickListener(this);
		return view;
	}
 
	/**
	 * 當Activity創建完畢後，嘗試獲取一下佈局文件中是否有details_layout這個元素，如果有說明當前
	 * 是雙頁模式，如果沒有說明當前是單頁模式。
	 */
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		if (getActivity().findViewById(R.id.details_layout) != null) {
			isTwoPane = true;
		} else {
			isTwoPane = false;
		}
	}
 
	/**
	 * 處理ListView的點擊事件，會根據當前是否是雙頁模式進行判斷。如果是雙頁模式，則會動態添加Fragment。
	 * 如果不是雙頁模式，則會打開新的Activity。
	 */
	@Override
	public void onItemClick(AdapterView<?> arg0, View view, int index, long arg3) {
		if (isTwoPane) {
			Fragment fragment = null;
			if (index == 0) {
				fragment = new SoundFragment();
			} else if (index == 1) {
				fragment = new DisplayFragment();
			}
			getFragmentManager().beginTransaction().replace(R.id.details_layout, fragment).commit();
		} else {
			Intent intent = null;
			if (index == 0) {
				intent = new Intent(getActivity(), SoundActivity.class);
			} else if (index == 1) {
				intent = new Intent(getActivity(), DisplayActivity.class);
			}
			startActivity(intent);
		}
	}
 
}

這個類的代碼並不長，我簡單的說明一下。在 onCreateView 方法中加載瞭 menu_fragment 這個佈局，這個佈局裡面包含瞭一個 ListView，然後我們對這個 ListView 填充瞭兩個簡單的數據 “Sound” 和 “Display” 。又在 onActivityCreated 方法中做瞭一個判斷，如果 Activity 的佈局中包含瞭 details_layout 這個元素，那麼當前就是雙頁模式，否則就是單頁模式。onItemClick 方法則處理瞭 ListView 的點擊事件，發現如果當前是雙頁模式，就動態往 details_layout 中添加 Fragment，如果當前是單頁模式，就直接打開新的 Activity。

我們把 MenuFragment 中引用到的其它內容一個個添加進來。新建 menu_fragment.xml 文件，加入如下代碼：

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

android:id="@+id/menu_list"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

然後新建 SoundFragment，裡面內容非常簡單：

public class SoundFragment extends Fragment {

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

		View view = inflater.inflate(R.layout.sound_fragment, container, false);

這裡 SoundFragment 需要用到 sound_fragment.xml 佈局文件，因此這裡我們新建這個佈局文件，並加入如下代碼：

<?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"
    android:background="#00ff00"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="28sp"
        android:textColor="#000000"
        android:text="This is sound view"
        />
 
</RelativeLayout>

同樣的道理，我們再新建 DisplayFragment 和 display_fragment.xml 佈局文件：

public class DisplayFragment extends Fragment {
 
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.display_fragment, container, false);
		return view;
	}
}

<?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"
    android:background="#0000ff"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="28sp"
        android:textColor="#000000"
        android:text="This is display view"
        />
 
</RelativeLayout>

然後新建 SoundActivity，代碼如下：

public class SoundActivity extends Activity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.sound_activity);
	}
 
}

這個 Activity 隻是加載瞭一個佈局文件，現在我們來實現 sound_activity.xml 這個佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sound_fragment"
    android:name="com.example.fragmentdemo.SoundFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
</fragment>

這個佈局文件引用瞭 SoundFragment，這樣寫的好處就是，以後我們隻需要在 SoundFragment 中修改代碼，SoundActivity 就會跟著自動改變瞭，因為它所有的代碼都是從 SoundFragment 中引用過來的。

好，同樣的方法，我們再完成 DisplayActivity：

public class DisplayActivity extends Activity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.display_activity);
	}
 
}

然後加入 display_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/display_fragment"
    android:name="com.example.fragmentdemo.DisplayFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
</fragment>

四

現在所有的代碼就都已經完成瞭，我們來看一下效果吧。

首先將程序運行在手機上，效果圖如下：

分別點擊 Sound 和 Display，界面會跳轉到聲音和顯示界面：

然後將程序在平板上運行，點擊 Sound，效果圖如下：

然後點擊 Display 切換到顯示界面，效果圖如下：

這樣我們就成功地讓程序同時兼容手機和平板瞭。當然，這隻是一個簡單的 demo，更多復雜的內容需要大傢自己去實現瞭。

源碼下載，請點擊這裡

以上就是Android使用Fragment實現兼容手機和平板的程序的詳細內容，更多關於Android 實現兼容手機和平板的程序的資料請關註WalkonNet其它相關文章！

推薦閱讀：

    None Found