通过Activity动态加载Fragment创建主界面构架

在做项目中，需要建立一个主界面框架，尝试过使用ViewPager ，后来又换成了使用Activity动态加载Fragment实现选项卡的效果。总结一下方便以后回顾。

先给出总体效果：

要实现上述效果，首先来大体上阐述步骤：

步骤一：

    创建一个界面框架布局文件activity_frame.xml ,一个垂直现行布局包含：从上到下第一个帧布局FrameLayout用于动态加载Fragment,命其id为content；第二个布局是一个相对布局，用于放置三个标签按钮，其中三个线性布局嵌套分别一个ImageView，为了能均分，权重都为1；图标自己制作。同时创建一个FrameActivity.java文件，来显示主界面框架。

activity_frame.xml 代码：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:andro
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#c0c0c0" >

        <RelativeLayout
            android:
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/img_main" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/img_shop" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:orientation="vertical" >

                <ImageView
                    android:
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/img_my" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

步骤二：

    分别创建三个布局文件：

其中布局内容根据自己想要的布局设置；

步骤三：
    然后再为这三个布局创建对应的Fragment：

其中每个Fragment加载布局的代码都是差不多，都是在onCreateView中获得一个View对象，其它代码根据业务需要而编写，如图：

步骤四：

    三个Fragment创建好了之后，此时需要在FrameActivity中，通过界面底边的三个标签注册单击事件监听器来动态地加载Fragment，

业务代码如下：

        @Override
	public void onClick(View arg0) {
		switch (arg0.getId()) {
		case R.id.main_layout:
			setTabSelection(0);
			break;
		case R.id.shop_layout:
			setTabSelection(1);
			break;
		case R.id.my_layout:
			setTabSelection(2);
			break;
		default:
			break;
		}


<pre name="code" class="java">private void setTabSelection(int i) {
		// TODO Auto-generated method stub
		clearSelection();
		FragmentTransaction transaction = fragmentManager.beginTransaction();
		hideFragments(transaction);
		switch (i) {
		case 0:
			mainImg.setImageResource(R.drawable.img_main_pressed);
			if (mainFragment == null) {
				mainFragment = new MainFragment();
				transaction.add(R.id.content, mainFragment);
			} else {
				transaction.show(mainFragment);
			}
			break;
		case 1:
			shopImg.setImageResource(R.drawable.img_shop_pressed);
			if (shopFragment == null) {
				shopFragment = new ShopFragment();
				transaction.add(R.id.content, shopFragment);
			} else {
				transaction.show(shopFragment);
			}
			break;
		case 2:
		default:
			myImg.setImageResource(R.drawable.img_my_pressed);
			if (myFragment == null) {
				myFragment = new MyFragment();
				transaction.add(R.id.content, myFragment);
			} else {
				transaction.show(myFragment);
			}
			break;
		}
		transaction.commit();

	}

<pre name="code" class="java"><span style="font-size:18px;"> setTabSelection中包含一个switch函数，根据判断id来动态加载fragment（动态加载fragent的步骤这里不给出，csdn有相应的文章）：
FrameActivity的完整代码如下：</span>

<pre name="code" class="java">package com.android.activity;

import com.android.client.R;
import com.android.fragment.MainFragment;
import com.android.fragment.MyFragment;
import com.android.fragment.ShopFragment;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;

public class FrameActivity extends Activity implements OnClickListener {
	private MainFragment mainFragment;
	private ShopFragment shopFragment;
	private MyFragment myFragment;
	private View mainLayout;
	private View shopLayout;
	private View myLayoutView;
	private ImageView mainImg;
	private ImageView shopImg;
	private ImageView myImg;
	/*
	 * private TextView mainTxt; private TextView shopTxt; private TextView
	 * myTxt;
	 */

	private FragmentManager fragmentManager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_frame);
		initViews();
		fragmentManager = getFragmentManager();
		setTabSelection(0);

	}

	private void setTabSelection(int i) {
		// TODO Auto-generated method stub
		clearSelection();
		FragmentTransaction transaction = fragmentManager.beginTransaction();
		hideFragments(transaction);
		switch (i) {
		case 0:
			mainImg.setImageResource(R.drawable.img_main_pressed);
			if (mainFragment == null) {
				mainFragment = new MainFragment();
				transaction.add(R.id.content, mainFragment);
			} else {
				transaction.show(mainFragment);
			}
			break;
		case 1:
			shopImg.setImageResource(R.drawable.img_shop_pressed);
			if (shopFragment == null) {
				shopFragment = new ShopFragment();
				transaction.add(R.id.content, shopFragment);
			} else {
				transaction.show(shopFragment);
			}
			break;
		case 2:
		default:
			myImg.setImageResource(R.drawable.img_my_pressed);
			if (myFragment == null) {
				myFragment = new MyFragment();
				transaction.add(R.id.content, myFragment);
			} else {
				transaction.show(myFragment);
			}
			break;
		}
		transaction.commit();

	}

	private void hideFragments(FragmentTransaction transaction) {
		// TODO Auto-generated method stub
		if (mainFragment != null) {
			transaction.hide(mainFragment);
		}
		if (shopFragment != null) {
			transaction.hide(shopFragment);
		}
		if (myFragment != null) {
			transaction.hide(myFragment);
		}
	}

	private void clearSelection() {
		// TODO Auto-generated method stub
		mainImg.setImageResource(R.drawable.img_main);
		// mainTxt.setTextColor(Color.parseColor("#82858b"));
		shopImg.setImageResource(R.drawable.img_shop);
		// shopTxt.setTextColor(Color.parseColor("#82858b"));
		myImg.setImageResource(R.drawable.img_my);
		// myTxt.setTextColor(Color.parseColor("#82858b"));

	}

	private void initViews() {
		// TODO Auto-generated method stub
		mainLayout = findViewById(R.id.main_layout);
		shopLayout = findViewById(R.id.shop_layout);
		myLayoutView = findViewById(R.id.my_layout);
		mainImg = (ImageView) findViewById(R.id.main_image);
		shopImg = (ImageView) findViewById(R.id.shop_image);
		myImg = (ImageView) findViewById(R.id.my_image);
		/*
		 * mainTxt = (TextView) findViewById(R.id.main_text); shopTxt =
		 * (TextView) findViewById(R.id.shop_text); myTxt = (TextView)
		 * findViewById(R.id.my_text);
		 */

		mainLayout.setOnClickListener(this);
		shopLayout.setOnClickListener(this);
		myLayoutView.setOnClickListener(this);

	}

	@Override
	public void onClick(View arg0) {
		switch (arg0.getId()) {
		case R.id.main_layout:
			setTabSelection(0);
			break;
		case R.id.shop_layout:
			setTabSelection(1);
			break;
		case R.id.my_layout:
			setTabSelection(2);
			break;
		default:
			break;
		}
		// TODO Auto-generated method stub

	}
        //框架中的退出提示代码，常规代码重用率很高可以抽象出来
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub
		if (keyCode == KeyEvent.KEYCODE_BACK) {
			if (keyCode == KeyEvent.KEYCODE_BACK) {
				Builder builder = new Builder(FrameActivity.this);
				builder.setTitle("提示");
				builder.setMessage("你确定要退出吗？");
				builder.setIcon(R.drawable.ic_launcher);

				DialogInterface.OnClickListener dialog = new DialogInterface.OnClickListener() {

					@Override
					public void onClick(DialogInterface arg0, int arg1) {
						// TODO Auto-generated method stub
						if (arg1 == DialogInterface.BUTTON_POSITIVE) {
							arg0.cancel();
						} else if (arg1 == DialogInterface.BUTTON_NEGATIVE) {
							FrameActivity.this.finish();
						}
					}
				};
				builder.setPositiveButton("取消", dialog);
				builder.setNegativeButton("确定", dialog);
				AlertDialog alertDialog = builder.create();
				alertDialog.show();

			}
		}
		return false;
	}
	

}

到此，界面框架已经建好，接下来就根据自己的业务需要些代码了。