Fragment的应用，之前两个demo的地址

参考文章
 Fragment详解: 
 http://blog.csdn.net/t12x3456/article/details/8101030


Fragment是activity的界面中的一部分或一种行为。
你可以把多个Fragment们组合到一个activity中来创建一个多面界面，并且你可以在多个activity中重用一个Fragment。
你可以把Fragment认为模块化的一段activity。
来个最直观的图！


底下的导航栏就是用fragment实现的。
注意：在Android3.0版本下使用fragment时，要添加兼容性jar包！
这在这里只做一个简单的应用。
1.建立一个空白活动，界面如下：



空白处是一个FrameLayout：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <FrameLayout        android:id="@+id/id_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </FrameLayout>   <include layout="@layout/bottom_bar"/></LinearLayout>

底部导航栏：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/ly_main_tab_bottom"    android:layout_width="fill_parent"    android:layout_height="55dp"    android:layout_alignParentBottom="true"     >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="55dp" >        <LinearLayout            android:id="@+id/id_tab_bottom_weixin"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:descendantFocusability="beforeDescendants"            android:gravity="center"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="首页" />        </LinearLayout>        <LinearLayout            android:id="@+id/id_tab_bottom_friend"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:descendantFocusability="beforeDescendants"            android:gravity="center"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="百度地图" />        </LinearLayout>        <LinearLayout            android:id="@+id/id_tab_bottom_contact"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:descendantFocusability="beforeDescendants"            android:gravity="center"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="优惠券" />        </LinearLayout>        <LinearLayout            android:id="@+id/id_tab_bottom_setting"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:descendantFocusability="beforeDescendants"            android:gravity="center"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="高德地图" />        </LinearLayout>    </LinearLayout></RelativeLayout>

新建maintab01：

public class MainTab01 extends Fragment{private WebView mWebView;private Handler mHandler = new Handler();@Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){View view=inflater.inflate(com.example.activity.R.layout.main_tab_01, container, false);        mWebView = (WebView) view.findViewById(R.id.webView);        WebSettings webSettings = mWebView.getSettings();        webSettings.setJavaScriptEnabled(true);        mWebView.setWebChromeClient(new MyWebChromeClient());        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");        mWebView.loadUrl("file:///android_asset/demo.html");return view;}}

无关代码就不放了，具体可以参考上一篇文章。


3.在Activity中管理fragment：

public class FragmentMainActivity extends Activity implements OnClickListener,OnTranDataListener{private MainTab01 mTab01;private MainTab02 mTab02;private MainTab03 mTab03;private MainTab04 mTab04;/** * 底部四个按钮 */private LinearLayout mTabBtnWeixin;private LinearLayout mTabBtnFrd;private LinearLayout mTabBtnAddress;private LinearLayout mTabBtnSettings;/** * 用于对Fragment进行管理 */private FragmentManager fragmentManager;@SuppressLint("NewApi")@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.fragment_main);initViews();fragmentManager = getFragmentManager();setTabSelection(0);}private void initViews(){mTabBtnWeixin = (LinearLayout) findViewById(R.id.id_tab_bottom_weixin);mTabBtnFrd = (LinearLayout) findViewById(R.id.id_tab_bottom_friend);mTabBtnAddress = (LinearLayout) findViewById(R.id.id_tab_bottom_contact);mTabBtnSettings = (LinearLayout) findViewById(R.id.id_tab_bottom_setting);mTabBtnWeixin.setOnClickListener(this);mTabBtnFrd.setOnClickListener(this);mTabBtnAddress.setOnClickListener(this);mTabBtnSettings.setOnClickListener(this);}@Overridepublic void onClick(View v){switch (v.getId()){case R.id.id_tab_bottom_weixin:setTabSelection(0);break;case R.id.id_tab_bottom_friend:setTabSelection(1);break;case R.id.id_tab_bottom_contact:setTabSelection(2);break;case R.id.id_tab_bottom_setting:setTabSelection(3);break;case R.id.huodong:setTabSelection(2);break;case R.id.quan:Intent intent=new Intent(FragmentMainActivity.this, MyPreferential.class);startActivity(intent);break;default:break;}}/** * 根据传入的index参数来设置选中的tab页。 *  */@SuppressLint("NewApi")public void setTabSelection(int index){// 开启一个Fragment事务FragmentTransaction transaction = fragmentManager.beginTransaction();// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况hideFragments(transaction);switch (index){case 0:if (mTab01 == null){// 如果MessageFragment为空，则创建一个并添加到界面上mTab01 = new MainTab01();transaction.add(R.id.id_content, mTab01);} else{// 如果MessageFragment不为空，则直接将它显示出来transaction.show(mTab01);}break;case 1:if (mTab02 == null){mTab02 = new MainTab02();transaction.add(R.id.id_content, mTab02);} else{transaction.show(mTab02);}break;case 2:if (mTab03 == null){mTab03 = new MainTab03();transaction.add(R.id.id_content, mTab03);} else{transaction.show(mTab03);}break;case 3:if (mTab04 == null){mTab04 = new MainTab04();transaction.add(R.id.id_content, mTab04);} else{transaction.show(mTab04);}break;}transaction.commit();}/** * 将所有的Fragment都置为隐藏状态。 *  * @param transaction *            用于对Fragment执行操作的事务 */@SuppressLint("NewApi")private void hideFragments(FragmentTransaction transaction){if (mTab01 != null){transaction.hide(mTab01);}if (mTab02 != null){transaction.hide(mTab02);}if (mTab03 != null){transaction.hide(mTab03);}if (mTab04 != null){transaction.hide(mTab04);}}}

至此，这个最简单的fragment例子就完成了。
这里只能通过点击导航栏来切换tab，而像微信那样滑动切换的做法，以后写吧。

整个项目的代码可以在这里看到:

https://code.csdn.net/u012591761/mapandjs/tree/master

里面包含了之前的地图还有js通信的demo。