Question

我需要与IOS开发人员合作。他不知道Android如何在布局系统中工作。他设计了一个非常动态的UI。请看我的链接。

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

备注：橙色矩形意味着图像按钮。

在此布局中，存在两个主要视图。对于视图1，它是列表视图。单击项目时，视图2将设置动画。视图2从右向左移动。此外，它略微覆盖了View 1。翻译完成后，橙色的Rect也有动画效果。他们从底部移动到相对位置。

我跟他们说话。如果我做那个设计，布局不能重复使用。其次，我不想硬编码播放动画和UI设计。

他们认为一切皆有可能且很容易做= = |||。

如果你是我，你是如何设计它的？

这是我的解决方案，但View 2无法覆盖View 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/本教程将帮助你实现库。

你如何设计这个布局简单？

1 个答案: