【IMOOC學習筆記】多種多樣的App主介面Tab實現方法(二)

標籤：

Fragment實現Tab

首先把activity_main.xml 檔案中的ViewPager標籤改成Fragment標籤

1     <FrameLayout2         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);    }}

View Code

 

【IMOOC學習筆記】多種多樣的App主介面Tab實現方法(二)