先看一下效果图:
左右各是一个Fragment,左边的三个按钮可以控制右边的背景色,右边的mood按钮,可以控制左边最上面的ImageView,这样就简单的实现了Fragment的界面交互。
在MainActivity的布局中添加Fragment有两种方式,不同添加Fragment的方法,要实现两个Fragment的交互的差异是很大的,本文讲比较简单的一种,下一节讲另一种方式。
看MainActivity的布局文件mian.xml文件就明了了。
main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <fragment android:id="@+id/tag" android:name="com.aaron.LeftFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <fragment android:id="@+id/details" android:name="com.aaron.RightFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="3.5" /> </LinearLayout>
也就是直接在MainActivity的布局中添加两个Fragment的标签,这种情况下,在MainActivity中是可以直接findViewById拿到LeftFragment、RightFragment的布局文件中定义的组件的,看MainActivity类的代码
MainActivity.java
public class MainActivity extends FragmentActivity { private Button mood_btn, red_btn, green_btn, blue_btn; private ImageView iv; private int count = 0; private LinearLayout ll; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mood_btn = (Button)findViewById(R.id.mood); iv = (ImageView)findViewById(R.id.image); mood_btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { count ++; switch(count){ case 1: iv.setImageResource(R.drawable.draw); break; case 2: iv.setImageResource(R.drawable.lose); break; case 3: iv.setImageResource(R.drawable.win); count = 0; break; } } }); red_btn = (Button)findViewById(R.id.back_red); green_btn = (Button)findViewById(R.id.back_green); blue_btn = (Button)findViewById(R.id.back_blue); ll = (LinearLayout)findViewById(R.id.back); ButtonListener bl = new ButtonListener(); red_btn.setOnClickListener(bl); green_btn.setOnClickListener(bl); blue_btn.setOnClickListener(bl); } class ButtonListener implements OnClickListener{ @Override public void onClick(View v) { Button btn = (Button)v; switch(btn.getId()){ case R.id.back_red: ll.setBackgroundResource(R.drawable.red); break; case R.id.back_green: ll.setBackgroundResource(R.drawable.green); break; case R.id.back_blue: ll.setBackgroundResource(R.drawable.blue); break; } } } }
LeftFragment、RightFragment类的代码就很简单了,两者是相似的,先贴出LeftFragment的代码。
LeftFragment.java
public class LeftFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.left, container, false); return view; } }
左右Fragment的布局文件根据截图就很好写了,现附上源代码。