转载

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

Fragment实现Tab

首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签

1     <FrameLayout 2         android:id="@+id/id_content" 3         android:layout_width="fill_parent" 4         android:layout_height="0dp" 5         android:layout_weight="1" > 6     </FrameLayout>

View Code

其他的xml文件都跟上一篇中一样，就不重复了。

与之前的ViewPager不同的是，我们还要为每个tab新建一个相应的Fragment类，并且在Fragment类中填充视图

如下：

package com.imooc.tab02;  import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class WeixinFragment extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState)     {         return inflater.inflate(R.layout.tab01, container, false);     } }

View Code

最后看看MainActivity类

package com.imooc.tab02; 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.view.View.OnClickListener; import android.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; public class MainActivity extends FragmentActivity implements OnClickListener {  private LinearLayout mTabWeixin;  private LinearLayout mTabFrd;  private LinearLayout mTabAddress;  private LinearLayout mTabSettings;  private ImageButton mImgWeixin;  private ImageButton mImgFrd;  private ImageButton mImgAddress;  private ImageButton mImgSettings;  private Fragment mTab01;  private Fragment mTab02;  private Fragment mTab03;  private Fragment mTab04;  @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   requestWindowFeature(Window.FEATURE_NO_TITLE);   setContentView(R.layout.activity_main);   initView();   initEvent();   setSelect(0);  }  private void initEvent() {   mTabWeixin.setOnClickListener(this);   mTabFrd.setOnClickListener(this);   mTabAddress.setOnClickListener(this);   mTabSettings.setOnClickListener(this);  }  private void initView() {   mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);   mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);   mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);   mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);   mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);   mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);   mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);   mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);  }  private void setSelect(int i) {   FragmentManager fm = getSupportFragmentManager();   FragmentTransaction transaction = fm.beginTransaction();   hideFragment(transaction);   switch (i) {   case 0:    if (mTab01 == null) {     mTab01 = new WeixinFragment();     transaction.add(R.id.id_content, mTab01);    } else {     transaction.show(mTab01);    }    mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);    break;   case 1:    if (mTab02 == null) {     mTab02 = new FrdFragment();     transaction.add(R.id.id_content, mTab02);    } else {     transaction.show(mTab02);    }    mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);    break;   case 2:    if (mTab03 == null) {     mTab03 = new AddressFragment();     transaction.add(R.id.id_content, mTab03);    } else {     transaction.show(mTab03);    }    mImgAddress.setImageResource(R.drawable.tab_address_pressed);    break;   case 3:    if (mTab04 == null) {     mTab04 = new SettingFragment();     transaction.add(R.id.id_content, mTab04);    } else {     transaction.show(mTab04);    }    mImgSettings.setImageResource(R.drawable.tab_settings_pressed);    break;   default:    break;   }   transaction.commit();  }  private void hideFragment(FragmentTransaction transaction) {   if (mTab01 != null) {    transaction.hide(mTab01);   }   if (mTab02 != null) {    transaction.hide(mTab02);   }   if (mTab03 != null) {    transaction.hide(mTab03);   }   if (mTab04 != null) {    transaction.hide(mTab04);   }  }  @Override  public void onClick(View v) {   resetImgs();   switch (v.getId()) {   case R.id.id_tab_weixin:    setSelect(0);    break;   case R.id.id_tab_frd:    setSelect(1);    break;   case R.id.id_tab_address:    setSelect(2);    break;   case R.id.id_tab_settings:    setSelect(3);    break;   default:    break;   }  }  private void resetImgs() {   mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);   mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);   mImgAddress.setImageResource(R.drawable.tab_address_normal);   mImgSettings.setImageResource(R.drawable.tab_settings_normal);  } }