使用Fragment实现动态布局

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、QQ技术交流群(183198395)。

接着Fragment的简单使用一文继续探讨Fragment的使用，本文主要介绍使用Fragment实现动态UI布局，包括动态添加、替换、移除某个Fragment，至于Fragment之间的交互，后面在讨论。

MainActivity：

package com.home.testfragment;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends FragmentActivity implements OnClickListener {
	private Button addFirstFragmentBtn;
	private Button replaceFirstFragmentBtn;
	private Button removeFirstFragmentBtn;
	private FirstFragment firstFragment;

	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.main);
		addFirstFragmentBtn = (Button) findViewById(R.id.main_btn_add);
		replaceFirstFragmentBtn = (Button) findViewById(R.id.main_btn_replace);
		removeFirstFragmentBtn = (Button) findViewById(R.id.main_btn_remove);
		addFirstFragmentBtn.setOnClickListener(this);
		replaceFirstFragmentBtn.setOnClickListener(this);
		removeFirstFragmentBtn.setOnClickListener(this);
		addFirstFragmentBtn.setEnabled(true);
		removeFirstFragmentBtn.setEnabled(false);
	}

	@Override
	public void onClick(View v) {
		if (v == addFirstFragmentBtn) {
			addFirstFragmentBtn.setEnabled(false);
			removeFirstFragmentBtn.setEnabled(true);
			if (findViewById(R.id.main_container) != null) {
				firstFragment = new FirstFragment();
				FragmentTransaction transaction = getSupportFragmentManager()
						.beginTransaction();
				transaction.add(R.id.main_container, firstFragment);
				// 把当前Fragment添加至回退栈，通过返回键返回时可以导航到上一个Fragment状态
				transaction.addToBackStack(null);
				// 提交
				transaction.commit();
			}
		}
		if (v == replaceFirstFragmentBtn) {
			addFirstFragmentBtn.setEnabled(true);
			removeFirstFragmentBtn.setEnabled(false);
			SecondFragment secondFragment = new SecondFragment();
			FragmentTransaction transaction = getSupportFragmentManager()
					.beginTransaction();
			transaction.replace(R.id.main_container, secondFragment);
			transaction.addToBackStack(null);
			transaction.commit();
		}
		if (v == removeFirstFragmentBtn) {
			addFirstFragmentBtn.setEnabled(true);
			removeFirstFragmentBtn.setEnabled(false);
			FragmentTransaction transaction = getSupportFragmentManager()
					.beginTransaction();
			transaction.remove(firstFragment);
			// 如果移除的时候也添加到回退栈，表示当前Fragment只是被停止而没有被摧毁，返回时它将恢复；
			// 那么如果不添加到回退栈则表示完全摧毁
			// transaction.addToBackStack(null);
			transaction.commit();
		}
	}
}

FirstFragment：

package com.home.testfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_first, container, false);
	}
}

SecondFragment：

package com.home.testfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SecondFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		return inflater.inflate(R.layout.fragment_second, container, false);
	}
}

main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/main_btn_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="添加" />

        <Button
            android:id="@+id/main_btn_replace"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="替换" />

        <Button
            android:id="@+id/main_btn_remove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="移除" />
    </LinearLayout>

</RelativeLayout>

fragment_first.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="MyFirstFragment"
        android:textSize="20sp" />

</LinearLayout>

fragment_second.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MySecondFragment"
        android:textSize="20sp" />

</LinearLayout>