你怎么设计这个简单的布局？ [英] How do you design this layout simple?
本文介绍了你怎么设计这个简单的布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要iOS开发者进行合作。他不知道的布局系统是如何工作的Android。他设计了一个非常动态UI。请参阅我的链接。
[链接：] http://dl.dropbox.com/u/78582670/ layoutdesign.png
备注：橙色矩形意味着图像按钮
在这个布局中，存在两种主要观点。对于View 1，它是一个列表视图。单击某个项目时，视图2将动画。查看右二左移。此外，它涵盖了视图1位。这个翻译完成后，橙色矩形也动画。它们从底部移动到相对位置。
我与他们交谈。如果我这样做的设计，布局不能重复使用。其次，我不想硬code播放动画和UI设计。
他们认为一切皆有可能易做= = |||。
如果你是我，你怎么设计呢？
下面是我的解决方案，但查看2不能覆盖图。
公共类EducationSystemActivity扩展活动
{
的ImageButton mButton1 = NULL;
的ImageButton mButton2 = NULL;
的ImageButton mButton3 = NULL;
的ImageButton mButton4 = NULL;
的ImageButton mButton5 = NULL;OnClickListener mImageButtonClickListner =新OnClickListener（）
{
@覆盖
公共无效的onClick（视图v）
{
开关（v.getId（））{
案例R.id.imageButton1：{
片段片段=新TestFragment2（）;
FragmentTransaction英尺= 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，片段）;
ft.addToBackStack（NULL）;
ft.commit（）;
Toast.makeText（EducationSystemActivity.thisButton1的，Toast.LENGTH_SHORT）.show（）;
打破;
}
案例R.id.imageButton2：{
Toast.makeText（EducationSystemActivity.this的Button2，Toast.LENGTH_SHORT）.show（）;
打破;
}
案例R.id.imageButton3：{
Toast.makeText（EducationSystemActivity.this，将Button3，Toast.LENGTH_SHORT）.show（）;
打破;
}
案例R.id.imageButton4：{
Toast.makeText（EducationSystemActivity.this，将Button4，Toast.LENGTH_SHORT）.show（）;
打破;
}
案例R.id.imageButton5：{
Toast.makeText（EducationSystemActivity.thisButton5，Toast.LENGTH_SHORT）.show（）;
打破;
}
}
}
};
@覆盖
公共无效的onCreate（捆绑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英尺= getFragmentManager（）调用BeginTransaction（）。
ft.replace（R.id.fragment_content，新TestFragment1（））;
ft.commit（）;}}
TestFragment2：
公共类TestFragment2扩展片段
{
LayoutInflater mInflater = NULL;@覆盖
公共无效的onCreate（捆绑savedInstanceState）
{
super.onCreate（savedInstanceState）;
mInflater =（LayoutInflater）getActivity（）getSystemService（Context.LAYOUT_INFLATER_SERVICE）。
}@覆盖
公共查看onCreateView（LayoutInflater充气器，容器的ViewGroup，
捆绑savedInstanceState）{
Log.d（TestFragment1，onCreateView）;
返回inflater.inflate（R.layout.test_fragment2，集装箱，FALSE）;
}@覆盖
公共动画onCreateAnimator（INT中转，布尔输入，诠释nextAnim）{
Log.d（TestFragment2，onCreateAnimator过境+公交+输入：+输入+nextAnim：+ nextAnim）;
动画设置= NULL;
如果（进入）{
集= AnimatorInflater.loadAnimator（this.getActivity（），R.animator.fragment_slide_left_enter）;
set.addListener（新AnimatorListener（）
{ @覆盖
公共无效onAnimationCancel（动画动画）
{ } @覆盖
公共无效onAnimationEnd（动画动画）
{
Log.d（TestFragment2，onAnimationEnd（））;
addAnimationSubMenu（）;
} @覆盖
公共无效onAnimationRepeat（动画动画）
{ } @覆盖
公共无效onAnimationStart（动画动画）
{
Log.d（TestFragment2，onAnimationStart（））;
} }）;
}
其他{
集= AnimatorInflater.loadAnimator（this.getActivity（），R.animator.fragment_slide_left_exit）;
}
返回设置;
}
私人无效addAnimationSubMenu（）
{
ViewGroup中submenu_frame =（ViewGroup中）getActivity（）findViewById（R.id.submenu_frame）。
mInflater.inflate（R.layout.fragment1_submenu，submenu_frame，真正的）;
查看submenu_layout = getActivity（）findViewById（R.id.submenu_layout）。
动画动画= AnimationUtils.loadAnimation（this.getActivity（），R.anim.slide_bottom_to_top）;
submenu_layout.startAnimation（阿尼姆）;
}
}
testfragment2.xml：
＆LT; LinearLayout中的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：layout_width =FILL_PARENT
机器人：layout_height =FILL_PARENT
机器人：背景=＃FFFEFE00
机器人：填充=0dp
机器人：layout_margin =0dp
机器人：方向=横向＆GT;＆LT;的TextView
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：layout_weight =0.5
机器人：文字=@字符串/ test2的/＆GT;＆LT;的FrameLayout
机器人：ID =@ + ID / submenu_frame
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =match_parent
机器人：背景=@绘制/ menu_drawable＆GT;
＆LT; /＆的FrameLayout GT;＆LT; / LinearLayout中＆GT;
fragment_submenu1.xml：
＆LT; LinearLayout中的xmlns：机器人=http://schemas.android.com/apk/res/android
机器人：ID =@ + ID / submenu_layout
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =match_parent
机器人：方向=垂直＆GT;＆LT;的ImageButton
机器人：ID =@ + ID / imageButton1
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：contentDescription =@字符串/ menu_item1
机器人：SRC =@绘制/ speech_bubble2x/＆GT;＆LT;的ImageButton
机器人：ID =@ + ID / imageButton2
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：contentDescription =@字符串/ menu_item2
机器人：SRC =@绘制/ newspaper2x/＆GT;＆LT;的ImageButton
机器人：ID =@ + ID / imageButton3
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：contentDescription =@字符串/ menu_item3
机器人：SRC =@绘制/ trolley2x/＆GT;＆LT;的ImageButton
机器人：ID =@ + ID / imageButton4
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：contentDescription =@字符串/ menu_item4
机器人：SRC =@绘制/ refresh2x/＆GT;＆LT;的ImageButton
机器人：ID =@ + ID / imageButton5
机器人：layout_width =WRAP_CONTENT
机器人：layout_height =WRAP_CONTENT
机器人：contentDescription =@字符串/ menu_item5
机器人：SRC =@绘制/ house2x/＆GT;＆LT; / LinearLayout中＆GT;
解决方案
这是可能的，你必须使用片段使用的http：// actionbarsherlock.com/ 该库将帮助你得到你的要求，<一个href=\"http://xrigau.word$p$pss.com/2012/03/15/using-an-actionbar-in-your-application-with-actionbarsherlock/\" rel=\"nofollow\">http://xrigau.word$p$pss.com/2012/03/15/using-an-actionbar-in-your-application-with-actionbarsherlock/本教程将帮助您实现库。
i need to cooperate with IOS developer. He does not know how Android work in layout system. He design a very dynamics UI. Please see my link.
[Link:] http://dl.dropbox.com/u/78582670/layoutdesign.png
Remarks: Orange rectangle mean image buttons.
In this layout, there exist two main views. For View 1, it is a list view. When clicking a item, a View 2 will animate. View 2 move from right to left. Also, it cover the View 1 a bit. After this translation finish, the orange Rect also animate. They move from bottom to the relative position.
I talk to them. If i do that design, the layout cannot be reused. Secondly, i don't want to hard code for playing animation and the UI design.
They think everything is possible and easy to do = =|||.
If you are me, how do you design it?
Here is my solution, but View 2 cannot cover 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>
解决方案
This is Possible you have to use fragments use http://actionbarsherlock.com/ this library will help you to get your requirement and http://xrigau.wordpress.com/2012/03/15/using-an-actionbar-in-your-application-with-actionbarsherlock/ this tutorial will help you to implement the library.
这篇关于你怎么设计这个简单的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://dl.dropbox.com/u/78582670/ layoutdesign.png](\"http://dl.dropbox.com/u/78582670/layoutdesign.png\"){kind=link}
