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

2023-01-02 10:05:11

在做项目中，需要建立一个主界面框架，尝试过使用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;

	}

}

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

码农公寓

相关文章