BottomNavigationView是design包提供的底部導航欄,樣子跟市面上常見的底欄差很少,可是點選的時候會帶有一點動畫效果,放張圖:
html
首先保證design包被項目引入java
compile 'com.android.support:design:26.0.0-alpha1'複製代碼
以後創建menu資源文件,以上圖爲例:
在/res/menu/bottom_navigation.xml
中加入以下代碼android
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="camera"
android:icon="@drawable/ic_camera_black_24dp"
android:id="@+id/menu_camera"/>
<item android:title="palette"
android:icon="@drawable/ic_palette_black_24dp"
android:id="@+id/menu_palette"/>
<item android:title="security"
android:icon="@drawable/ic_security_black_24dp"
android:id="@+id/menu_security"/>
<item android:title="setting"
android:icon="@drawable/ic_settings_black_24dp"
android:id="@+id/menu_setting"/>
</menu>複製代碼
在佈局文件中使用BottomNavigationView:算法
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_navigation"
android:background="?android:attr/windowBackground"
android:id="@+id/bottom_navigation_view"/>複製代碼
只須要使用app:menu="@menu/bottom_navigation"
把菜單配置進來就能夠看到gif中的效果了。BottomNavigationView爲咱們提供了幾個自定義屬性api
以圖標着色爲例,在res/color/bottom_nav_icon_color.xml
中添加以下代碼:數組
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="@color/colorAccent"/>
<item android:state_checked="false"
android:color="@android:color/black"/>
</selector>複製代碼
selector中只須要定義state_checked爲true/false的item就能夠了,BottomNavigationView只會用到這兩種狀態,因此上述代碼會將選中的圖標染爲colorAccent,未選中染爲黑色。itemTextColor 與他的定義方式徹底同樣,就不貼代碼了。若是對選項的background不滿意,能夠自行定義drawable,舉個例子:
在res/drawable-v21/item_background.xml
中加入以下代碼安全
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@android:color/holo_red_light">
</ripple>複製代碼
在res/drawable/item_background.xml
中加入以下代碼bash
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_red_light" />
</shape>複製代碼
什麼,你問我爲何寫兩套drawable?哈哈哈哈哈哈哈哈哈...嗝架構
以後咱們把寫過的資源都配置進去,就能夠看到下面這個小可愛啦!app
app:itemIconTint="@color/bottom_nav_icon_color"
app:itemTextColor="@color/bottom_nav_text_color"
app:itemBackground="@drawable/item_background"複製代碼
好了我認可這一點也不可愛,並且配置很麻煩,因此這裏給出一種稍微簡單點的配置方式,但不能像上面那種能夠控制那麼多細節,大概是這個樣子:
res/values/styles.xml
中添加一個style
<style name="MyBottomNavigationStyle" parent="Widget.Design.BottomNavigationView">
//ripple的顏色
<item name="colorControlHighlight">@android:color/holo_red_light</item>
//選中時的顏色
<item name="colorPrimary">@android:color/holo_green_dark</item>
//未選中的顏色
<item name="android:textColorSecondary" >@android:color/black</item>
</style>複製代碼
以後將這個style配置進去就行了,代碼以下:
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_navigation"
android:theme="@style/MyBottomNavigationStyle"
android:background="?android:attr/windowBackground"
android:id="@+id/bottom_navigation_view"/>複製代碼
以後就是點擊監聽的問題了,看代碼
BottomNavigationView navigationView = findViewById(R.id.bottom_navigation_view);
navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_camera:
break;
case R.id.menu_palette:
break;
}
return true;
}
});複製代碼
被點擊的menuItem會在onNavigationItemSelected方法中回調,以後根據id作操做就行了,注意,若是此方法返回true,則認爲事件被處理,BottomNavigationView將播放選項切換動畫,若是返回false,點擊以後是沒有效果的。
BottomNavigationView 還提供了一個OnNavigationItemReselectedListener用於監聽已選中的Item被重複點擊的狀況,在這種狀況下,若是設置了此監聽,BottomNavigationView 將不回調OnNavigationItemSelectedListener,好比咱們可使用一個OnNavigationItemReselectedListener的空實現來屏蔽item被重複點擊的狀況。
最後須要說明的是,BottomNavigationView 支持經過代碼的方式切換菜單選項,以上圖舉例,若是咱們想切換到palette菜單的話:
navigationView.setSelectedItemId(R.id.menu_palette);複製代碼
傳入選項id便可。
好了下面進入正題。
BottomNavigationView基於Android的Menu框架構建,因此,視圖方面,主要角色爲MenuView、ItemView兩個接口,對應的實現分別是BottomNavigationMenuView、BottomNavigationItemView,一個負責選項視圖,一個負責總體佈局。數據及交互處理方面,主要角色爲Menu(MenuBuilder)、MenuItem、MenuPresenter三個接口,實現類分別爲BottomNavigationMenu、MenuItemImpl、BottomNavigationPresenter。他們之間的依賴關係見UML圖
其實剛剛並無提到BottomNavigationView,因此咱們從這個類入手,瞭解一下整個源碼的細節。BottomNavigationView的工做很少,主要用於爲使用者暴露交互api,好比設置着色、設置背景等等,另一個做用就是建立上面提到的各類角色。咱們來看一下他的構造函數:
public BottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
ThemeUtils.checkAppCompatTheme(context);
//一、建立MenuBuilder
mMenu = new BottomNavigationMenu(context);
//二、建立MenuView
mMenuView = new BottomNavigationMenuView(context);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.gravity = Gravity.CENTER;
//wrapContent並居中(BottomNavigationView自己是一個FrameLayout)
mMenuView.setLayoutParams(params);
//三、進行注入
mPresenter.setBottomNavigationMenuView(mMenuView);
mPresenter.setId(MENU_PRESENTER_ID);
mMenuView.setPresenter(mPresenter);
mMenu.addMenuPresenter(mPresenter);
mPresenter.initForMenu(getContext(), mMenu);
// 四、解析xml屬性並設置
TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs,
R.styleable.BottomNavigationView, defStyleAttr,
R.style.Widget_Design_BottomNavigationView);
//省略設置各類屬性的代碼...
//大概操做就是若是沒有在xml中配置,就建立默認的
if (a.hasValue(R.styleable.BottomNavigationView_menu)) {
//加載菜單並建立相應View
inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0));
}
a.recycle();
addView(mMenuView, params);
if (Build.VERSION.SDK_INT < 21) {
//5.0之前的在頂部加一個灰色的View當作陰影
addCompatibilityTopDivider(context);
}
//五、監聽菜單點擊並向外傳遞事件
mMenu.setCallback(new MenuBuilder.Callback() {...});
}複製代碼
代碼不復雜,但有幾個細節須要注意一下。第一部分中建立的BottomNavigationMenu是MenuBuilder的子類,繼承的目的是爲了控制選項數量及設置item的屬性,他覆寫了父類的addInternal方法:
@Override
protected MenuItem addInternal(int group, int id, int categoryOrder, CharSequence title) {
//數量限制
if (size() + 1 > MAX_ITEM_COUNT) {
throw new IllegalArgumentException(
"Maximum number of items supported by BottomNavigationView is " + MAX_ITEM_COUNT
+ ". Limit can be checked with BottomNavigationView#getMaxItemCount()");
}
stopDispatchingItemsChanged();
final MenuItem item = super.addInternal(group, id, categoryOrder, title);
if (item instanceof MenuItemImpl) {
//設爲惟一可點擊
((MenuItemImpl) item).setExclusiveCheckable(true);
}
startDispatchingItemsChanged();
return item;
}複製代碼
此方法在解析menu文件時被調用。第一句的MAX_ITEM_COUNT
是5,限制選項個數,多了就拋異常,以後注意這一句((MenuItemImpl) item).setExclusiveCheckable(true);
將這個Item設置爲惟一可選中的,能夠理解爲將這個選項設置爲單選的。舉個例子,對於一個menu group來講,當某個帶有Exclusive標記的Item被點選時,menu框架會自動取消選中其餘的帶有Exclusive標記的選項,從而達到單選的目的。對應的咱們的BottomNavigationView其實就是這種狀況,他在這個方法裏將每一個Item設置爲ExclusiveCheckable,這樣就很方便的實現一個item被checked,另外一個就unchecked的效果了。
你們可能注意到源碼中的stopDispatchingItemsChanged()
、startDispatchingItemsChanged()
兩個方法了,坦率的講,我是實在沒看出有什麼用,你們也不要糾結了,這鍋26-alpha版原本背。
而後咱們回來看第三部分,一通注入,不跟源碼了,直接解釋一下:mPresenter.setBottomNavigationMenuView(mMenuView);
將MenuView注入到presenter中mMenuView.setPresenter(mPresenter);
將presenter注入到MenuView中
這樣二者互相持有了。以後是mMenu.addMenuPresenter(mPresenter)
將presenter注入到menu中,最後調用mPresenter.initForMenu(getContext(), mMenu)
將menu注入到presenter中,這樣他倆也互相持有了,同時presenter會將menu注入到MenuView中,這樣整個流程就結束了,你們能夠對照uml圖再捋一遍。
第四部分中傳入的默認style爲R.style.Widget_Design_BottomNavigationView
,源碼位置爲sdk/extra/android/m2repository/com/android/support/design/26.0.0-alpha1
。解壓aar文件後能夠在res/values/values.xml
中找到以下定義:
<style name="Widget.Design.BottomNavigationView" parent="">
<item name="itemBackground">?attr/selectableItemBackgroundBorderless</item>
<item name="elevation">@dimen/design_bottom_navigation_elevation</item>
</style>複製代碼
因此其實安卓幫咱們默認定義了background和elevation,咱們才能夠直接看到陰影和使用colorControlHighlight
來改變ripple的顏色。關於elevation這裏在說一句,源碼中使用的是ViewCompat的setElevation方法設置的,但在5.0以前的版本,對應的方法是空實現的,因此纔會有addCompatibilityTopDivider(context);
手動作一步兼容處理。在5.0以後的版本,記得必定要給BottomNavigationView設置背景色,不然elevation就無效了。
最後關於inflateMenu(a.getResourceId(R.styleable.BottomNavigationView_menu, 0));
這句,涉及的內容比較多,除了加載菜單以外,還包括了建立視圖等操做,後面會再提到。
到此爲止,BottomNavigationView比較主線的工做就完成了,下面再來看一下BottomNavigationMenuView。
其實它纔是咱們真正看到的底欄,繼承自ViewGroup,完成對底欄中每個選項視圖(BottomNavigationItemView)的建立、測量、佈局、更新等操做。下面給出幾個全局變量的含義:
private final int mInactiveItemMaxWidth; //未選中ItemView最大寬度
private final int mInactiveItemMinWidth; //未選中ItemView的最小寬度
private final int mActiveItemMaxWidth; //選中的ItemView的最大寬度
private final int mItemHeight; //ItemView高度
private final Pools.Pool<BottomNavigationItemView> mItemPool //ItemView回收池
private boolean mShiftingMode //是否爲漂移模式
private BottomNavigationItemView[] mButtons; //存儲ItemView數組複製代碼
不出意外的話,前四個變量是設計師給出的參數。從這幾個參數中咱們能夠大概推斷出設計師的意圖:ItemView的高度是定死的,而寬度的話會比較靈活。因爲只給出了選中的ItemView的最大寬度,因此,在漂移模式的狀況下,算法上應儘可能讓選中的Item越大越好,但不要超過maxWidth,有些狀況下(如橫屏)底欄的空間會很充足,這時候也要對未選中的選項的最大寬度加以限制,避免圖標間距過大。固然這也只是我的的猜想,你們權當參考。咱們直接來看一下onMeasure方法:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//父佈局寬度
final int width = MeasureSpec.getSize(widthMeasureSpec);
//Item個數
final int count = getChildCount();
//Item高度佈局參數
final int heightSpec = MeasureSpec.makeMeasureSpec(mItemHeight, MeasureSpec.EXACTLY);
//若是爲漂移模式
if (mShiftingMode) {
final int inactiveCount = count - 1;
final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
int extra = width - activeWidth - inactiveWidth * inactiveCount;
for (int i = 0; i < count; i++) {
mTempChildWidths[i] = (i == mSelectedItemPosition) ? activeWidth : inactiveWidth;
if (extra > 0) {
mTempChildWidths[i]++;
extra--;
}
}
//非漂移模式
} else {
final int maxAvailable = width / (count == 0 ? 1 : count);
final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
int extra = width - childWidth * count;
for (int i = 0; i < count; i++) {
mTempChildWidths[i] = childWidth;
if (extra > 0) {
mTempChildWidths[i]++;
extra--;
}
}
}
//調用每個子View的measure確立子佈局寬高
int totalWidth = 0;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == GONE) {
continue;
}
child.measure(MeasureSpec.makeMeasureSpec(mTempChildWidths[i], MeasureSpec.EXACTLY),
heightSpec);
ViewGroup.LayoutParams params = child.getLayoutParams();
params.width = child.getMeasuredWidth();
totalWidth += child.getMeasuredWidth();
}
//確立本身的寬高
setMeasuredDimension(
View.resolveSizeAndState(totalWidth,
MeasureSpec.makeMeasureSpec(totalWidth, MeasureSpec.EXACTLY), 0),
View.resolveSizeAndState(mItemHeight, heightSpec, 0));
}複製代碼
你們能夠看到,漂移模式跟非漂移模式的寬度測量方式是不一樣的,經過mShiftingMode控制。有沒有很疑惑mShiftingMode在什麼時機被賦值的?坦率的講,mShiftingMode必定在onMeasure以前就被賦值了,並且觸發的時機就是前面沒有詳細解釋的inflate方法。但按照咱們正常的編碼思路,mShiftingMode徹底能夠在onMeasure方法中根據參數count來決定,並且有很高的安全性,但Google爲何沒有這樣作?還記得開頭提到的修改樣式的那篇文章嗎,有沒有想過憑什麼簡簡單單的反射一個變量就能把樣式改了?爲何那波操做看似驚心動魄卻又穩如狗?細思極恐了吧。扯遠了,下面咱們來分析一下寬度計算的算法,以漂移模式爲例,我把代碼摘出來:
//未選中的item的數量
final int inactiveCount = count - 1;
//先根 據未選中的item 的最小寬度來計算一個 選中的item 的寬度
final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
//若是這個寬度太大,則限制爲mActiveItemMaxWidth
final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
//選中的item的 寬度 確立下來以後,平分剩餘寬度做爲 未選中的item的 寬度
final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
//但這個寬度可能過大,限制爲mInactiveItemMaxWidth
final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
//extra部分
int extra = width - activeWidth - inactiveWidth * inactiveCount;
for (int i = 0; i < count; i++) {
mTempChildWidths[i] = (i == mSelectedItemPosition) ? activeWidth : inactiveWidth;
if (extra > 0) {
mTempChildWidths[i]++;
extra--;
}
}複製代碼
前幾行的註釋已經寫的很是清楚了,至於爲何會出現一個extra部分,我想是在作除法的過程當中,可能會產生精度損失,因此理想狀況下,extra的值應該爲零。你們能夠看到,在for循環中,每一趟循環都會從extra中拿出一個像素(若是extra一直大於0的話)來彌補這個損失,至關於把不能整除的餘數一個個的分給子View,送完即止。
非漂移的狀況下算法更爲簡單,這裏就再也不分析了,通過measure以後會在onLayout方法中橫向排列他們,測量和佈局的流程就結束了。下面來看一下buildMenuView方法:
public void buildMenuView() {
//移除全部子View
removeAllViews();
//回收移除的View
if (mButtons != null) {
for (BottomNavigationItemView item : mButtons) {
mItemPool.release(item);
}
}
if (mMenu.size() == 0) {
mSelectedItemId = 0;
mSelectedItemPosition = 0;
mButtons = null;
return;
}
mButtons = new BottomNavigationItemView[mMenu.size()];
//在這裏設置ShiftingMode
mShiftingMode = mMenu.size() > 3;
for (int i = 0; i < mMenu.size(); i++) {
//掛起presenter
mPresenter.setUpdateSuspended(true);
mMenu.getItem(i).setCheckable(true);
//激活presenter
mPresenter.setUpdateSuspended(false);
//從緩衝池中獲取或直接new一個BottomNavigationItemView
BottomNavigationItemView child = getNewItem();
mButtons[i] = child;
child.setIconTintList(mItemIconTint);
child.setTextColor(mItemTextColor);
child.setItemBackground(mItemBackgroundRes);
child.setShiftingMode(mShiftingMode);
//根據MenuItem的數據設置BottomNavigationItemView的顯示效果
child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
child.setItemPosition(i);
//添加點擊監聽
child.setOnClickListener(mOnClickListener);
addView(child);
}
mSelectedItemPosition = Math.min(mMenu.size() - 1, mSelectedItemPosition);
//將mSelectedItemPosition位置的MenuItem設置爲選中狀態,這將會引發視圖更新
mMenu.getItem(mSelectedItemPosition).setChecked(true);
}複製代碼
buildMenuView
的主要做用是建立多個BottomNavigationItemView並經過addView
添加爲本身的子View。與之對應的一個方法是updateMenuView
,他會一次性更新全部的BottomNavigationItemView。注意,更新有多是菜單項的添加或刪除引發的,因此每當出現這種狀況,他的作法是把全部View都刪掉,重建菜單,因而你會看到開頭的第一句。但重建菜單很粗暴,會影響性能,因而這裏又引入了一個回收池。這個回收池是v4包提供的一個工具類,仍是很是實用的,你們能夠嘗試用起來。可能你們注意到了下面這段代碼:
//掛起presenter
mPresenter.setUpdateSuspended(true);
//設置爲可選中的
mMenu.getItem(i).setCheckable(true);
//激活presenter
mPresenter.setUpdateSuspended(false);複製代碼
這個掛起顯得很是扎眼,畢竟安卓的UI操做是單線程的。並且這個所謂的掛起,只是設置一個Boolean類型的變量mUpdateSuspended
:
public void setUpdateSuspended(boolean updateSuspended) {
mUpdateSuspended = updateSuspended;
}複製代碼
那這就顯得很蹊蹺,讓咱們看一下「臨界區」中都作了些什麼:
@Override
public MenuItem setCheckable(boolean checkable) {
final int oldFlags = mFlags;
//根據checkable設置標誌位,位與取反是清空,或操做是設置標誌位
mFlags = (mFlags & ~CHECKABLE) | (checkable ? CHECKABLE : 0);
if (oldFlags != mFlags) {
//看這裏,傳入了false
mMenu.onItemsChanged(false);
}
return this;
}複製代碼
在checkable發生變化的狀況下會調用到mMenu.onItemsChanged
,跟進之:
public void onItemsChanged(boolean structureChanged) {
if (!mPreventDispatchingItemsChanged) {
if (structureChanged) {
mIsVisibleItemsStale = true;
mIsActionItemsStale = true;
}
//structureChanged此時爲false
dispatchPresenterUpdate(structureChanged);
} else {
mItemsChangedWhileDispatchPrevented = true;
if (structureChanged) {
mStructureChangedWhileDispatchPrevented = true;
}
}
}複製代碼
在onItemsChanged
方法中會調用到dispatchPresenterUpdate
方法:
private void dispatchPresenterUpdate(boolean cleared) {
if (mPresenters.isEmpty()) return;
stopDispatchingItemsChanged();
for (WeakReference<MenuPresenter> ref : mPresenters) {
final MenuPresenter presenter = ref.get();
if (presenter == null) {
mPresenters.remove(ref);
} else {
//看這裏!此時cleared爲false
presenter.updateMenuView(cleared);
}
}
startDispatchingItemsChanged();
}複製代碼
以後會調用到presenter.updateMenuView(cleared);
,繼續跟進
@Override
public void updateMenuView(boolean cleared) {
//由於我恰好碰見你?
if (mUpdateSuspended) return;
if (cleared) {
//mMenuView就是BottomNavigationMenuView
mMenuView.buildMenuView();
} else {
//若是沒有第一句的話,按照clear的值應該會走這裏
mMenuView.updateMenuView();
}
}複製代碼
咱們終於發現了mUpdateSuspended
的做用,你應該還沒亂吧?從新梳理一下,在setCheckable()
以前,首先調用了presenter的setUpdateSuspended()
將mUpdateSuspended
置爲false,以後的setCheckable()
會展轉調用到presenter的updateMenuView()
,此時由於mUpdateSuspended
爲false,函數直接return了,並無執行,不然可能會調用到BottomNavigationMenuView
的updateMenuView
方法,也就是那個一次性更新全部ItemView的方法,這是咱們不肯意看到的,畢竟setCheckable()
出如今一個循環之中,咱們徹底有理由讓這個循環結束再統一更新他們。
再從新回過頭來看這個函數的命名,就顯得頗有意思了,雖然不是真的操做進程,但presenter確實不工做了,等到mUpdateSuspended
設置爲true的時候再激活它。值得一說的是,有的時候掛起presenter不是爲了性能,而是不掛起presenter代碼就會死循環。。好比咱們在mMenuView
的updateMenuView
方法中調用setCheckable()
,就會展轉調用回updateMenuView
。。具體我就很少說了,把代碼寫成這樣也是沒誰了。。
再回到buildMenuView
,其中的最後一句mMenu.getItem(mSelectedItemPosition).setChecked(true);
跟setCheckable()
有差很少的調用鏈,但由於沒有掛起,因此會展轉調用到mMenuView.updateMenuView();
,咱們仍是看一下吧:
public void updateMenuView() {
final int menuSize = mMenu.size();
if (menuSize != mButtons.length) {
// The size has changed. Rebuild menu view from scratch.
buildMenuView();
return;
}
int previousSelectedId = mSelectedItemId;
for (int i = 0; i < menuSize; i++) {
mPresenter.setUpdateSuspended(true);
MenuItem item = mMenu.getItem(i);
if (item.isChecked()) {
mSelectedItemId = item.getItemId();
mSelectedItemPosition = i;
}
//根據MenuItem更新BottomNavigationItemView
mButtons[i].initialize((MenuItemImpl) item, 0);
mPresenter.setUpdateSuspended(false);
}
if (previousSelectedId != mSelectedItemId) {
//經過TransitionManager執行動畫
TransitionManager.beginDelayedTransition(this);
}
}複製代碼
你可能會注意到,這裏也有presenter的掛起,但我能夠負責任的告訴你們,這裏的掛起並有什麼做用,這口鍋26-alpha必須背!這徹底就是版本迭代的時候忘記刪除這段代碼了!不信你們能夠去看25版本的源碼,他確定是忘記刪了!別問我花了多久才弄明白的!動畫切換部分使用的是support包中的TransitionManager,支持到4.0.3,不是那個5.0的TransitionManager,因此兼容性上沒有問題。可是!BottomNavigationMenuView
的全局變量中有一個private final TransitionSet mSet;
,並且還有這個
mSet = new AutoTransition();
mSet.setOrdering(TransitionSet.ORDERING_TOGETHER);
mSet.setDuration(ACTIVE_ANIMATION_DURATION_MS);
mSet.setInterpolator(new FastOutSlowInInterpolator());
mSet.addTransition(new TextScale());複製代碼
而後我就找啊,這個mSet在哪用的啊?我就想把那個寫源碼的人叫過來,問問這個mSet在哪用的?恩?在哪?是否是在25版本里用的?心累。
還剩下最後一個,BottomNavigationItemView
,負責MenuItem的顯示工做,自己是個FrameLayout,經過佈局文件加載子View:sdk/extra/android/m2repository/com/android/support/design/26.0.0-alpha1/res/layout/design_bottom_navigation_item.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@+id/icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/design_bottom_navigation_margin" android:layout_marginBottom="@dimen/design_bottom_navigation_margin" android:duplicateParentState="true" />
<android.support.design.internal.BaselineLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:clipToPadding="false" android:paddingBottom="10dp" android:duplicateParentState="true">
<TextView android:id="@+id/smallLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="@dimen/design_bottom_navigation_text_size" android:singleLine="true" android:duplicateParentState="true" />
<TextView android:id="@+id/largeLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:textSize="@dimen/design_bottom_navigation_active_text_size" android:singleLine="true" android:duplicateParentState="true" />
</android.support.design.internal.BaselineLayout>
</merge>複製代碼
文字部分經過BaseLineLayout展現,這個Layout的做用是將子View對齊BaseLine排布在一塊兒。構造函數沒什好說的,咱們重點關注一下setChecked
方法:
@Override
public void setChecked(boolean checked) {
//旋轉中心,用於scale
mLargeLabel.setPivotX(mLargeLabel.getWidth() / 2);
mLargeLabel.setPivotY(mLargeLabel.getBaseline());
mSmallLabel.setPivotX(mSmallLabel.getWidth() / 2);
mSmallLabel.setPivotY(mSmallLabel.getBaseline());
if (mShiftingMode) {
if (checked) {
LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
//被選中狀況下將Gravity設置爲TOP,由於未被選中下只是居中,因此TransitionManager會施加縱向的位移動畫
iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
iconParams.topMargin = mDefaultMargin;
//此方法會引發父佈局從新測量,寬度增長,從而觸發橫向的位移動畫
mIcon.setLayoutParams(iconParams);
//無論是checked仍是unchecked,都是經過改變mLargeLabel的scale實現
mLargeLabel.setVisibility(VISIBLE);
mLargeLabel.setScaleX(1f);
mLargeLabel.setScaleY(1f);
} else {
//...
}
mSmallLabel.setVisibility(INVISIBLE);
} else {
if (checked) {
LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();
iconParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
iconParams.topMargin = mDefaultMargin + mShiftAmount;
mIcon.setLayoutParams(iconParams);
//經過mLargeLabel、mSmallLabel的輪番顯示來實現
mLargeLabel.setVisibility(VISIBLE);
mSmallLabel.setVisibility(INVISIBLE);
mLargeLabel.setScaleX(1f);
mLargeLabel.setScaleY(1f);
//雖然mSmallLabel被隱藏了,但將其放大到mLargeLabel的大小以便設置爲unchecked時能夠得到天然的過渡動畫
mSmallLabel.setScaleX(mScaleUpFactor);
mSmallLabel.setScaleY(mScaleUpFactor);
} else {
//...
}
}
refreshDrawableState();
}複製代碼
此方法根據參數checked切換視圖狀態。經過註釋能夠發現,因爲TransitionManager的存在,BottomNavigationItemView並不須要處理動畫過渡,仍是很是方便的。最後一句話refreshDrawableState();
使得BottomNavigationItemView也不須要親自處理顏色切換,這纔是正確的編碼姿式。關於drawable狀態切換,你們能夠參考洋神的這篇文章。
回到文章開頭跳過的inflateMenu
方法,咱們從這裏入手,研究一下BottomNavigationView是如何初始化的。
public void inflateMenu(int resId) {
mPresenter.setUpdateSuspended(true);
getMenuInflater().inflate(resId, mMenu);
mPresenter.setUpdateSuspended(false);
mPresenter.updateMenuView(true);
}複製代碼
在調用inflater的inflate方法以前,presenter就掛起了,這是由於inflate方法會出觸發圖更新,簡單的跟蹤一下:
public void inflate(@MenuRes int menuRes, Menu menu) {
XmlResourceParser parser = null;
try {
//...
parseMenu(parser, attrs, menu);
} catch (XmlPullParserException e) {
//...
}
}複製代碼
會調用parseMenu
解析menu文件:
private void parseMenu(XmlPullParser parser, AttributeSet attrs, Menu menu) throws XmlPullParserException, IOException {
MenuState menuState = new MenuState(menu);
//。。。
boolean reachedEndOfMenu = false;
while (!reachedEndOfMenu) {
switch (eventType) {
case XmlPullParser.START_TAG:
//...
break;
case XmlPullParser.END_TAG:
tagName = parser.getName();
//...
else if (tagName.equals(XML_ITEM)) {
if (!menuState.hasAddedItem()) {
//if...
else {
//看這裏!
registerMenu(menuState.addItem(), attrs);
}
}
}
break;
}
eventType = parser.next();
}
}複製代碼
此方法會將解析出來的數據放置在menu對象中,從而完成inflate操做。看一眼menuState.addItem()
方法:
public MenuItem addItem() {
itemAdded = true;
MenuItem item = menu.add(groupId, itemId, itemCategoryOrder, itemTitle);
setItem(item);
return item;
}複製代碼
menu.add()
會展轉調用到BottomNavigationMenu的addInternal方法,就是前面講到的限制item個數以及設置exclusive的地方。下面的一句setItem
:
private void setItem(MenuItem item) {
item.setChecked(itemChecked)
.setXXX...
.setXXX...
...
//...
}複製代碼
就會調用到setchecked了:
@Override
public MenuItem setChecked(boolean checked) {
if ((mFlags & EXCLUSIVE) != 0) {
mMenu.setExclusiveItemChecked(this);
} else {
setCheckedInt(checked);
}
return this;
}複製代碼
由於咱們設置過標誌位,因此執行mMenu.setExclusiveItemChecked(this)
void setExclusiveItemChecked(MenuItem item) {
final int group = item.getGroupId();
final int N = mItems.size();
stopDispatchingItemsChanged();
for (int i = 0; i < N; i++) {
MenuItemImpl curItem = mItems.get(i);
if (curItem.getGroupId() == group) {
if (!curItem.isExclusiveCheckable()) continue;
if (!curItem.isCheckable()) continue;
curItem.setCheckedInt(curItem == item);
}
}
startDispatchingItemsChanged();
}
`複製代碼
注意這個for循環,對於menu中的每個item,檢查其是否與參數item的引用一致,只有一致的,纔會將checked設置爲true,其餘只能是false,因此,對於那些帶有Exclusive標記的item,只能使用item.setChecked(true)
來選中它,別想着傳入false進行進行反向操做,由於這與傳入true的結果是同樣的。在for循環中,會調用到curItem.setCheckedInt(curItem == item)
,跟進之:
void setCheckedInt(boolean checked) {
final int oldFlags = mFlags;
//根據checked設置標誌位,位與取反是清空,或操做是設置標誌位
mFlags = (mFlags & ~CHECKED) | (checked ? CHECKED : 0);
if (oldFlags != mFlags) {
mMenu.onItemsChanged(false);
}
}複製代碼
當checked發生變化就會調用mMenu.onItemsChanged(false);
,而後就與以前提到的調用鏈一致了。因而在inflate操做以前,必須掛起presenter,不然將致使視圖屢次更新。再回到inflate方法:
public void inflateMenu(int resId) {
mPresenter.setUpdateSuspended(true);
getMenuInflater().inflate(resId, mMenu);
mPresenter.setUpdateSuspended(false);
mPresenter.updateMenuView(true);
}複製代碼
菜單文件加載完畢,數據被存放在mMenu對象中,以後就會調用mPresenter.updateMenuView(true);
:
@Override
public void updateMenuView(boolean cleared) {
if (mUpdateSuspended) return;
if (cleared) {
mMenuView.buildMenuView();
} else {
mMenuView.updateMenuView();
}
}複製代碼
而後是mMenuView.buildMenuView();
:
public void buildMenuView() {
removeAllViews()
//...
mButtons = new BottomNavigationItemView[mMenu.size()];
mShiftingMode = mMenu.size() > 3;
for (int i = 0; i < mMenu.size(); i++) {
//...
BottomNavigationItemView child = getNewItem();
mButtons[i] = child;
//...
child.initialize((MenuItemImpl) mMenu.getItem(i), 0);
child.setItemPosition(i);
child.setOnClickListener(mOnClickListener);
addView(child);
}
mSelectedItemPosition = Math.min(mMenu.size() - 1, mSelectedItemPosition);
mMenu.getItem(mSelectedItemPosition).setChecked(true);
}複製代碼
到這裏你們就很熟悉了,mShiftingMode也是在這裏賦值的,BottomNavigationMenuView的子View也是在這個地方建立的,他們都發生在BottomNavigationView的構造函數中,最後一句mMenu.getItem(mSelectedItemPosition).setChecked(true);
將當前記錄的選項設置爲選中狀態,由於是初始化,因此是0。後面的步驟已經講解過了:因爲setChecked,MenuItem#setChecked
=> MenuBuilder#setExclusiveItemChecked
=>MenuItem#setCheckedInt
=> MenuBuilder#onItemsChanged
=> MenuBuilder#dispatchPresenterUpdate
=>MenuPresenter#updateMenuView
=> MenuView#updateMenuView
=> BottomNavigationView#initialize
以後通過measure、layout、draw的操做,咱們就能夠看到這些小可愛了...
很差意思,廢話太多,文章很長,最後一部分,分析一下點擊事件的傳遞及處理流程。在BottomNavigationMenuView的buildMenuView方法中,爲每個BottomNavigationItemView設置了點擊監聽,onclick方法以下:
mOnClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
final BottomNavigationItemView itemView = (BottomNavigationItemView) v;
MenuItem item = itemView.getItemData();
if (!mMenu.performItemAction(item, mPresenter, 0)) {
item.setChecked(true);
}
}
};複製代碼
會首先調用mMenu.performItemAction
:
public boolean performItemAction(MenuItem item, MenuPresenter preferredPresenter, int flags) {
MenuItemImpl itemImpl = (MenuItemImpl) item;
if (itemImpl == null || !itemImpl.isEnabled()) {
return false;
}
boolean invoked = itemImpl.invoke();
//...
return invoked;
}複製代碼
會進入被點擊的這個item的invoke方法:
public boolean invoke() {
//...
if (mMenu.dispatchMenuItemSelected(mMenu.getRootMenu(), this)) {
return true;
}
//...
return false;
}複製代碼
而後又會回到MenuBuilder中去,調用他的dispatchMenuItemSelected方法:
boolean dispatchMenuItemSelected(MenuBuilder menu, MenuItem item) {
return mCallback != null && mCallback.onMenuItemSelected(menu, item);
}複製代碼
咱們能夠看到事件跑到callback中去了,那callback在哪呢?其實咱們在BottomNavigationView的構造函數中設置過他:
mMenu.setCallback(new MenuBuilder.Callback() {
@Override
public boolean onMenuItemSelected(MenuBuilder menu, MenuItem item) {
if (mReselectedListener != null && item.getItemId() == getSelectedItemId()) {
mReselectedListener.onNavigationItemReselected(item);
return true; // item is already selected
}
return mSelectedListener != null
&& !mSelectedListener.onNavigationItemSelected(item);
}
@Override
public void onMenuModeChange(MenuBuilder menu) {}
});複製代碼
如今事件的處理權回到了BottomNavigationView中,他的處理方式就是讓咱們本身處理,也就是傳遞給mReselectedListener或mSelectedListener,若是咱們在外部的監聽中返回了true,則callback返回false,則MenuItem的invoke方法返回false,則MenuBuilder的performItemAction返回false,則BottomNavigationItemView的點擊監聽中的條件判斷成立:
if (!mMenu.performItemAction(item, mPresenter, 0)) {
item.setChecked(true);
}複製代碼
因而會調用MenuItem的setChecked方法更新視圖,不然將不作處理。
安卓的源碼老是有不少值得咱們學習的地方,好比Transition的運用和Drawable狀態的處理。但此次的BottomNavigationView看得我很心累,多是alpha版本的緣由,總有一種施工現場的感受...Menu框架從API level 1 就已經被設計好,經歷了26個系統版本的變化,支撐着ActionBar、Toolbar、PopupMenu、NavigationView、BottomNavigationView等上層設計,基本上已經修煉成精,因此此次加入的suspend,也是無奈之舉修修補補又一年吧 :)