使用Activity动态加载Fragment实现主界面框架

迈不过友情╰ 2022-06-15 06:44 593阅读 0赞

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

先给出总体效果：

![Image 1][]

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

**步骤一：**

创建一个界面框架布局文件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/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，

业务代码如下：

setTabSelection中包含一个switch函数，根据判断id来动态加载fragment（动态加载fragent的步骤这里不给出，csdn有相应的文章）：

FrameActivity的完整代码如下：

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 FragmentManager fragmentManager;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_frame);
            initViews();
            fragmentManager = getFragmentManager();
            setTabSelection(0);
    
        }
    
        private void setTabSelection(int i) {
            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) {
            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);
            shopImg.setImageResource(R.drawable.img_shop);
            myImg.setImageResource(R.drawable.img_my);
    
        }
    
        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);
    
            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;
        }
    }

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

犯了错，总之要改，改之后呢，最好还是记录。因为这些难题在后来的日子还是会遇到。不妨到时候回过头看看自己当时记录的错误。毕竟是自己的错，资以改正。

纸上得来终觉浅，书到用时方恨少。希望对你有所帮助。

[Image 1]: