App界面Tab选项卡之Fragment

上次写过 App界面Tab选项卡之ViewPager ，今天就谈谈另一种实现方式，采用Fragment的方式，关于Fragment有篇非常好的文章，不太熟悉的先自行前往get 点我点我 。

今天只是Fragment初探，目的还是实现ViewPager一样的界面，但是由于Fragment自身并不支持左右滑动，须自行实现，所以这次只能靠点击下面的bottom_bar进行页面切换。在后面我会写一个综合版的，让Fragment也可以滑起来。

title_bar和bottom_bar都是采用的ViewPager那一篇中的，唯一值得注意的主界面，activity_main.xml：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:orientation="vertical">        <include layout="@layout/title_bar" />        <FrameLayout            android:id="@+id/frame_layout"            android:layout_width="fill_parent"            android:layout_height="0dp"            android:layout_weight="1" />        <include layout="@layout/bottom_bar" /> </LinearLayout>

本该显示切换页面的位置由ViewPager换成的FrameLayout，上篇中内容布局不是以inflate动态加载出来的么，然后放在views中，这次就不这样做了，新建4个类，都继承自Fragment，因为大同小异，我就贴一个代码了，Fragment_0.java：

package com.cjt_pc.fragment;  import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  /**  * Created by cjt-pc on 2015/8/21.  * Email:879309896@qq.com  */ public class Fragment_0 extends Fragment {      @Nullable      @Override      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {           View view = inflater.inflate(R.layout.content_0, null);           return view;      } }

后面就相应的改类的名称和加载的布局id就可以了，最重要的MainActivity.java：

package com.cjt_pc.fragment;  import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout;  public class MainActivity extends FragmentActivity implements View.OnClickListener {       private Fragment fragment_0, fragment_1, fragment_2, fragment_3;      // ViewPager指示器布局      private LinearLayout llIndicator0, llIndicator1, llIndicator2, llIndicator3;      private ImageView ivImg0, ivImg1, ivImg2, ivImg3;       @Override      protected void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           setContentView(R.layout.activity_main);           initWidget();           setSelector(0);      }       private void initWidget() {           llIndicator0 = (LinearLayout) findViewById(R.id.tab_0);           llIndicator0.setOnClickListener(this);           llIndicator1 = (LinearLayout) findViewById(R.id.tab_1);           llIndicator1.setOnClickListener(this);           llIndicator2 = (LinearLayout) findViewById(R.id.tab_2);           llIndicator2.setOnClickListener(this);           llIndicator3 = (LinearLayout) findViewById(R.id.tab_3);           llIndicator3.setOnClickListener(this);           ivImg0 = (ImageView) findViewById(R.id.img_0);           ivImg1 = (ImageView) findViewById(R.id.img_1);           ivImg2 = (ImageView) findViewById(R.id.img_2);           ivImg3 = (ImageView) findViewById(R.id.img_3);      }       @Override      public void onClick(View view) {           resetIndicator();           switch (view.getId()) {                case R.id.tab_0:                     setSelector(0);                     break;                case R.id.tab_1:                     setSelector(1);                     break;                case R.id.tab_2:                     setSelector(2);                     break;                case R.id.tab_3:                     setSelector(3);                     break;               }         }          public void setSelector(int selector) {              FragmentManager manager = getSupportFragmentManager();              FragmentTransaction transaction = manager.beginTransaction();              hideFragment(transaction);              switch (selector) {                  case 0:                       if (fragment_0 == null) {                            fragment_0 = new Fragment_0();                            transaction.add(R.id.frame_layout, fragment_0);                       } else {                            transaction.show(fragment_0);                       }                       ivImg0.setImageResource(R.mipmap.tab_weixin_pressed);                       break;                  case 1:                       if (fragment_1 == null) {                            fragment_1 = new Fragment_1();                            transaction.add(R.id.frame_layout, fragment_1);                       } else {                            transaction.show(fragment_1);                       }                       ivImg1.setImageResource(R.mipmap.tab_find_frd_pressed);                       break;                  case 2:                       if (fragment_2 == null) {                            fragment_2 = new Fragment_2();                            transaction.add(R.id.frame_layout, fragment_2);                       } else {                            transaction.show(fragment_2);                       }                       ivImg2.setImageResource(R.mipmap.tab_address_pressed);                       break;                  case 3:                       if (fragment_3 == null) {                            fragment_3 = new Fragment_3();                            transaction.add(R.id.frame_layout, fragment_3);                       } else {                            transaction.show(fragment_3);                       }                       ivImg3.setImageResource(R.mipmap.tab_settings_pressed);                       break;                  }                  transaction.commit();             }        private void hideFragment(FragmentTransaction transaction) {            if (fragment_0 != null) {                 transaction.hide(fragment_0);            }            if (fragment_1 != null) {                 transaction.hide(fragment_1);            }            if (fragment_2 != null) {                 transaction.hide(fragment_2);            }            if (fragment_3 != null) {                 transaction.hide(fragment_3);            }      }       private void resetIndicator() {           ivImg0.setImageResource(R.mipmap.tab_weixin_normal);           ivImg1.setImageResource(R.mipmap.tab_find_frd_normal);           ivImg2.setImageResource(R.mipmap.tab_address_normal);          ivImg3.setImageResource(R.mipmap.tab_settings_normal);      } }

我要指出的就是在四个fragment并没有在onCreate中全部初始化，而是放在setSelector中，这样做的好处的是只有当使用到的时候通过if判断，若fragment为null才new一个出来，具体的用法还是参照最上面详解fragment链接。

相关代码下载： http://download.csdn.net/detail/qq_15002323/9038173