頁面布局之Tabbar實作（Fragment）

前言：上周沒有更新，這周就把剩下的兩種Tabbar都展示出來!

在上篇文章中介紹了實用TabActivity和TabHost實作底部Tabbar，今天我們使用Fragment實作下底部Tabbar和ViewPager實作可滑動Tabbar。

先看下效果圖：

接下來看看Fragment實作的Tabbar：

第一種：不允許滑動

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_click_tabbar);
        initData();
        initUI();
    }

    private void initData() {
        fragmentManager = getSupportFragmentManager();
    }

    private void initUI() {
        tv_click_tab1 = (TextView) findViewById(R.id.tv_click_tab1);
        tv_click_tab2 = (TextView) findViewById(R.id.tv_click_tab2);
        tv_click_tab3 = (TextView) findViewById(R.id.tv_click_tab3);
        tv_click_tab1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(0);
            }
        });
        tv_click_tab2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(1);
            }
        });
        tv_click_tab3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(2);
            }
        });
        selecFragment(0);
    }

    private void selecFragment(int indext){
        FragmentTransaction fragemntTransaction = fragmentManager.beginTransaction();
        hideFragment(fragemntTransaction);
        switch (indext){
            case 0:
                tv_click_tab1.setSelected(true);
                tv_click_tab2.setSelected(false);
                tv_click_tab3.setSelected(false);
                if (null==oneFragment){
                    oneFragment = new OneFragment();
                    fragemntTransaction.add(R.id.content,oneFragment);
                }else {
                    fragemntTransaction.show(oneFragment);
                }
                break;
            case 1:
                tv_click_tab1.setSelected(false);
                tv_click_tab2.setSelected(true);
                tv_click_tab3.setSelected(false);
                if (null==twoFragment){
                    twoFragment = new TwoFragment();
                    fragemntTransaction.add(R.id.content,twoFragment);
                }else {
                    fragemntTransaction.show(twoFragment);
                }
                break;
            case 2:
                tv_click_tab1.setSelected(false);
                tv_click_tab2.setSelected(false);
                tv_click_tab3.setSelected(true);
                if (null==threeFragment){
                    threeFragment = new ThreeFragment();
                    fragemntTransaction.add(R.id.content,threeFragment);
                }else {
                    fragemntTransaction.show(threeFragment);
                }
                break;
            default:
                Toast.makeText(ClickTabbarActivity.this,"該功能暫未開發",Toast.LENGTH_SHORT).show();
                break;
        }
        fragemntTransaction.commit();
    }

    private void hideFragment(FragmentTransaction fragemntTransaction){
        if (fragemntTransaction==null) return;
        if (null!=oneFragment) fragemntTransaction.hide(oneFragment);
        if (null!=twoFragment) fragemntTransaction.hide(twoFragment);
        if (null!=threeFragment) fragemntTransaction.hide(threeFragment);
    }
           

第二種：使用ViewPager滑動的Tabbar

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_slide_tabbar);
        initUI();
        initData();
    }

    private void initUI() {
        viewPager = (ViewPager) findViewById(R.id.content);
        tv_click_tab1 = (TextView) findViewById(R.id.tv_click_tab1);
        tv_click_tab2 = (TextView) findViewById(R.id.tv_click_tab2);
        tv_click_tab3 = (TextView) findViewById(R.id.tv_click_tab3);
        tv_click_tab1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(0);
            }
        });
        tv_click_tab2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(1);
            }
        });
        tv_click_tab3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selecFragment(2);
            }
        });
        viewPager.addOnPageChangeListener(this);
    }

    private void initData(){
        OneFragment oneFragment = new OneFragment();
        TwoFragment twoFragment = new TwoFragment();
        ThreeFragment threeFragment = new ThreeFragment();
        List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(oneFragment);
        fragmentList.add(twoFragment);
        fragmentList.add(threeFragment);
        FragmentAdapter fragmentAdapter = new FragmentAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(fragmentAdapter);
        selecFragment(0);
    }

    private void selecFragment(int indext){
        switch (indext){
            case 0:
                tv_click_tab1.setSelected(true);
                tv_click_tab2.setSelected(false);
                tv_click_tab3.setSelected(false);
                break;
            case 1:
                tv_click_tab1.setSelected(false);
                tv_click_tab2.setSelected(true);
                tv_click_tab3.setSelected(false);
                break;
            case 2:
                tv_click_tab1.setSelected(false);
                tv_click_tab2.setSelected(false);
                tv_click_tab3.setSelected(true);
                break;
            default:
                Toast.makeText(SlideTabbarActivity.this,"該功能暫未開發",Toast.LENGTH_SHORT).show();
                break;
        }
        if (indext<3) viewPager.setCurrentItem(indext);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.i("viewPageInfo>>>","position:"+String.valueOf(position)+";offset:"+String.valueOf(positionOffset)+";OffsetPixels:"+String.valueOf(positionOffsetPixels));
    }

    @Override
    public void onPageSelected(int position) {
        selecFragment(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        Log.i("viewPageInfo>>>","state:"+String.valueOf(state));
    }
           

他們共用一個xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGray">

    <XXXX
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="@color/colorWhite">

        <TextView
            android:id="@+id/tv_click_tab1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/tabbar_radio"
            android:drawableTop="@drawable/tabbar_button1"
            android:text="@string/tab_one"
            />
        <TextView
            android:id="@+id/tv_click_tab2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/tabbar_radio"
            android:drawableTop="@drawable/tabbar_button2"
            android:text="@string/tab_two"
            />
        <TextView
            android:id="@+id/tv_click_tab3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            style="@style/tabbar_radio"
            android:drawableTop="@drawable/tabbar_button3"
            android:text="@string/tab_three"
            />
    </LinearLayout>

</LinearLayout>
           

其中XXXX第一種是FrameLayout，第二種是android.support.v4.view.ViewPager

最後附上三種Tabbar實作的連結：點選打開連結