通过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:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
android:id="@+id/content"
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:id="@+id/main_layout"
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:id="@+id/main_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/img_main" />
</LinearLayout>
</RelativeLayout>

<RelativeLayout
android:id="@+id/shop_layout"
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:id="@+id/shop_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/img_shop" />
</LinearLayout>
</RelativeLayout>

<RelativeLayout
android:id="@+id/my_layout"
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:id="@+id/my_image"
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;
}

}

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

版权声明：本文为博主原创文章，未经博主允许不得转载。