專案實踐-MD設計-底部選單欄（一）

吳凡00發表於2019-05-12

前言

因為之前第一遍寫專案的時候，技術什麼的都是第一次學習就使用，所以期間沒有對整個MD設計有一個全面的認識，結果就是四不像。關於MD能做什麼，不能做什麼，提倡什麼，不提倡什麼，通過第一次編寫，已經有了把握。所以這一次是重新對MD的第二次實踐。過程中肯定有以前沒用過的技術，和新遇到的困難，都記錄在這裡，打上同樣的標籤，寫成一個系列，作為未來的參考。

底部導航的使用情況和原因

  • 使用情況： 用於切換不同的頁面。

  • 使用顧慮 之前我擔心的問題在於：會不會因為一個導航一直懸停在底部，顯得介面不好看。 實際上底部導航是能夠跟隨頁面滑動隱藏的。 而且事實底部導航設計好了，也不會顯得有突兀的問題。

專案實踐-MD設計-底部選單欄（一）

專案實踐-MD設計-底部選單欄（一）

如何實踐

  • 之前專案的不同模組是用Activity寫的，現在用Fragment寫

頁面使用Fragment的理由：stackoverflow.com/questions/4… It will prevent from destroying and creation of the activities and screen blinking. 避免螢幕閃爍 It is easier to hold only one BottomNavigationView. 不同的activity要保持底部導航的一致是比較困難的 Single Responsibility for handling navigation, saving and restoring states. 處理導航的狀態更方便

  • MD風格底部選單欄的樣式

樣式官網建議：www.mdui.org/design/comp… 用法：3 - 5 個頂級檢視 且 對應的檢視要可以直接訪問 顏色：啟用狀態的導航項的圖示和文字使用主色。如果底部導航欄有背景色，則使用白色或黑色的圖示和文字。 規格：寬度80-168 高度56 圖示24*24 底部導航主要用於移動裝置。如果要在桌面裝置上實現類似效果，請使用側邊欄導航。

  • 如何實現

CoordinatorLayout + BottomNavigationView + Fragment ☆參考文章1，參考文章2

BottomNavigationView開始實踐

問題一：如何在XML中放置：

參考：在CoordinatorLayout中使用BottomNavigation 我們都知道CoordinatorLayout是一個高階FragmentLayout，直接放置BottomNavigationView的時候，它會在介面的最上方，而不是直覺上認為的：名字都叫Bottom了，位置應該自動置於最下。 我們需要在不同的佈局中為它進行設定：對CoordinatorLayout用android:layout_gravity="bottom"

問題二：怎麼設定各個導航項：

參考：MD系列文章之底部導航欄 BottomNavigationView的Tab是通過menu的方式新增的，與TabLayout的Tab不同。 （TabLayout：addTab新增Tab | 與ViewPager adapter聯動設定切換Fragments） 所以先來寫menu，然後在BottomNavigationView中通過app:menu使用

	<!--BottomNavigationView程式碼-->
    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:menu="@menu/navigation_bottom"
        ></android.support.design.widget.BottomNavigationView>
        
	<!--menu程式碼-->
	<menu xmlns:android="http://schemas.android.com/apk/res/android">
	    <item android:id="@+id/navigation_bottom_folder_list"
	        android:icon="@drawable/ic_unselected_cards"
	        android:title="收藏"/>
	    ...省略
複製程式碼

效果：

在這裡插入圖片描述

問題三：導航欄如何與fragment對應以切換檢視？

參考文章1 參考2 事實上，這個問題是錯誤的。底部選單欄和TabLayout不一樣，它是不能滑動切換的，所以沒有設定對應fragment的這種說法。

那怎麼做呢？setOnNavigationItemSelectedListener 設定item的點選事件。

第一步：建立fragment - 使用newInstance函式設定Fragment的個性 第二步：在XML中設定FrameLayout用於放置fragment 第三步：設定setOnNavigationItemSelectedListener，獲取當前的點選位置，並設定對應的fragment到FrameLayout中

    <FrameLayout
        android:id="@+id/fragment_placeholder"
        android:layout_gravity="top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
複製程式碼
       bottomNavigationView = findViewById(R.id.BottomNavigation);
       bottomNavigationView.setOnNavigationItemSelectedListener(item -> onTabItemSelected(item.getItemId()));
複製程式碼

實踐反饋-新的問題

這種實踐反饋而來的問題，更多是使用原理的問題。也就是和這個系統的原理有關， 比如 不會預設設定選中狀態， setOnNavigationItemSelectedListener一定要返回true（這個應該和事件分發有關，或許不返回true就認為沒有成功設定，所以沒有改變底部）

在這裡插入圖片描述
可以看到的問題是：第一個檢視沒有載入；下方導航被選擇沒有改變狀態； 實際上原因已經在開頭說過了，就是一定要。所以程式碼如下：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_folder_list);
        initFragments();
        initView();
    }

    private void initView() {
       bottomNavigationView = findViewById(R.id.BottomNavigation);
       //一定要獲得true的返回
       bottomNavigationView.setOnNavigationItemSelectedListener(item -> onTabItemSelected(item.getItemId()));
		//這個地方來設定預設選中的狀態
       onTabItemSelected(R.id.navigation_bottom_folder_list);
   }
   
    private boolean onTabItemSelected(int id) {
        Fragment fragment = null;
        switch (id) {
        	case：//省略
        	fragment = fragments.get(0);
        	break;
        	//省略
        }
        if (fragment != null) {
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_placeholder,fragment).commit();
            return true;
        }
        return false;
    }
複製程式碼

效果如下

修改後

專案地址

github.com/Wubingyu/An… branch:project_practice clone命令：

   git clone -b project_practice git@github.com:Wubingyu/Android-Practice.git
複製程式碼

後記

在CSDN上寫，感覺它介面太亂了，而且喜歡掘金旁邊的導航。

  • 結果上來用找不到導航設定
  • 編輯部分沒有圖片，左右會不對應。
  • 編輯部分沒有粗體等效果，一堆亂七八糟的顏色顏色我給看麻了。找不到自己要找到的東西
  • 快捷鍵不夠多- -
  • 標籤只能用設定好的，不能自己設定，我想放個“自己犯錯集”標籤都不行。

相關文章