Android之Fragment多个页面切换实现

本篇文章通过一个例子说明Fragment的使用

第一步：新建工程，并添加需要的图片资源

第二步：建立四个子布局文件

main_tab1.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#FF0000"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#000000"        android:gravity="center_vertical">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:text="Fragment1"/>    </RelativeLayout>        </LinearLayout>

main_tab2.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#00FF00"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#000000"        android:gravity="center_vertical">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:text="Fragment2"/>    </RelativeLayout></LinearLayout>

main_tab3.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#0000FF"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#000000"        android:gravity="center_vertical">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:text="Fragment3"/>    </RelativeLayout>    </LinearLayout>

main_tab4.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#FF00FF"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="fill_parent"        android:layout_height="45dp"        android:background="#000000"        android:gravity="center_vertical">        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:textSize="20sp"            android:textColor="#FFFFFF"            android:text="Fragment4"/>    </RelativeLayout></LinearLayout>

第三步：建立四个子布局文件对应的源文件

MainFragmentTab1.java

public class MainFragmentTab1 extends Fragment{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);System.out.println("MainTab1 onCreate");}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){System.out.println("MainTab1 onCreateView");          return inflater.inflate(R.layout.main_tab1, container, true);}}

MainFragmentTab2.java

public class MainFragmentTab2 extends Fragment{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);System.out.println("MainTab2 onCreate");}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){System.out.println("MainTab2 onCreateView");          return inflater.inflate(R.layout.main_tab2, container, true);}}

MainFragmentTab3.java

public class MainFragmentTab3 extends Fragment{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);System.out.println("MainTab3 onCreate");}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){System.out.println("MainTab3 onCreateView");        return inflater.inflate(R.layout.main_tab3, container, true);}}

MainFragmentTab4.java

public class MainFragmentTab4 extends Fragment{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);System.out.println("MainTab4 onCreate");}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){System.out.println("MainTab4 onCreateView");        return inflater.inflate(R.layout.main_tab4, container, true);}}

第四步：建立主界面的源文件，同时管理四个子文件

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#F5F5F5" >    <RelativeLayout         android:layout_width="match_parent"        android:layout_height="match_parent">        <TabWidget             android:id="@android:id/tabs"            android:layout_alignParentBottom="true"            android:layout_width="match_parent"            android:layout_height="wrap_content"/>        <FrameLayout             android:layout_above="@android:id/tabs"            android:id="@android:id/tabcontent"            android:layout_width="match_parent"            android:layout_height="match_parent">            <fragment                 android:name="com.fragmentdemo.MainFragmentTab1"                android:id="@+id/tab1"                android:layout_width="match_parent"                android:layout_height="match_parent"/>            <fragment                 android:name="com.fragmentdemo.MainFragmentTab2"                android:id="@+id/tab2"                android:layout_width="match_parent"                android:layout_height="match_parent"/>            <fragment                 android:name="com.fragmentdemo.MainFragmentTab3"                android:id="@+id/tab3"                android:layout_width="match_parent"                android:layout_height="match_parent"/>            <fragment                 android:name="com.fragmentdemo.MainFragmentTab4"                android:id="@+id/tab4"                android:layout_width="match_parent"                android:layout_height="match_parent"/>        </FrameLayout>    </RelativeLayout></TabHost>

第五步：建立主界面的源文件

public class MainActivity extends FragmentActivity{private TabHost mTabHost;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//取得TabHost对象mTabHost = (TabHost)findViewById(android.R.id.tabhost);mTabHost.setup();//为TabHost添加标签mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Frag1",getResources().getDrawable(R.drawable.tab_tbox1)).setContent(R.id.tab1));mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Frag2",getResources().getDrawable(R.drawable.tab_tbox2)).setContent(R.id.tab2));mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Frag3",getResources().getDrawable(R.drawable.tab_tbox3)).setContent(R.id.tab3));mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator("Frag4",getResources().getDrawable(R.drawable.tab_tbox4)).setContent(R.id.tab4));//设置TabHost的背景颜色mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));//设置当前显示哪一个标签mTabHost.setCurrentTab(0);//标签切换事件处理，setOnTabChangedListener     mTabHost.setOnTabChangedListener(new OnTabChangeListener()    {            @Override            public void onTabChanged(String tabId)             {            Toast.makeText(MainActivity.this, "你选择了标签为:"+tabId, Toast.LENGTH_SHORT).show();            }        });}@Overridepublic boolean onCreateOptionsMenu(Menu menu){getMenuInflater().inflate(R.menu.main, menu);return true;}}

第六步：查看效果

竖屏效果

横屏效果

源代码下载

更多相关文章

随机推荐