單Activity多Fragment實現(xiàn)底部導航器

最近由于Android基礎(chǔ)知識講解需要,采用單Activity多Fragment實現(xiàn)類似QQ底部導航器示例褂痰,這種開發(fā)模式廣泛應(yīng)用于App開發(fā)直晨,比如QQ,微信搀军,新浪等,關(guān)于Android底部導航欄的實現(xiàn)方式特別多勇皇,實現(xiàn)也是五花八門罩句,同時Google在自己推出的Material design中也增加了Bottom Navigation導航控制,實現(xiàn)起來更加簡單敛摘,且支持動態(tài)效果更加酷炫门烂,但是因為是基礎(chǔ)的知識,所以打算通過自定義來實現(xiàn)兄淫,不使用Bottom Navigation(如果是實際的項目開發(fā)可以考慮使用哈~~)屯远,希望對初學者有所幫助。

BottomNavigationBar 地址:https://github.com/Ashok-Varma/BottomNavigation

分析

整體區(qū)域分為兩部分:底部的導航區(qū)域和其余的內(nèi)容區(qū)域捕虽,內(nèi)容區(qū)域使用Fragment最為UI展示慨丐,底部導航區(qū)域添加點擊事件,點擊TAB切換Fragment,并做字體顏色和圖片的切換泄私,在切換上使用add()和hide()的方式房揭,不使用replase(),至于兩者的區(qū)別晌端,這里就不再說明了捅暴,感興趣的話可以谷歌。

整體結(jié)構(gòu)

底部導航通常由圖片和文字組成斩松,上面為ImageView伶唯,下面為TextView

底部導航

底部Bottom

使用布局使用RelativeLayout,添加weight惧盹,平分屏幕寬度

<?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="@dimen/bottom_height"
    android:background="@color/base_white"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray_line" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/layout_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:id="@+id/img_home"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/icon_home_pressed" />

                <TextView
                    android:id="@+id/tv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/img_home"
                    android:layout_centerHorizontal="true"
                    android:text="首頁"
                    android:textColor="@color/bottom_text_color_pressed"
                    android:textSize="12sp" />
            </RelativeLayout>

        </RelativeLayout>

        <RelativeLayout

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/layout_health"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:id="@+id/img_health"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/icon_health_normal" />

                <TextView
                    android:id="@+id/tv_health"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/img_health"
                    android:layout_centerHorizontal="true"
                    android:text="健康"
                    android:textColor="@color/bottom_text_color_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </RelativeLayout>

        <RelativeLayout

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/layout_msg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:id="@+id/img_msg"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/icon_msg_normal" />

                <TextView
                    android:id="@+id/tv_msg"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/img_msg"
                    android:layout_centerHorizontal="true"
                    android:text="消息"
                    android:textColor="@color/bottom_text_color_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </RelativeLayout>
        >

        <RelativeLayout

            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/layout_usercenter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">

                <ImageView
                    android:id="@+id/img_usercenter"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_centerHorizontal="true"
                    android:src="@mipmap/icon_user_normal" />

                <TextView
                    android:id="@+id/tv_usercenter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/img_usercenter"
                    android:layout_centerHorizontal="true"
                    android:text="我的"
                    android:textColor="@color/bottom_text_color_normal"
                    android:textSize="12sp" />
            </RelativeLayout>
        </RelativeLayout>
        >
    </LinearLayout>

</LinearLayout>

activity_main.xml

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

</LinearLayout>

MainActivity

public class MainActivity extends BaseActivity implements View.OnClickListener {
    private RelativeLayout layout_home;
    private RelativeLayout layout_health;
    private RelativeLayout layout_msg;
    private RelativeLayout layout_usercenter;

    private ImageView img_home;
    private ImageView img_health;
    private ImageView img_msg;
    private ImageView img_usercenter;

    private TextView tv_home;
    private TextView tv_health;
    private TextView tv_msg;
    private TextView tv_usercenter;

    private Fragment[] fragments;
    private int currentIndex;
    private int index;

    private int selectColor;
    private int unSelectColor;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    @Override
    public void init() {
        initViews();
        initEvent();
        initData();

    }

    public void initViews(){
        layout_health=(RelativeLayout)findViewById(R.id.layout_health);
        layout_home=(RelativeLayout)findViewById(R.id.layout_home);
        layout_msg=(RelativeLayout)findViewById(R.id.layout_msg);
        layout_usercenter=(RelativeLayout)findViewById(R.id.layout_usercenter);

        img_home=(ImageView)findViewById(R.id.img_home);
        img_health=(ImageView)findViewById(R.id.img_health);
        img_msg=(ImageView)findViewById(R.id.img_msg);
        img_usercenter=(ImageView)findViewById(R.id.img_usercenter);

        tv_home=(TextView)findViewById(R.id.tv_home);
        tv_health=(TextView)findViewById(R.id.tv_health);
        tv_msg=(TextView)findViewById(R.id.tv_msg);
        tv_usercenter=(TextView)findViewById(R.id.tv_usercenter);
    }

    public void initEvent(){
        layout_home.setOnClickListener(this);
        layout_health.setOnClickListener(this);
        layout_msg.setOnClickListener(this);
        layout_usercenter.setOnClickListener(this);
    }

    public void initData(){
        selectColor=getResources().getColor(R.color.bottom_text_color_pressed);
        unSelectColor=getResources().getColor(R.color.bottom_text_color_normal);

        fragments=new Fragment[4];
        fragments[0]= HomeFragment.getInstance();
        fragments[1]= HealthFragment.getInstance();
        fragments[2]= MsgFragment.getInstance();
        fragments[3]= UserCenterFragment.getInstance();
        getSupportFragmentManager().beginTransaction().add(R.id.frame_content,fragments[0]).commit();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.layout_home:
                index=0;
                setTabs(index);
                break;
            case R.id.layout_health:
                index=1;
                setTabs(index);
                break;
            case R.id.layout_msg:
                index=2;
                setTabs(index);
                break;
            case R.id.layout_usercenter:
                index=3;
                setTabs(index);
                break;
        }
        if(currentIndex!=index){
            FragmentManager fm=getSupportFragmentManager();
            FragmentTransaction ft=fm.beginTransaction();
            ft.hide(fragments[currentIndex]);
            if(!fragments[index].isAdded()){
                ft.add(R.id.frame_content,fragments[index]);
            }
            ft.show(fragments[index]).commit();
        }
        currentIndex=index;
    }

    public void setTabs(int pos){
        resetColor();
        switch (pos){
            case 0:
                img_home.setImageResource(R.mipmap.icon_home_pressed);
                tv_home.setTextColor(selectColor);
                break;
            case 1:
                img_health.setImageResource(R.mipmap.icon_health_pressed);
                tv_health.setTextColor(selectColor);
                break;
            case 2:
                img_msg.setImageResource(R.mipmap.icon_msg_pressed);
                tv_msg.setTextColor(selectColor);
                break;
            case 3:
                img_usercenter.setImageResource(R.mipmap.icon_user_pressed);
                tv_usercenter.setTextColor(selectColor);
                break;
        }

    }
    public void resetColor(){
        img_home.setImageResource(R.mipmap.icon_home_normal);
        img_health.setImageResource(R.mipmap.icon_health_normal);
        img_msg.setImageResource(R.mipmap.icon_msg_normal);
        img_usercenter.setImageResource(R.mipmap.icon_user_normal);
        tv_home.setTextColor(unSelectColor);
        tv_health.setTextColor(unSelectColor);
        tv_msg.setTextColor(unSelectColor);
        tv_usercenter.setTextColor(unSelectColor);

    }

}

四個Fragment只是一個簡單的布局乳幸,里面放置了一個TextView,這里就不再貼出來O.o.

效果圖預(yù)覽:

效果圖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市钧椰,隨后出現(xiàn)的幾起案子粹断,更是在濱河造成了極大的恐慌,老刑警劉巖嫡霞,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瓶埋,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機养筒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門曾撤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晕粪,你說我怎么就攤上這事挤悉。” “怎么了巫湘?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵装悲,是天一觀的道長。 經(jīng)常有香客問我尚氛,道長诀诊,這世上最難降的妖魔是什么侠姑? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任囱持,我火速辦了婚禮眉孩,結(jié)果婚禮上趾疚,老公的妹妹穿的比我還像新娘网棍。我一直安慰自己区宇,他們只是感情好固灵,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布降狠。 她就那樣靜靜地躺著磷杏,像睡著了一般溜畅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上极祸,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天慈格,我揣著相機與錄音,去河邊找鬼遥金。 笑死浴捆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的稿械。 我是一名探鬼主播选泻,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼美莫!你這毒婦竟也來了页眯?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤厢呵,失蹤者是張志新(化名)和其女友劉穎窝撵,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體襟铭,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡碌奉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年短曾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赐劣。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡嫉拐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出魁兼,到底是詐尸還是另有隱情椭岩,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布璃赡,位于F島的核電站,受9級特大地震影響献雅,放射性物質(zhì)發(fā)生泄漏碉考。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一挺身、第九天 我趴在偏房一處隱蔽的房頂上張望侯谁。 院中可真熱鬧,春花似錦章钾、人聲如沸墙贱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惨撇。三九已至,卻和暖如春府寒,著一層夾襖步出監(jiān)牢的瞬間魁衙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工株搔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留剖淀,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓纤房,卻偏偏與公主長得像纵隔,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子炮姨,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容