1. 程式人生 > >Android嚮導框架(Wizard framework)的一種實現(需要原始碼的同學請留言)

Android嚮導框架(Wizard framework)的一種實現(需要原始碼的同學請留言)

做介面開發的兄弟姐妹都知道嚮導框架一般GUI庫都有提供,而android的介面庫中,卻沒有嚮導框架這個東東。
不要驚訝,你要是不相信的話可以到谷歌查詢,我在stackoverflow看到一些提問:如何實現嚮導式的互動,在android中:how to implement a wizard like interaction in android,回答是有兩種方法:
1)使用多個activity,每個page一個activity,上一步或下一步的響應就是切換activity。
2)使用fragment,每個page一個fragment,上一步或下一步的響應就是切換fragment。
如果每個page之間非常獨立,則用第一種方式;否則建議用第二種。

嚮導框架原始碼

這裡我們介紹使用第二種方式的實現。

1. 實現思路
嚮導是一個fragment activity,使用fragment layout,layout由兩部分組成:頂部的fragment和底部的上一步,下一步按鈕。
上一步,下一步按鈕,切換對應的fragment。
佈局檔案如下:
<?xml version=“1.0” encoding=“utf-8”?>
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”


android:layout_height=“match_parent”
android:orientation=“vertical” >

<FrameLayout
android:id=“@+id/wizard_content”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent” >
</FrameLayout>

<RelativeLayout


xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“horizontal” >

                <Button
                 android:id=“@+id/wizard_finish_btn”
                 android:layout_width=“wrap_content”
                 android:layout_height=“wrap_content”
                 android:layout_alignParentBottom=“true”
                 android:layout_alignParentRight=“true”
                 android:text=“Finish” />

                <Button
                 android:id=“@+id/wizard_next_btn”
                 android:layout_width=“wrap_content”
                 android:layout_height=“wrap_content”
                 android:layout_alignParentBottom=“true”
                 android:layout_toLeftOf=“@+id/wizard_finish_btn”
                 android:text=“Next” />

                <Button
                 android:id=“@+id/wizard_previous_btn”
                 android:layout_width=“wrap_content”
                 android:layout_height=“wrap_content”
                 android:layout_alignParentBottom=“true”
                 android:layout_toLeftOf=“@+id/wizard_next_btn”
                 android:text=“Previous” />
        
</RelativeLayout>

</RelativeLayout>

2. 關鍵的類說明

1)WizardActivity
嚮導框架的activity類,是一個抽象類,子類實現其抽象方法:
protected abstract List<TabInfo> getPageList();,要求子類返回所有的嚮導頁(page)。
**
* This is the wizard framework.
* We implements wizard like this:
* 1. Wizard is an activity, the activity main UI contains one replacable Fragment and 2 buttons(previous, next).
* 2. When user press previous or next button, current fragment will be replaced.
* The sub class should implements:
* 1. Implements hasNext() method to tell the framework whether there are next page or not, if no next page, the next button will change to finish button.
* 2. Provide wizard data, the wizard data is a Map, the Map key is the page identifier(e.g name) and the value is the fragment resource id.
* 3. Implements the doPrevious(), doNext(), doFinish(), init() methods.
* @since 20121115
*
*/
public abstract class WizardActivity extends FragmentActivity implements WizardOperation{

2)TabFragment
實現Fragment的子類,在其onCreateView函式中,會初始化所有的介面動作

public class TabFragment extends Fragment{

        
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){

                View v = inflater.inflate(
layoutResource, container, false);
                Bundle args =
this.getArguments();
                String action_factory_class = args.getString(
“actionFactoryClassName”);
                String tag = args.getString(
“tag”);
                
if (action_factory_class == null || “”.equals(action_factory_class)){
                        
return v;
                }
                
                
//set the UI elements actions
                try {
                        AbstractActionFactory factory = (AbstractActionFactory)Class.forName(action_factory_class).newInstance();
                        factory.setupActions(tag, v,
this.getActivity());

3)AbstractActionFactory
初始化介面action的工廠類,每個page裡面的介面元素,使用對應的factory去初始化。
public abstract class AbstractActionFactory {
        
//The resource id and view mapping, used for this factory to manange the relationship.
        private static Map<String, AbstractActionFactory> factories = new HashMap<String, AbstractActionFactory>();
        
        
public abstract void setupActions(String tag, View view, Activity activity);
        
        
public static AbstractActionFactory getActionFactory(Class<?> factoryClass){


/**
* The UI actions of task. All class in this package is acted as the Control role.
* @since 2012116
*
*/
public class CreateTaskActionFactory extends AbstractActionFactory{

        @Override
        public void setupActions(String tag, View view, Activity activity) {
                
//setup the new task action
                Button new_btn = (Button)view.findViewById(R.id.task_panel_new_btn);
                new_btn.setOnClickListener(
new OperateActivity.NewTaskAction(activity));
        }

4)TaskCreationActivity
嚮導實現類,實現上一步,下一步的響應,以及提供page list
public class TaskCreationActivity extends WizardActivity{

3. 效果圖