Android使用Fragment+FragmentTabHost實(shí)現(xiàn)了底部導(dǎo)航欄的效果

1、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.sytm.bscshop.activity.main.MainActivity"
    android:orientation="vertical"
    android:divider="@drawable/divider_line_h"
    android:showDividers="middle">

盛京三四線

    <FrameLayout
        android:id="@+id/real_tab_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_host">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

2、tab_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:src="@drawable/tab_index"
        android:id="@+id/tab_image"
        android:layout_marginTop="4dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="首頁(yè)"
        android:id="@+id/tab_text"
        android:layout_marginBottom="4dp"/>
</LinearLayout>

3、arrays.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--底部菜單-->
    <string-array name="tab_title">
        <item>首頁(yè)</item>
        <item>活動(dòng)</item>
        <item>分類</item>
        <item>購(gòu)物車</item>
        <item>我的</item>
    </string-array>
</resources>

4、tab_index.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/footbg1s"
        android:state_selected="true" />

    <item android:drawable="@drawable/footbg1" />
</selector>

5、divider_line_h.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!--水平分割線用line 高度大于寬度-->
    <stroke android:color="#dfdfdf" android:width="1dp" />

    <size android:height="2dp" />
</shape>

6、IndexFragment.java

public class HomeFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_cart, container, false);
    }
}

7、MainActivity.java

/**
 * 主界面
 */

public class MainActivity extends BaseActivity implements TabHost.OnTabChangeListener {

    private String[] tabTitles;
    private FragmentTabHost tabHost;
    private boolean isExit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();   //    控件初始化控件

    }
   //    控件初始化控件
    @Override
    protected void initUI() {
        /** 標(biāo)題 */
        tabTitles = getResources().getStringArray(R.array.tab_title);
        /** 圖標(biāo) */
        int[] tabImages = new int[]{R.drawable.tab_index, R.drawable.tab_activity,
                                    R.drawable.tab_class, R.drawable.tab_cart,
                                    R.drawable.tab_member};

        Class[] fragment = new Class[]{IndexFragment.class, ActivityFragment.class,
                                            ClassFragment.class, CartFragment.class,
                                            MemberFragment.class};

        tabHost = getViewById(R.id.tab_host);
        tabHost.setup(this, getSupportFragmentManager(), R.id.real_tab_content);
      /*新建Tabspec選項(xiàng)卡并設(shè)置Tab菜單欄的內(nèi)容和綁定對(duì)應(yīng)的Fragment*/
        for (int i = 0; i < tabTitles.length; i++) {
          // 給每個(gè)Tab按鈕設(shè)置標(biāo)簽、圖標(biāo)和文字
            FragmentTabHost.TabSpec tab = tabHost.newTabSpec(tabTitles[i]).setIndicator(getTabView(tabTitles, tabImages, i));
          // 將Tab按鈕添加進(jìn)Tab選項(xiàng)卡中,并綁定Fragment
            tabHost.addTab(tab, fragment[i], null);
        }

        tabHost.setOnTabChangedListener(this);
        //默認(rèn)選中是首頁(yè)
        tabHost.onTabChanged(tabTitles[0]);
    }

    @Override
    protected void bindData() {

    }

    /**
     * 獲取tabview
     * @param index
     * @return
     */
    private View getTabView(String[] tabTitles, int[] tabImages ,int index) {
        //將xml布局轉(zhuǎn)換為view對(duì)象
        View tabView = LayoutInflater.from(this).inflate(R.layout.tab_view, null);
        //利用view對(duì)象,找到布局中的組件,并設(shè)置內(nèi)容,然后返回視圖
        TextView tabTextView = getViewById(tabView, R.id.tab_text);
        tabTextView.setText(tabTitles[index]);
        ImageView tabImageView = getViewById(tabView, R.id.tab_image);
        tabImageView.setImageResource(tabImages[index]);
        return tabView;
    }

    @Override
    public void onTabChanged(String tabId) {//Tab改變的時(shí)候調(diào)用
      //設(shè)置Tab被選中的時(shí)候顏色改變
        updateTabHost(tabId);
    }

    /**
     * 刷新tabhost 顏色
     * @param tabId
     */
    private void updateTabHost(String tabId) {
        for (int i = 0; i < tabTitles.length; i++) {
            View tabView = tabHost.getTabWidget().getChildTabViewAt(i);
            TextView textView = getViewById(tabView, R.id.tab_text);
            String text = textView.getText().toString();
            if (text.equals(tabId)) {
                textView.setTextColor(Color.parseColor("#8a6432"));
            }
            else {
                textView.setTextColor(Color.parseColor("#333333"));
            }
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        switch (keyCode) {
            case KeyEvent.KEYCODE_BACK:
                if (isExit) {
                    finish();
                }
                else {
                    ToastUtil.showShort(this, "再按一次退出");
                    isExit = true;
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            isExit = false;
                        }
                    }, 2000);
                }
                return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,319評(píng)論 25 708
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程,因...
    小菜c閱讀 7,380評(píng)論 0 17
  • 最近單位里發(fā)生了一件事,整個(gè)單位都傳的沸沸揚(yáng)揚(yáng)。 聽說(shuō)那個(gè)徐主任的老婆被抓了,大家聽到這個(gè)消息都感到萬(wàn)分驚訝,因?yàn)?..
    無(wú)為菩提閱讀 456評(píng)論 9 7
  • 一、學(xué)經(jīng)日期:2017年10月22日 農(nóng)歷九月初三 晴 星期日 寶貝年齡:5周歲10個(gè)月和3周7個(gè)月...
    b0a4ca4b06a4閱讀 418評(píng)論 0 0
  • 1.TCP 和 UDPTCP:(傳輸控制協(xié)議),提供面向連接的、可靠地點(diǎn)對(duì)點(diǎn)的通信;UDP:(用戶數(shù)據(jù)報(bào)協(xié)議),提...
    夢(mèng)醒繁華閱讀 382評(píng)論 0 1

友情鏈接更多精彩內(nèi)容