Fragment实现界面交互小实例<1>

先看一下效果图：

        左右各是一个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的布局文件根据截图就很好写了，现附上源代码。