你如何設計這個佈局簡單？

Question

我需要與IOS開發人員合作。他不知道Android如何在佈局系統中工作。他設計了一個非常有力的UI。請看我的鏈接。

[鏈接：] http://dl.dropbox.com/u/78582670/layoutdesign.png

備註：橙色矩形意味着圖像的按鈕。

在此佈局中，存在兩個主要視圖。對於視圖1，它是一個列表視圖。點擊一個項目時，視圖2將生成動畫。查看2從右向左移動。此外，它涵蓋了視圖1一點。在這個翻譯完成後，橙色Rect也動畫。他們從底部移動到相對位置。

我跟他們說話。如果我這樣做，佈局不能重複使用。其次，我不想爲播放動畫和UI設計編寫硬編碼。

他們認爲一切都是可能的，容易做= = |||。

如果你是我，你是如何設計它的？

這裏是我的解決方案，但查看2不能掩蓋圖1.

public class EducationSystemActivity extends Activity 
{ 
ImageButton mButton1 = null; 
ImageButton mButton2 = null; 
ImageButton mButton3 = null; 
ImageButton mButton4 = null; 
ImageButton mButton5 = null; 

OnClickListener mImageButtonClickListner = new OnClickListener() 
{ 
    @Override 
    public void onClick(View v) 
    { 
     switch(v.getId()){ 
      case R.id.imageButton1:{ 
       Fragment fragment = new TestFragment2(); 
       FragmentTransaction ft = getFragmentManager().beginTransaction(); 
       ft.setCustomAnimations(R.animator.fragment_slide_left_enter, 
         R.animator.fragment_slide_left_exit, 
         R.animator.fragment_slide_right_enter, 
         R.animator.fragment_slide_right_exit); 
       ft.replace(R.id.fragment_content, fragment); 
       ft.addToBackStack(null); 
       ft.commit(); 
       Toast.makeText(EducationSystemActivity.this, "Button1", Toast.LENGTH_SHORT).show(); 
       break; 
      } 
      case R.id.imageButton2:{ 
       Toast.makeText(EducationSystemActivity.this, "Button2", Toast.LENGTH_SHORT).show(); 
       break; 
      } 
      case R.id.imageButton3:{ 
       Toast.makeText(EducationSystemActivity.this, "Button3", Toast.LENGTH_SHORT).show(); 
       break; 
      } 
      case R.id.imageButton4:{ 
       Toast.makeText(EducationSystemActivity.this, "Button4", Toast.LENGTH_SHORT).show(); 
       break; 
      } 
      case R.id.imageButton5:{ 
       Toast.makeText(EducationSystemActivity.this, "Button5", Toast.LENGTH_SHORT).show(); 
       break; 
      } 
     } 
    } 
}; 


@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.menu); 

    mButton1 = (ImageButton) findViewById(R.id.imageButton1); 
    mButton2 = (ImageButton) findViewById(R.id.imageButton2); 
    mButton3 = (ImageButton) findViewById(R.id.imageButton3); 
    mButton4 = (ImageButton) findViewById(R.id.imageButton4); 
    mButton5 = (ImageButton) findViewById(R.id.imageButton5); 

    mButton1.setOnClickListener(mImageButtonClickListner); 
    mButton2.setOnClickListener(mImageButtonClickListner); 
    mButton3.setOnClickListener(mImageButtonClickListner); 
    mButton4.setOnClickListener(mImageButtonClickListner); 
    mButton5.setOnClickListener(mImageButtonClickListner); 


    FragmentTransaction ft = getFragmentManager().beginTransaction(); 
    ft.replace(R.id.fragment_content, new TestFragment1()); 
    ft.commit(); 

} 

} 

TestFragment2：

public class TestFragment2 extends Fragment 
{ 
LayoutInflater mInflater = null; 

@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
    super.onCreate(savedInstanceState); 
    mInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
} 

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
     Bundle savedInstanceState) { 
    Log.d("TestFragment1", "onCreateView"); 
    return inflater.inflate(R.layout.test_fragment2, container, false); 
} 

@Override 
public Animator onCreateAnimator(int transit, boolean enter, int nextAnim) { 
    Log.d("TestFragment2", "onCreateAnimator transit:" + transit + " enter:" + enter + " nextAnim:" + nextAnim); 
    Animator set = null; 
    if(enter){ 
     set = AnimatorInflater.loadAnimator(this.getActivity(), R.animator.fragment_slide_left_enter); 
     set.addListener(new AnimatorListener() 
     { 

      @Override 
      public void onAnimationCancel(Animator animation) 
      { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) 
      { 
       Log.d("TestFragment2", "onAnimationEnd()"); 
       addAnimationSubMenu(); 
      } 

      @Override 
      public void onAnimationRepeat(Animator animation) 
      { 

      } 

      @Override 
      public void onAnimationStart(Animator animation) 
      { 
       Log.d("TestFragment2", "onAnimationStart()"); 
      } 

     }); 
    } 
    else{ 
     set = AnimatorInflater.loadAnimator(this.getActivity(), R.animator.fragment_slide_left_exit); 
    } 
    return set; 
} 


private void addAnimationSubMenu() 
{ 
    ViewGroup submenu_frame = (ViewGroup) getActivity().findViewById(R.id.submenu_frame); 
    mInflater.inflate(R.layout.fragment1_submenu, submenu_frame, true); 
    View submenu_layout = getActivity().findViewById(R.id.submenu_layout); 
    Animation anim = AnimationUtils.loadAnimation(this.getActivity(), R.anim.slide_bottom_to_top); 
    submenu_layout.startAnimation(anim); 
} 
} 

testfragment2.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="#FFFEFE00" 
android:padding="0dp" 
android:layout_margin="0dp" 
android:orientation="horizontal" > 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.5" 
    android:text="@string/test2" /> 

<FrameLayout 
    android:id="@+id/submenu_frame" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:background="@drawable/menu_drawable"> 
</FrameLayout> 

</LinearLayout> 

fragment_submenu1.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/submenu_layout" 
android:layout_width="wrap_content" 
android:layout_height="match_parent" 
android:orientation="vertical" > 

<ImageButton 
    android:id="@+id/imageButton1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="@string/menu_item1" 
    android:src="@drawable/speech_bubble2x" /> 

<ImageButton 
    android:id="@+id/imageButton2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="@string/menu_item2" 
    android:src="@drawable/newspaper2x" /> 

<ImageButton 
    android:id="@+id/imageButton3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="@string/menu_item3" 
    android:src="@drawable/trolley2x" /> 

<ImageButton 
    android:id="@+id/imageButton4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="@string/menu_item4" 
    android:src="@drawable/refresh2x" /> 

<ImageButton 
    android:id="@+id/imageButton5" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:contentDescription="@string/menu_item5" 
    android:src="@drawable/house2x" /> 

</LinearLayout> 

Answer 1

這是可能的你必須使用片段使用http://actionbarsherlock.com/這個庫將幫助你獲得你的需求和http://xrigau.wordpress.com/2012/03/15/using-an-actionbar-in-your-application-with-actionbarsherlock/本教程將幫助你實現庫。