實現(xiàn)底部導(dǎo)航欄切換功能

Screenshot_2019-06-28-18-06-19-573_tsapp.example.com.withyou.png

上圖是效果圖，其中底部導(dǎo)航欄是自己畫上去的，已經(jīng)實現(xiàn)但是出現(xiàn)了小bug，運行時底部導(dǎo)航欄顯示不出來，但可以正常點擊切換界面。

功能需求：底部三個按鈕分別是“首頁”，“消息”和“我的”，點擊其中一個按鈕時切換到相應(yīng)界面，字體變色，未點擊時字體為白色。
備注：目前只寫了首頁界面，其他界面用無關(guān)界面替代

activity_navigation_bar.xml底部導(dǎo)航欄界面

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".activity.NavigationBarActivity">

    <FrameLayout
        android:id="@+id/fg_contents"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="48dp"
            android:background="#ff9291"/>

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="bottom"
            android:orientation="horizontal"
            android:baselineAligned="false">

            <LinearLayout
                android:id="@+id/ll_home"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:id="@+id/home_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:text="首頁"
                    android:textColor="@color/tab_text_color"
                    android:textSize="16sp"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_message"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:id="@+id/message_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:text="消息"
                    android:textColor="@color/tab_text_color"
                    android:textSize="16sp"/>
            </LinearLayout>


            <LinearLayout
                android:id="@+id/ll_me"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:clickable="true"
                android:focusable="true">

                <TextView
                    android:id="@+id/me_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:text="我的"
                    android:textColor="@color/tab_text_color"
                    android:textSize="16sp"/>
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

上述界面用到了顏色選擇器tab_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#f6aabe" />
    <item android:state_focused="true" android:color="#f6aabe" />
    <item android:state_pressed="true" android:color="#f6aabe" />
    <item android:color="#ffffff" />
</selector>

首頁界面fragment_home.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <LinearLayout
        android:id="@+id/ll_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="114dp"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_marginStart="114dp">
        <TextView
            android:id="@+id/top_recommend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="推薦"
            android:textSize="18sp"
            android:textColor="@color/home_text_color"/>
        <View
            android:layout_width="3dp"
            android:layout_height="14dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:background="#dfdfdf"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/top_column"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="欄目"
            android:textColor="@color/home_text_color"
            android:textSize="18sp"/>
        <View
            android:layout_width="3dp"
            android:layout_height="14dp"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:background="#dfdfdf"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/top_like"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="喜歡"
            android:textColor="@color/home_text_color"
            android:textSize="18sp"/>

    </LinearLayout>
        <ImageButton
            android:id="@+id/head_top_right"
            android:layout_width="36dp"
            android:layout_height="42dp"
            android:layout_marginLeft="42dp"
            android:background="@drawable/index_index_03"
            android:layout_marginStart="42dp"/>
    </LinearLayout>

    <ImageButton
        android:id="@+id/bixin"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginHorizontal="315dp"
        android:layout_marginVertical="460dp"
        android:background="@drawable/index_index_14"
        tools:targetApi="o"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginBottom="49dp"
        android:gravity="bottom"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/head_bottom_left"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginLeft="12dp"
            android:background="@drawable/index_index_17"
            android:layout_marginStart="12dp"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:orientation="vertical"
            android:layout_marginStart="12dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="19dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="養(yǎng)樂多"
                    android:textColor="#FFFFFF"
                    android:textSize="16sp"/>

                <ImageView
                    android:id="@+id/iv_location"
                    android:layout_width="12dp"
                    android:layout_height="19dp"
                    android:layout_marginLeft="13dp"
                    android:background="@drawable/index_index_20"
                    android:layout_marginStart="13dp"/>

                <TextView
                    android:id="@+id/tv_location"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="7dp"
                    android:text="1km"
                    android:textColor="#ffffff"
                    android:textSize="11sp"
                    android:layout_marginStart="7dp"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_menu"
                android:layout_width="wrap_content"
                android:layout_height="21dp"
                android:layout_marginTop="7dp"
                android:layout_marginBottom="8dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/menu_vediochat"
                    android:layout_width="48dp"
                    android:layout_height="21dp"
                    android:background="@drawable/shape_text"
                    android:gravity="center"
                    android:text="視頻聊天"
                    android:textColor="#ffffff"
                    android:textSize="9sp"/>

                <TextView
                    android:id="@+id/menu_voice_actor_chat"
                    android:layout_width="48dp"
                    android:layout_height="21dp"
                    android:layout_marginLeft="5dp"
                    android:background="@drawable/shape_text"
                    android:gravity="center"
                    android:text="聲優(yōu)聊天"
                    android:textColor="#ffffff"
                    android:textSize="9sp"
                    android:layout_marginStart="5dp"/>

                <TextView
                    android:id="@+id/menu_play_with"
                    android:layout_width="48dp"
                    android:layout_height="21dp"
                    android:layout_marginLeft="5dp"
                    android:background="@drawable/shape_text"
                    android:gravity="center"
                    android:text="王者陪玩"
                    android:textColor="#ffffff"
                    android:textSize="9sp"
                    android:layout_marginStart="5dp"/>

                <TextView
                    android:id="@+id/menu_model"
                    android:layout_width="48dp"
                    android:layout_height="21dp"
                    android:layout_marginLeft="5dp"
                    android:background="@drawable/shape_text"
                    android:gravity="center"
                    android:text="模特"
                    android:textColor="#ffffff"
                    android:textSize="9sp"
                    android:layout_marginStart="5dp"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

接下來是功能實現(xiàn)，先初始化各組件，和fragment參數(shù)，再實現(xiàn)底部導(dǎo)航欄的點擊事件，達到點擊切換的目的。
NavigationBarActivity.java

public class NavigationBarActivity extends FragmentActivity implements View.OnClickListener {
    private LinearLayout layoutHome,layoutMessage,layoutMe;
    private TextView tvHome,tvMessage,tvMe;

    private FragmentManager mFragmentManager;
    private int containerId;
    private List<Fragment> mFragements;
    //初始化當(dāng)前可見頁碼為0
    private int nowTab=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_bar);
        initViews();
        initParams();
        //添加底欄點擊事件
        layoutHome.setOnClickListener(this);
        layoutMessage.setOnClickListener(this);
        layoutMe.setOnClickListener(this);
    }

    /**
     * 初始化首頁布局組件
     * */
    private void initViews() {
        layoutHome=(LinearLayout) findViewById(R.id.ll_home);
        layoutMessage=(LinearLayout) findViewById(R.id.ll_message);
        layoutMe=(LinearLayout) findViewById(R.id.ll_me);


        tvHome=(TextView) findViewById(R.id.home_text);
        tvMessage=(TextView) findViewById(R.id.message_text);
        tvMe=(TextView) findViewById(R.id.me_text);
    }

    /**
     * 初始化fragement參數(shù)
     * */
    private void initParams() {
        mFragmentManager=getSupportFragmentManager();
        //用于頁面切換的framelayout容器
        containerId=R.id.fg_contents;
        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        //初始化Fragement保存到List默認加載首頁
        mFragements=new ArrayList<Fragment>(4);
        mFragements.add(new HomeFragment());
        mFragements.add(null);
        mFragements.add(null);
        mFragements.add(null);
        transaction.add(containerId, mFragements.get(0));
        transaction.commit();
        onTabViewSelected(0);
    }


    @Override
    public void onClick(View view) {

        FragmentTransaction transaction = mFragmentManager.beginTransaction();
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);

        switch (view.getId()) {
            case R.id.ll_home:
                if(nowTab!=0){
                    transaction.hide(mFragements.get(nowTab));
                    nowTab=0;
                    onTabViewSelected(nowTab);
                    if(mFragements.get(nowTab)==null){
                        mFragements.set(nowTab,new HomeFragment());
                        transaction.add(containerId, mFragements.get(nowTab));
                    }else{
                        transaction.show(mFragements.get(nowTab));
                    }
                }
                break;
            case R.id.ll_message:
                if(nowTab!=1){
                    transaction.hide(mFragements.get(nowTab));
                    nowTab=1;
                    onTabViewSelected(nowTab);

                    if(mFragements.get(nowTab)==null){
                        mFragements.set(nowTab,new MessageFragment());
                        transaction.add(containerId, mFragements.get(nowTab));
                    }else{
                        transaction.show(mFragements.get(nowTab));
                    }
                }
                break;
            case R.id.ll_me:
                if(nowTab!=2){
                    transaction.hide(mFragements.get(nowTab));
                    nowTab=2;
                    onTabViewSelected(nowTab);
                    if(mFragements.get(nowTab)==null){
                        mFragements.set(nowTab,new MeFragment());
                        transaction.add(containerId, mFragements.get(nowTab));
                    }else{
                        transaction.show(mFragements.get(nowTab));
                    }
                }
                break;
            default:
                break;
        }
        transaction.commitAllowingStateLoss();
    }

    /**
     * 改變底欄圖標選擇狀態(tài)
     * @param int position
     * */
    private void onTabViewSelected(int position) {
        if(position<0 || position>3) {
            return;
        }


        tvHome.setSelected(false);
        tvMessage.setSelected(false);
        tvMe.setSelected(false);

        switch (position) {
            case 0:
                tvHome.setSelected(true);
                break;
            case 1:
                tvMessage.setSelected(true);
                break;
            case 2:
                tvMe.setSelected(true);
                break;
            default:
                break;
        }
    }
}

首頁自動顯示的界面采用Fragment碎片，繼承FragmentActivity，這里只是將界面調(diào)用過來，并沒有實現(xiàn)內(nèi)部功能。
HomeFragment.java

public class HomeFragment extends Fragment {
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }

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

}

小結(jié)：以上代碼僅供參考，還有大量需要完善的地方。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • android中沉浸式狀態(tài)欄的文章已經(jīng)滿大街了，可是在實現(xiàn)某些效果時，還是得各種搜索，測試一通后，最后還常常滿足不...
    Solang閱讀 5,844評論 3贊 34
  • 就是把自己的思想強加于他人 并一直認為自己是正確的 你不是我 你不知道我走過的路 不知道我心中的苦與樂 不要憑借著...
    面食者閱讀 414評論 0贊 0
  • 五十歲的我，像一個已經(jīng)爬上了山包的旅者。 駐足審視自己，雙腳已被沿途的多棱石子磨礪出厚厚的老繭，渾身都有被荊棘劃過...
    蝶藍閱讀 62評論 0贊 0
  • 我向神的禱告 主啊，求你讓我看見我該做的工。若我手里現(xiàn)在做的，不是你要我做的，那么請讓我知道。若你要我做的，是除了...
    _Dorcas_張閱讀 251評論 0贊 0
  • 極客學(xué)院 Wiki Weekly Newsletter(2015年10月4日~9日） 《Android Weekl...
    極客學(xué)院Wiki閱讀 446評論 0贊 3

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