Fragment开发实例

SVN源码下载地址: https://svn.codespot.com/a/eclipselabs.org/demo1/trunk/myAndroid2_2
或者请下载附件myAndroid2_2.rar.

说明:
这个实例原本是用ANDROID2.2开发的,因此取了2.2的名字。 现在, 该应用的ANDROID已经提升到4.0.

Fragment的使用
    android应用了一个UI设计理念:一个activity可以包含多个fragment。 比如实例中的国家管理模型, 当进入国家管理时(layout activity), 左边出现已经输入的国家列表(list fragment), 点击列表中的国家名称,右边则出现该国家的具体内容(details fragment)。 以上设计就是典型的 list-details 模式。

    这个模式不仅适用于水平展示的屏幕(landscape), 也适用于竖直展示的屏幕(portrait)。 当水平展示时,屏幕左侧是list, 右侧是details; 而竖直展示时,屏幕只显示list, 点击其中的具体内容,屏幕显示details.

实例中的代码解释:
1. CountryLayout.java          整个国家管理界面。 该界面提供了2个MENU,一个是返回主菜单(back), 另一个是添加菜单(new).

2. CountryListFragment.java    显示了所有的国家列表。

3. CountryDetailsFragment.java 显示了具体的国家内容。该界面提供了几个按钮: 在landscape情况下, 有修改(edit)按钮和删除(delete)按钮, 在portrait情况下,不仅有修改和删除两个按钮,还增加了返回列表(list)的按钮(to previous) 

4. CountryDialogFragment.java  显示了国家的操作界面,保存按钮保存(save)添加或修改的内容, 关闭按钮(close)关闭操作界面。

源码要点:
1. Activity和fragment之间的联系
1) 在fragment中建立接口,并利用fragment的onAttach生命周期建立activity和fragment的联系。
xxxfragment.java
public interface OnHeadlineSelectedListener {
        /** Called by HeadlinesFragment when a list item is selected */
        public void onArticleSelected(int position, long id);
        
    }
@Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception.
        try {
            mCallback = (OnHeadlineSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }
    }


2) 在activity中调用fragment建立的接口,并完成接口的具体实现方法
xxxactivity.java implement xxxFragment.OnHeadlineSelectedListener 
@Override
	public void onArticleSelected(int position, long id) {
   	
    	// Capture the article fragment from the activity layout
        CountryDetailsFragment articleFrag = (CountryDetailsFragment)
                getFragmentManager().findFragmentById(R.id.details);

        if (articleFrag != null) {
            articleFrag.updateArticleView(id);
        } else {
            newDetailsFragment(id);
        }
		
	}


2. 创建fragment时的要点
1) fragment管理器
// 找到管理器
 FragmentTransaction ft = getFragmentManager().beginTransaction();
// 将创建的details fragment替换原来的fragment。
        ft.replace(R.id.details, details);
        。。。。。。
//提交
        ft.commit();


2) 判断fragment是否存在
//通过ID寻找的方法
 CountryDetailsFragment details = (CountryDetailsFragment) getFragmentManager().findFragmentById(R.id.details);
// 还有一种是通过Tag来查找的,我这里暂时没有实例。


3) fragment中参数传递
Bundle bundle = new Bundle();
	    bundle.putLong("selectedId", id);
	    bundle.putBoolean("mDualPane", mDualPane);
// 将参数邦定fragment.
	    details.setArguments(bundle);


4) 创建fragment时UI元素的提取
View v = inflater.inflate(R.layout.area_details, container, false);
        	
        	text1 = (TextView) v.findViewById(R.id.areaName);
            text2 = (TextView) v.findViewById(R.id.areaDetails);
......


源码要点的实际应用:
1. 水平屏幕和竖直屏幕的设置(config landscape and portrait),

为了适应不同屏幕,android配置方法如下:
1) 在 res/values目录下增加layouts.xml(portrait配置), 在 res/values-land目录下也增加layouts.xml(landscape配置).

2) res/values/layouts.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <item name="country_layout" type="layout">@layout/country_onepane</item>
    <bool name="has_two_panes">false</bool>
</resources>


3) res/values-land/layouts.xml
<resources>
    <item name="country_layout" type="layout">@layout/country_twopane</item>
    <bool name="has_two_panes">true</bool>
</resources>


2. config fragment
2-1)  portrait配置: res/layout/country_onepane.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <fragment class="cn.com.demo.android.activity.CountryListFragment"
            android:id="@+id/titles"
            android:layout_width="match_parent" android:layout_height="match_parent" />
  
</LinearLayout> 


2-2)  portrait配置: res/layout-land/country_twopane.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <fragment class="cn.com.demo.android.activity.CountryListFragment"
            android:id="@+id/titles" android:layout_weight="1"
            android:layout_width="0px" android:layout_height="match_parent" />

    <FrameLayout android:id="@+id/details" android:layout_weight="1"
            android:layout_width="0px" android:layout_height="match_parent"
            android:background="?android:attr/detailsElementBackground" />
    
</LinearLayout>


3. layout activity: CountryLayout.java
1)  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 根据屏幕判断是调用landscape的xml文件,还是portrait的xml文件。 
        [i]setContentView(R.layout.country_layout);[/i]
        
        // mIsDualPane是判断屏幕是否为landscape的关键,它将作为一个参数传递给其它fragment. 
        View detailsFrame = findViewById(R.id.details);
        mIsDualPane = detailsFrame != null && detailsFrame.getVisibility() == View.VISIBLE;
        
    }


2) 需要运行CountryListFragment.OnHeadlineSelectedListener接口方法
       public void onArticleSelected(int position, long id) {
   	
    	// 判断是否存在details fragment, 如果不存在,需要创建 details fragment. 
        CountryDetailsFragment articleFrag = (CountryDetailsFragment)
                getFragmentManager().findFragmentById(R.id.details);

        if (articleFrag != null) {
            articleFrag.updateArticleView(id);
        } else {
            newDetailsFragment(id);
        }
		
	}


3. list fragment
OnHeadlineSelectedListener mCallback;
1) 定义接口
public interface OnHeadlineSelectedListener {
        /** Called by HeadlinesFragment when a list item is selected */
        public void onArticleSelected(int position, long id);
        
    }


2) 按照android开发者网站的文档说明,这个onAttach方法是属于fragment的生命周期,用于和调用它的activity联系,以便activity能够调用它的接口。
  @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception.
        try {
            mCallback = (OnHeadlineSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }
    }


3) 当列表中的具体项被点击时,显示details的方法。
@Override
    public void onListItemClick(ListView l, View v, int position, long id) {
    	
    	if(mDualPane){
    		mCallback.onArticleSelected(position, id);
    		getListView().setItemChecked(position, true);
    	}
    	showDetails(id);
    }


4) 显示details内容
void showDetails(long id){
        // 如果是landscape 屏幕, 直接显示detailsFragment, 如果是portrait屏幕,这显示detailsActivity.    	
    	if (mDualPane) {
            // Check what fragment is currently shown, replace if needed.
            CountryDetailsFragment details = (CountryDetailsFragment) getFragmentManager().findFragmentById(R.id.details);
            
            if(details==null || id==0){
            	this.newDetailsFragment(details, id);
            }else
            	details.updateArticleView(id);

    	}else{
    		this.newDetailsActivity(id);
    		
    	}
    }


4. details fragment
1) 创建details fragment时, 通过mDualPane判断,是landscape,还是portrait.
   @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
       
        ........        
        
        mDualPane = getArguments().getBoolean("mDualPane");
        
        if(mDualPane){
        	
                // landscape时fragment调用UI组件的方法。
        	View v = inflater.inflate(R.layout.area_details, container, false);
        	
        	text1 = (TextView) v.findViewById(R.id.areaName);
            text2 = (TextView) v.findViewById(R.id.areaDetails);
        	
        	previous = (Button) v.findViewById(R.id.country_toprevious);
        	delete = (Button) v.findViewById(R.id.country_delete);
        	edit = (Button) v.findViewById(R.id.country_edit);
        	
        	if(previous!=null) previous.setVisibility(View.GONE);
        	toggleButtons(View.INVISIBLE);
        	
        	if(delete!=null) delete.setOnClickListener(deleteMe);
        	if(edit!=null) edit.setOnClickListener(editMe);
        	
        	long _id = getArguments().getLong("selectedId");
        	if(_id>0) this.displayDetails(_id);
        	
        	return v;

        }else{
                // portrait时,activity调用UI组件的方法。(同intent调用方法)
        	getActivity().setContentView(R.layout.area_details);
        	
        	extras = getActivity().getIntent().getExtras();
        
        	previous = (Button) getActivity().findViewById(R.id.country_toprevious);
			delete = (Button) getActivity().findViewById(R.id.country_delete);
			edit = (Button) getActivity().findViewById(R.id.country_edit);
			
			if(previous!=null) previous.setOnClickListener(previousMe);
			if(delete!=null) delete.setOnClickListener(deleteMe);
        	if(edit!=null) edit.setOnClickListener(editMe);

        	display();
			
	        return null;
        }
        
        
    }


2) 调用dialog fragment的方法
void showDialog(){
    	
    	FragmentTransaction ft = getFragmentManager().beginTransaction();
	    Fragment prev = getFragmentManager().findFragmentByTag(COUNTRY_DIALOG_FRAGMENT);
	    if (prev != null) {
	        ft.remove(prev);
	    }
	    ft.addToBackStack(null);
	    
	    // Create and show the dialog.
	    DialogFragment newFragment = CountryDialogFragment.newInstance();
	    Bundle bundle = new Bundle();
	    bundle.putLong("selectedId", id);
	    bundle.putBoolean("mDualPane", mDualPane);
	    
	    newFragment.setArguments(bundle);
	    newFragment.show(ft, COUNTRY_DIALOG_FRAGMENT);
    	
    }

   
5. dialog fragment
   @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         // 设置dialog的显示style和theme
         int style = DialogFragment.STYLE_NORMAL, theme = android.R.style.Theme_Holo_Light;
         setStyle(style, theme);
         
         Bundle args = getArguments();
         if(args!=null) id = args.getLong("selectedId");
         if(args!=null) mDualPane = args.getBoolean("mDualPane");
         
         Log.i(TAG,"args is null:" + ((args==null)?true:false));

         ......         
     }

猜你喜欢

转载自jean7155.iteye.com/blog/1829821