Android入门碎片

Posted 2020-07-03 Orlion

原文链接:http://www.orlion.ga/493/

一、碎片

    碎片（Fragment）是一种可以嵌入在活动当中的 UI片段，它能让程序更加合理和充分地利用大屏幕的空间，因而在平板上应用的非常广泛。虽然碎片对你来说应该是个全新的概念，但我相信你学习起来应该毫不费力，因为它和活动实在是太像了，同样都能包含布局，同样都有自己的生命周期。你甚至可以将碎片理解成一个迷你型的活动，虽然这个迷你型的活动有可能和普通的活动是一样大的。

    那么究竟要如何使用碎片才能充分地利用平板屏幕的空间呢？想象我们正在开发一个新闻应用，其中一个界面使用 ListView展示了一组新闻的标题，当点击了其中一个标题，就打开另一个界面显示新闻的详细内容。如果是在手机中设计，我们可以将新闻标题列表放在一个活动中，将新闻的详细内容放在另一个活动中，如图：

    可是如果在平板上也这么设计，那么新闻标题列表将会被拉长至填充满整个平板的屏幕，而新闻的标题一般都不会太长，这样将会导致界面上有大量的空白区域，

    因此，更好的设计方案是将新闻标题列表界面和新闻详细内容界面分别放在两个碎片中，然后在同一个活动里引入这两个碎片，这样就可以将屏幕空间充分地利用起来了，如图

二、体验碎片布局    

    首先创建一个android项目，然后创建左侧碎片布局left_fragment.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" >
	<Button
	    android:id="@+id/button"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="center_horizontal"
	    android:text="Button"/>
</LinearLayout>

    然后创建右侧碎片布局right_fragment.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:background="#00ff00"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:text="This is right fragment"/>
</LinearLayout>

    接着新建一个LeftFragment类，继承自Fragment：

package ga.orlion.fragmentdemo;

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

public class LeftFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.left_fragment , container , false);
		return view;
	}
}

    这里只重写了Fragment的onCreateView()方法，然后在这个方法中通过LayoutInflater的inflate()方法将刚才定义的left_fragment布局动态的加载进来，然后再创建一个RightFragment,代码：

package ga.orlion.fragmentdemo;

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

public class RightFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.right_fragment , container , false);
		return view;
	}
}

    然后修改activity_main.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">
	
    <fragment 
        android:id="@+id/left_fragment"
        android:name="ga.orlion.fragmentdemo.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    
    <fragment 
        android:id="@+id/right_fragment"
        android:name="ga.orlion.fragmentdemo.RightFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
</LinearLayout>

    运行结果：

三、动态添加碎片

    新建another_right_fragment.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:background="#ffff00"
    android:orientation="vertical" >
    
	<TextView
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="center_horizontal"
	    android:textSize="20sp"
	    android:text="This is another right fragment"/>
	
</LinearLayout>

    然后创建AnotherRightFragment：

package ga.orlion.fragmentdemo;

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

public class AnotherRightFragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		View view = inflater.inflate(R.layout.another_right_fragment , container , false);
		return view;
	}
}

    接下来就是把这个碎片动态加载到活动中。修改activity_main.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">
	
    <fragment 
        android:id="@+id/left_fragment"
        android:name="ga.orlion.fragmentdemo.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    
    <FrameLayout 
        android:id="@+id/right_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">
        
        <fragment
            android:id="@+id/right_fragment"
            android:name="ga.orlion.fragmentdemo.RightFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
</LinearLayout>

    FrameLayout没有任何定位，所有的空间摆放在布局的左上角，因为这里只需要在布局中放如一个碎片，因此非常适合FrameLayout。然后我们将在代码中替换FrameLayout里的内容，从而实现动态添加碎片的功能，修改MainActivity中的代码，如下所示：

package ga.orlion.fragmentdemo;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Button button = (Button) findViewById(R.id.button);
		button.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		
		switch (v.getId()) {
		case R.id.button:
			AnotherRightFragment fragment = new AnotherRightFragment();
			FragmentManager fragmentManager = getFragmentManager();
			FragmentTransaction transaction = fragmentManager.beginTransaction();
			transaction.replace(R.id.right_layout, fragment);
			transaction.commit();
			break;
		default:
			break;	
		}
	}
	
	
}

    可以看到我们给左侧碎片中的按钮注册了一个点击事件然后将动态添加碎片的逻辑都放在了点击事件里。动态添加碎片主要分为5步：

    1.创建待添加的碎片实例

    2.获取到FragmentManager，在活动中可以直接调用getFragmentManager()方法

    3.开启一个事务，通过调用beginTransaction（）方法

    4.向容器内加入碎片，一般使用 replace()方法实现，需要传入容器的 id和待添加的碎

片实例。

    5.提交事务，调用 commit()方法来完成。