Android程序手機(jī)平板兩不誤:Fragment輕松實(shí)現(xiàn)
記得我之前參與開發(fā)過一個(gè)華為的項(xiàng)目,要求程序可以支持好幾種終端設(shè)備,其中就包括 Android手機(jī)和Android Pad。然后為了節(jié)省人力,公司無節(jié)操地讓Android手機(jī)和Android Pad都由我們團(tuán)隊(duì)開發(fā)。當(dāng)時(shí)項(xiàng)目 組定的方案是,制作兩個(gè)版本的App,一個(gè)手機(jī)版,一個(gè)Pad版。由于當(dāng)時(shí)手機(jī)版的主體功能已經(jīng)做的差不多了,所以Pad版基本上就是把手機(jī)版的代碼完全 拷過來,然后再根據(jù)平板的特性部分稍作修改就好了。
但是,從此以后我們就非???逼了。每次要添加什么新功能,同樣的代碼要寫兩遍。每次要修復(fù)任何bug,都要在手機(jī)版代碼和Pad版代碼里各修改一遍。這還不算什么,每到出版本的時(shí)候 就更離譜了。華為要求每次需要出兩個(gè)版本,一個(gè)華為內(nèi)網(wǎng)環(huán)境的版本,一個(gè)客戶現(xiàn)場(chǎng)的版本,而現(xiàn)在又分了手機(jī)和Pad,也就是每次需要出四個(gè)版本。如果在出 完版本后自測(cè)還出現(xiàn)了問題,就可以直接通宵了。這尤其是苦了我們的X總(由于他dota打的比較好,我都喜歡叫他X神)。他在我們項(xiàng)目組中單獨(dú)維護(hù)一個(gè)模 塊,并且每次打版本都是由他負(fù)責(zé),加班的時(shí)候我們都能跑,就是他跑不了。這里也是贊揚(yáng)一下我們X神的敬業(yè)精神,如果他看得到的話。
經(jīng)歷過那么苦逼時(shí)期的我也就開始思考,可不可以制作同時(shí)兼容手機(jī)和平板的App呢?答案當(dāng)然是肯定的,不過我這個(gè)人比較懶,一直也提不起精神去鉆研這個(gè)問題。直到我一個(gè)在美國留學(xué)的朋友Gong讓我?guī)退鉀Q她的研究生導(dǎo)師布置的作業(yè)(我知道你研究生導(dǎo)師看不懂中文 ^-^),正好涉及到了這一塊,也就借此機(jī)會(huì)研究了一下,現(xiàn)在拿出來跟大家分享。
我們先來看一下Android手機(jī)的設(shè)置界面,點(diǎn)擊一下Sound,可以跳轉(zhuǎn)到聲音設(shè)置界面,如下面兩張圖所示:
然后再來看一下Android Pad的設(shè)置界面,主設(shè)置頁面和聲音設(shè)置頁面都是在一個(gè)界面顯示的,如下圖所示:
如果這分別是兩個(gè)不同的App做出的效果,那沒有絲毫驚奇之處。但如果是同一個(gè)App,在手機(jī)上和平板上運(yùn)行分別有以上兩種效果的話,你是不是就已經(jīng)心動(dòng)了?我們現(xiàn)在就來模擬實(shí)現(xiàn)一下。
首先你需要對(duì)Fragment有一定的了解,如果你還沒接觸過Fragment,建議可以先閱讀 Android Fragment完全解析,關(guān)于碎片你所需知道的一切 這篇文章。并且本次的代碼是運(yùn)行在Android 4.0版本上的,如果你的SDK版本還比較低的話,建議可以先升升級(jí)了。
新建一個(gè)Android項(xiàng)目,取名叫FragmentDemo。打開或新建MainActivity作為程序的主Activity,里面有如下自動(dòng)生成的內(nèi)容:
- publicclass MainActivity extends Activity {
- @Override
- publicvoid onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- }
- }
- public class MainActivity extends Activity {
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- }
- }
作為一個(gè)Android老手,上面的代碼實(shí)在太小兒科了,每個(gè)Activity中都會(huì)有這樣的代碼。不過今天我們的程序可不會(huì)這么簡單,加載布局這一塊還是大有文章的。
打開或新建res/layout/activity_main.xml作為程序的主布局文件,里面代碼如下:
- <LinearLayoutxmlns: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>
- <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>
這個(gè)布局引用了一個(gè)MenuFragment,我們稍后來進(jìn)行實(shí)現(xiàn),先來看一下今天的一個(gè)重點(diǎn),我們需要再新建一個(gè)activity_main.xml,這個(gè)布局文件名和前面的主布局文件名是一樣的,但是要放在不同的目錄下面。
別走開,下頁為您繼續(xù)介紹Fragment實(shí)現(xiàn)Android程序手機(jī)平板兼容
#p#
在res目錄下新建layout-large目錄,然后這個(gè)目錄下創(chuàng)建新的activity_main.xml,加入如下代碼:
- <LinearLayoutxmlns: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>
- <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>
這個(gè)布局同樣也引用了MenuFragment,另外還加入了一個(gè)FrameLayout用于顯示詳細(xì)內(nèi)容。其實(shí)也就是分別對(duì)應(yīng)了平板界面上的左側(cè)布局和右側(cè)布局。
這里用到了動(dòng)態(tài)加載布局的技巧,首先Activity中調(diào)用 setContentView(R.layout.activity_main) ,表明當(dāng)前 的Activity想加載activity_main這個(gè)布局文件。而Android系統(tǒng)又會(huì)根據(jù)當(dāng)前的運(yùn)行環(huán)境判斷程序是否運(yùn)行在大屏幕設(shè)備上,如果運(yùn) 行在大屏幕設(shè)備上,就加載layout-large目錄下的activity_main.xml,否則就默認(rèn)加載layout目錄下的 activity_main.xml。
關(guān)于動(dòng)態(tài)加載布局的更多內(nèi)容,可以閱讀 Android官方提供的支持不同屏幕大小的全部方法 這篇文章。
下面我們來實(shí)現(xiàn)久違的MenuFragment,新建一個(gè)MenuFragment類繼承自Fragment,具體代碼如下:
- publicclass MenuFragment extends Fragment implements OnItemClickListener {
- /**
- * 菜單界面中只包含了一個(gè)ListView。
- */
- private ListView menuList;
- /**
- * ListView的適配器。
- */
- private ArrayAdapter<String> adapter;
- /**
- * 用于填充ListView的數(shù)據(jù),這里就簡單只用了兩條數(shù)據(jù)。
- */
- private String[] menuItems = { "Sound", "Display" };
- /**
- * 是否是雙頁模式。如果一個(gè)Activity中包含了兩個(gè)Fragment,就是雙頁模式。
- */
- privateboolean isTwoPane;
- /**
- * 當(dāng)Activity和Fragment建立關(guān)聯(lián)時(shí),初始化適配器中的數(shù)據(jù)。
- */
- @Override
- publicvoid onAttach(Activity activity) {
- super.onAttach(activity);
- adapter = new ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, menuItems);
- }
- /**
- * 加載menu_fragment布局文件,為ListView綁定了適配器,并設(shè)置了監(jiān)聽事件。
- */
- @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;
- }
- /**
- * 當(dāng)Activity創(chuàng)建完畢后,嘗試獲取一下布局文件中是否有details_layout這個(gè)元素,如果有說明當(dāng)前
- * 是雙頁模式,如果沒有說明當(dāng)前是單頁模式。
- */
- @Override
- publicvoid onActivityCreated(Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- if (getActivity().findViewById(R.id.details_layout) != null) {
- isTwoPane = true;
- } else {
- isTwoPane = false;
- }
- }
- /**
- * 處理ListView的點(diǎn)擊事件,會(huì)根據(jù)當(dāng)前是否是雙頁模式進(jìn)行判斷。如果是雙頁模式,則會(huì)動(dòng)態(tài)添加Fragment。
- * 如果不是雙頁模式,則會(huì)打開新的Activity。
- */
- @Override
- publicvoid onItemClick(AdapterView<?> arg0, View view, int index, long arg3) {
- if (isTwoPane) {
- Fragment fragment = null;
- if (index == 0) {
- fragment = new SoundFragment();
- } elseif (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);
- } elseif (index == 1) {
- intent = new Intent(getActivity(), DisplayActivity.class);
- }
- startActivity(intent);
- }
- }
- }
- public class MenuFragment extends Fragment implements OnItemClickListener {
- /**
- * 菜單界面中只包含了一個(gè)ListView。
- */
- private ListView menuList;
- /**
- * ListView的適配器。
- */
- private ArrayAdapter<String> adapter;
- /**
- * 用于填充ListView的數(shù)據(jù),這里就簡單只用了兩條數(shù)據(jù)。
- */
- private String[] menuItems = { "Sound", "Display" };
- /**
- * 是否是雙頁模式。如果一個(gè)Activity中包含了兩個(gè)Fragment,就是雙頁模式。
- */
- private boolean isTwoPane;
- /**
- * 當(dāng)Activity和Fragment建立關(guān)聯(lián)時(shí),初始化適配器中的數(shù)據(jù)。
- */
- @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綁定了適配器,并設(shè)置了監(jiān)聽事件。
- */
- @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;
- }
- /**
- * 當(dāng)Activity創(chuàng)建完畢后,嘗試獲取一下布局文件中是否有details_layout這個(gè)元素,如果有說明當(dāng)前
- * 是雙頁模式,如果沒有說明當(dāng)前是單頁模式。
- */
- @Override
- public void onActivityCreated(Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- if (getActivity().findViewById(R.id.details_layout) != null) {
- isTwoPane = true;
- } else {
- isTwoPane = false;
- }
- }
- /**
- * 處理ListView的點(diǎn)擊事件,會(huì)根據(jù)當(dāng)前是否是雙頁模式進(jìn)行判斷。如果是雙頁模式,則會(huì)動(dòng)態(tài)添加Fragment。
- * 如果不是雙頁模式,則會(huì)打開新的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);
- }
- }
- }
這個(gè)類的代碼并不長,我簡單的說明一下。在onCreateView方法中加載了menu_fragment這個(gè)布局,這個(gè)布局里面包含 了一個(gè)ListView,然后我們對(duì)這個(gè)ListView填充了兩個(gè)簡單的數(shù)據(jù) "Sound" 和 "Display" 。又在 onActivityCreated方法中做了一個(gè)判斷,如果Activity的布局中包含了details_layout這個(gè)元素,那么當(dāng)前就是雙頁模 式,否則就是單頁模式。onItemClick方法則處理了ListView的點(diǎn)擊事件,發(fā)現(xiàn)如果當(dāng)前是雙頁模式,就動(dòng)態(tài)往details_layout 中添加Fragment,如果當(dāng)前是單頁模式,就直接打開新的Activity。
別走開,下頁為您繼續(xù)介紹Fragment實(shí)現(xiàn)Android程序手機(jī)平板兼容
#p#
我們把MenuFragment中引用到的其它內(nèi)容一個(gè)個(gè)添加進(jìn)來。新建menu_fragment.xml文件,加入如下代碼:
- <?xmlversion="1.0"encoding="UTF-8"?>
- <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <ListView
- android:id="@+id/menu_list"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- ></ListView>
- </LinearLayout>
- <?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" >
- <ListView
- android:id="@+id/menu_list"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- ></ListView>
- </LinearLayout>
然后新建SoundFragment,里面內(nèi)容非常簡單:
- publicclass SoundFragment extends Fragment {
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.sound_fragment, container, false);
- return view;
- }
- }
- public class SoundFragment extends Fragment {
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.sound_fragment, container, false);
- return view;
- }
- }
這里SoundFragment需要用到sound_fragment.xml布局文件,因此這里我們新建這個(gè)布局文件,并加入如下代碼:
- <?xmlversionxmlversion="1.0"encoding="utf-8"?>
- ativeLayoutxmlns:androidRelativeLayoutxmlns: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>
- <?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>
同樣的道理,我們?cè)傩陆―isplayFragment和display_fragment.xml布局文件:
- publicclass DisplayFragment extends Fragment {
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.display_fragment, container, false);
- return view;
- }
- }
- <?xmlversion="1.0"encoding="utf-8"?>
- <RelativeLayoutxmlns: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>
- <?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,代碼如下:
- publicclass SoundActivity extends Activity {
- @Override
- protectedvoid onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.sound_activity);
- }
- }
- public class SoundActivity extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.sound_activity);
- }
- }
這個(gè)Activity只是加載了一個(gè)布局文件,現(xiàn)在我們來實(shí)現(xiàn)sound_activity.xml這個(gè)布局文件:
- <?xmlversion="1.0"encoding="utf-8"?>
- <fragmentxmlns: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>
- <?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>
這個(gè)布局文件引用了SoundFragment,這樣寫的好處就是,以后我們只需要在SoundFragment中修改代碼,SoundActivity就會(huì)跟著自動(dòng)改變了,因?yàn)樗械拇a都是從SoundFragment中引用過來的。
好,同樣的方法,我們?cè)偻瓿蒁isplayActivity:
- publicclass DisplayActivity extends Activity {
- @Override
- protectedvoid onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.display_activity);
- }
- }
- public class DisplayActivity extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.display_activity);
- }
- }
別走開,下頁為您繼續(xù)介紹Fragment實(shí)現(xiàn)Android程序手機(jī)平板兼容
#p#
然后加入display_activity.xml:
- <?xmlversion="1.0"encoding="utf-8"?>
- <fragmentxmlns: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>
- <?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>
現(xiàn)在所有的代碼就都已經(jīng)完成了,我們來看一下效果吧。
首先將程序運(yùn)行在手機(jī)上,效果圖如下:
分別點(diǎn)擊Sound和Display,界面會(huì)跳轉(zhuǎn)到聲音和顯示界面:
然后將程序在平板上運(yùn)行,點(diǎn)擊Sound,效果圖如下:
然后點(diǎn)擊Display切換到顯示界面,效果圖如下:
這樣我們就成功地讓程序同時(shí)兼容手機(jī)和平板了。當(dāng)然,這只是一個(gè)簡單的demo,更多復(fù)雜的內(nèi)容需要大家自己去實(shí)現(xiàn)了。
好了,今天的講解到此結(jié)束。