自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙HarmonyOS三方件開發(fā)指南(17)-BottomNavigationBar

作者：軟通田可輝
開發(fā) OpenHarmony
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[393383]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

引言

BottomNavigationBar底部導(dǎo)航欄，可以說所有的app是這樣的頁面架構(gòu)，原因很簡單，操作簡單，模塊化清晰，頁面切換流暢，而且每頁都可以展示不同的風(fēng)格。相信開發(fā)者已經(jīng)很熟悉Android的底部導(dǎo)航欄的開發(fā)以及開發(fā)流程，那么接下來將對比Android來講解鴻蒙的底部導(dǎo)航欄的實(shí)現(xiàn)步驟。

功能介紹

鴻蒙BottomNavigationBar底部導(dǎo)航欄，根據(jù)所需要底部button的數(shù)量，動態(tài)生成對應(yīng)的底部button，并且可以設(shè)置默認(rèn)字體顏色，選中字體顏色，默認(rèn)icon，選中icon屬性。模擬器效果圖如下：

看了效果圖，是不是都想知道在實(shí)際工作中，是如何使用的呢?接下來給大家詳細(xì)介紹下BottomNavigationBar如何使用。

BottomNavigationBar使用指南

Ø 新建工程， 添加組件Har包依賴

在應(yīng)用模塊中添加HAR，只需要將mylibrarybottom-debug.har復(fù)制到entry\libs目錄下即可。

Ø 修改相關(guān)文件

1. 修改主頁面的布局文件ability_main.xml：

2. 修改MainAbilitySlice代碼：

3. 修改BaseAbilitySlinct代碼：

4. MainAbility的代碼：

配置好1-4步，接下來就看如何給對應(yīng)的底部導(dǎo)航欄添加Fraction

1. initBottom 方法如下：

  1. private void initBottom() { 
  2.     tabBottomLayout = (BottomNavigationBar)  mAbilitySliceProvider.findComponentById(ResourceTable.Id_bottom_navigation_bar); 
  3.     bottomInfoList = new ArrayList<>(); 
  4.     // 獲取string.json文件中定義的字符串 
  5.     String home = mAbilitySliceProvider.getString(ResourceTable.String_home); 
  6.     String favorite = mAbilitySliceProvider.getString(ResourceTable.String_favorite); 
  7.     String category = mAbilitySliceProvider.getString(ResourceTable.String_category); 
  8.     String profile = mAbilitySliceProvider.getString(ResourceTable.String_mine); 
  9.     // 首頁 
  10.     BottomBarInfo<Integer> homeInfo = new BottomBarInfo<>(home, 
  11.             ResourceTable.Media_category_norma1, 
  12.             ResourceTable.Media_category_norma2, 
  13.             defaultColor, tintColor); 
  14.     homeInfo.fraction = HomeFraction.class; 
  15.     // 收藏 
  16.     BottomBarInfo<Integer> favoriteInfo = new BottomBarInfo<>(favorite, 
  17.             ResourceTable.Media_category_norma1, 
  18.             ResourceTable.Media_category_norma2, 
  19.             defaultColor, tintColor); 
  20.     favoriteInfo.fraction = SecondFraction.class; 
  21.     // 分類 
  22.     BottomBarInfo<Integer> categoryInfo = new BottomBarInfo<>(category, 
  23.             ResourceTable.Media_category_norma1, 
  24.             ResourceTable.Media_category_norma2, 
  25.             defaultColor, tintColor); 
  26.     categoryInfo.fraction = ThirdFraction.class; 
  27.     // 我的 
  28.     BottomBarInfo<Integer> profileInfo = new BottomBarInfo<>(profile, 
  29.             ResourceTable.Media_category_norma1, 
  30.             ResourceTable.Media_category_norma2, 
  31.             defaultColor, tintColor); 
  32.     profileInfo.fraction = MineFraction.class; 
  33.  
  34.     // 將每個條目的數(shù)據(jù)放入到集合 
  35.     bottomInfoList.add(homeInfo); 
  36.     bottomInfoList.add(favoriteInfo); 
  37.     bottomInfoList.add(categoryInfo); 
  38.     bottomInfoList.add(profileInfo); 
  39.     // 設(shè)置底部導(dǎo)航欄的透明度 
  40.     tabBottomLayout.setBarBottomAlpha(0.85f); 
  41.     // 初始化所有的條目 
  42.     tabBottomLayout.initInfo(bottomInfoList); 
  43.     initFractionBarComponent(); 
  44.     tabBottomLayout.addBarSelectedChangeListener((index, prevInfo, nextInfo) -> 
  45.             // 顯示fraction 
  46.             mFractionBarComponent.setCurrentItem(index)); 
  47.     // 設(shè)置默認(rèn)選中的條目，該方法一定要在最后調(diào)用 
  48.     tabBottomLayout.defaultSelected(homeInfo); 

2. 創(chuàng)建fraction類，繼承BaseFraction

（1)引入需要展示頁面的布局文件

  1. @Override 
  2. blic int getUIComponent() { 
  3.   return ResourceTable.Layout_layout_fraction_home; 

(2)操作布局文件中的控件

  1. @Override 
  2. public void initComponent(Component component) { 
  3.     text = (Text) component.findComponentById(ResourceTable.Id_text); 
  4. } 

BottomNavigationBar開發(fā)指南

底部導(dǎo)航欄，在應(yīng)用中真的非常常見，核心思想就是底部有幾個選項(xiàng)，然后點(diǎn)擊其中任意一個，切換至對應(yīng)的頁面。接下來主要介紹下核心實(shí)現(xiàn)步驟。

主要封裝的原則是，動態(tài)的，通過外界傳遞，固定過的則封裝起來。其中底部導(dǎo)航欄的圖片、文字、文字的顏色是變的，其它的可以封裝起來，外界只需要把每個條目的圖片、文字以及文字的顏色傳入進(jìn)來即可，內(nèi)部來實(shí)現(xiàn)底部導(dǎo)航欄。在封裝的時(shí)候，需要面向接口編程，同時(shí)使用泛型。

定義接口IBarLayout

1、定義一個IBarLayout接口，第一個泛型就是底部導(dǎo)航欄中的每個條目，第二個泛型是每個條目的數(shù)據(jù)。在接口里面提供一些方法，可以根據(jù)數(shù)據(jù)查找條目，可以添加監(jiān)聽，可以設(shè)置默認(rèn)選中的條目，可以初始化所有的條目，當(dāng)某個條目被選中后需要通過回調(diào)方法。

代碼如下：

  1. public interface IBarLayout<Bar extends ComponentContainer, D> { 
  2.  
  3.     /** 
  4.      * 根據(jù)數(shù)據(jù)查找條目 
  5.      * 
  6.      * @param info 數(shù)據(jù) 
  7.      * @return 條目 
  8.      */ 
  9.     Bar findBar(D info); 
  10.  
  11.     /** 
  12.      * 添加監(jiān)聽 
  13.      * 
  14.      * @param listener 
  15.      */ 
  16.     void addBarSelectedChangeListener(OnBarSelectedListener<D> listener); 
  17.  
  18.     /** 
  19.      * 默認(rèn)選中的條目 
  20.      * 
  21.      * @param defaultInfo 
  22.      */ 
  23.     void defaultSelected(D defaultInfo); 
  24.  
  25.     /** 
  26.      * 初始化所有的條目 
  27.      * 
  28.      * @param infoList 
  29.      */ 
  30.     void initInfo(List<D> infoList); 
  31.  
  32.     interface OnBarSelectedListener<D> { 
  33.  
  34.         /** 
  35.          * 當(dāng)某個條目被選中后的回調(diào)，該方法會被調(diào)用多次 
  36.          * 
  37.          * @param index 點(diǎn)擊后選中條目的下標(biāo) 
  38.          * @param preInfo 點(diǎn)擊前選中的條目 
  39.          * @param nextInfo 點(diǎn)擊后選中的條目 
  40.          */ 
  41.         void onBarSelectedChange(int index, D preInfo, D nextInfo); 
  42.     } 
  43. } 

2、再定義一個單個條目的接口IBar，泛型就是每個條目的數(shù)據(jù)，接口里面定義方法，可以設(shè)置條目的數(shù)據(jù)，可以動態(tài)修改某個條目的大小

代碼如下：

  1. /** 
  2.  * 單個條目的接口 
  3.  */ 
  4. public interface IBar<D> extends IBarLayout.OnBarSelectedListener<D> { 
  5.  
  6.     /** 
  7.      * 設(shè)置條目的數(shù)據(jù) 
  8.      * 
  9.      * @param data 
  10.      */ 
  11.     void setBarInfo(D data); 
  12.  
  13.     /** 
  14.      * 動態(tài)修改某個條目的大小 
  15.      * 
  16.      * @param height 
  17.      */ 
  18.     void resetHeight(int height); 
  19. } 

每個條目所對應(yīng)的實(shí)體類BottomBarInfo

每個條目都有自己的圖片、文字、文字的顏色，我們把這些屬性定義在一個實(shí)體類中。由于顏色可以是整型，也可以是字符串，這里定義泛型，泛型就是文字的顏色。具體是哪種類型的顏色，由調(diào)用者來決定。

注意下BarType這個枚舉，我們的底部導(dǎo)航欄支持兩種類型，IMAGE代表下圖，某個條目只顯示圖片，也可以讓某個條目凸出來，只需要將條目的高度變高即可。

  1. public class BottomBarInfo<Color> extends TopBottomBarInfo { 
  2.  
  3.     public enum BarType { 
  4.         /** 
  5.          * 顯示圖片和文案 
  6.          */ 
  7.         IMAGE_TEXT, 
  8.         /** 
  9.          * 只顯示圖片 
  10.          */ 
  11.         IMAGE 
  12.     } 
  13.  
  14.     /** 
  15.      * 條目的名稱 
  16.      */ 
  17.     public String name; 
  18.     public BarType tabType; 
  19.     public Class<? extends Fraction> fraction; 
  20.  
  21.     public BottomBarInfo(String name, int defaultImage, int selectedImage) { 
  22.         this.name = name; 
  23.         this.defaultImage = defaultImage; 
  24.         this.selectedImage = selectedImage; 
  25.         this.tabType = BarType.IMAGE; 
  26.     } 
  27.  
  28.     public BottomBarInfo(String name, int defaultImage, int selectedImage, Color defaultColor, Color tintColor) { 
  29.         this.name = name; 
  30.         this.defaultImage = defaultImage; 
  31.         this.selectedImage = selectedImage; 
  32.         this.defaultColor = defaultColor; 
  33.         this.tintColor = tintColor; 
  34.         this.tabType = BarType.IMAGE_TEXT; 
  35.     } 
  36. } 

單個條目的封裝

定義BottomBar，繼承相對布局，實(shí)現(xiàn)之前定義的IBar接口，泛型就是每個條目所對應(yīng)的實(shí)體類，由于目前并不知道泛型的具體類型，所以泛型直接使用問號來代替。BottomBar就是單個條目。

我們需要將component對象放入到BottomBar中，所以第二個參數(shù)傳this，第三個參數(shù)為true。

  1. public class BottomBar extends DependentLayout implements IBar<BottomBarInfo<?>> { 
  2.  
  3.     /** 
  4.      * 當(dāng)前條目所對應(yīng)的數(shù)據(jù) 
  5.      */ 
  6.     private BottomBarInfo<Color> tabInfo; 
  7.     private Text mTabName; 
  8.     private Image mTabImage; 
  9.  
  10.     public BottomBar(Context context) { 
  11.         this(context, null); 
  12.     } 
  13.  
  14.     public BottomBar(Context context, AttrSet attrSet) { 
  15.         this(context, attrSet, ""); 
  16.     } 
  17.  
  18.     public BottomBar(Context context, AttrSet attrSet, String styleName) { 
  19.         super(context, attrSet, styleName); 
  20.         Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_bar_bottom, this, true); 
  21.         mTabImage = (Image) component.findComponentById(ResourceTable.Id_image); 
  22.         mTabName = (Text) component.findComponentById(ResourceTable.Id_name); 
  23.         mTabImage.setScaleMode(Image.ScaleMode.INSIDE); 
  24.     } 
  25.  
  26.     /** 
  27.      * 設(shè)置條目的數(shù)據(jù) 
  28.      * 
  29.      * @param data 
  30.      */ 
  31.     @Override 
  32.     public void setBarInfo(BottomBarInfo<?> data) { 
  33.         tabInfo = (BottomBarInfo<Color>) data; 
  34.         inflateInfo(false, true); 
  35.     } 
  36.  
  37.     /** 
  38.      * 初始化條目 
  39.      * 
  40.      * @param selected true 選中 
  41.      * @param init true 初始化 
  42.      */ 
  43.     private void inflateInfo(boolean selected, boolean init) { 
  44.         if (tabInfo.tabType == BottomBarInfo.BarType.IMAGE_TEXT) { 
  45.             if (init) { 
  46.                 // 圖片和名稱都可見 
  47.                 mTabName.setVisibility(VISIBLE); 
  48.                 mTabImage.setVisibility(VISIBLE); 
  49.                 if (!TextUtils.isEmpty(tabInfo.name)) { 
  50.                     // 設(shè)置條目的名稱 
  51.                     mTabName.setText(tabInfo.name); 
  52.                 } 
  53.             } 
  54.             if (selected) { 
  55.                 // 顯示選中的圖片 
  56.                 mTabImage.setPixelMap(tabInfo.selectedImage); 
  57.                 mTabName.setTextColor(new Color(parseColor(tabInfo.tintColor))); 
  58.             } else { 
  59.                 // 顯示未選中的圖片 
  60.                 mTabImage.setPixelMap(tabInfo.defaultImage); 
  61.                 mTabName.setTextColor(new Color(parseColor(tabInfo.defaultColor))); 
  62.             } 
  63.         } else if (tabInfo.tabType == BottomBarInfo.BarType.IMAGE) { 
  64.             if (init) { 
  65.                 // 僅僅顯示圖片，將名稱隱藏 
  66.                 mTabName.setVisibility(HIDE); 
  67.                 mTabImage.setVisibility(VISIBLE); 
  68.             } 
  69.             if (selected) { 
  70.                 // 顯示選中的圖片 
  71.                 mTabImage.setPixelMap(tabInfo.selectedImage); 
  72.             } else { 
  73.                 // 顯示未選中的圖片 
  74.                 mTabImage.setPixelMap(tabInfo.defaultImage); 
  75.             } 
  76.         } 
  77.     } 
  78.  
  79.     private int parseColor(Object color) { 
  80.         if (color instanceof String) { 
  81.             return Color.getIntColor((String) color); 
  82.         } else { 
  83.             return (int) color; 
  84.         } 
  85.     } 
  86.  
  87.     /** 
  88.      * 動態(tài)修改某個tab的高度 
  89.      * 
  90.      * @param height tab的高度 
  91.      */ 
  92.     @Override 
  93.     public void resetHeight(int height) { 
  94.         ComponentContainer.LayoutConfig config = getLayoutConfig(); 
  95.         config.height = height; 
  96.         setLayoutConfig(config); 
  97.         mTabName.setVisibility(HIDE); 
  98.     } 
  99.  
  100.     /** 
  101.      * 當(dāng)某個條目被選中后的回調(diào)，該方法會被調(diào)用多次 
  102.      * 
  103.      * @param index 點(diǎn)擊后選中條目的下標(biāo) 
  104.      * @param preInfo 點(diǎn)擊前選中的條目 
  105.      * @param nextInfo 點(diǎn)擊后選中的條目 
  106.      */ 
  107.     @Override 
  108.     public void onBarSelectedChange(int index, BottomBarInfo<?> preInfo, BottomBarInfo<?> nextInfo) { 
  109.         if (nextInfo.tabType == BottomBarInfo.BarType.IMAGE) { 
  110.             // 當(dāng)前條目的類型是IMAGE類型，則不做任何處理 
  111.             return; 
  112.         } 
  113.         if (preInfo == nextInfo) { 
  114.             // 假設(shè)當(dāng)前選中的是條目1，同時(shí)點(diǎn)擊的也是條目1，那就不需要做任何操作了 
  115.             return; 
  116.         } 
  117.         if (preInfo != tabInfo && nextInfo != tabInfo) { 
  118.             /** 
  119.              * 假設(shè)有三個條目，條目1、條目2、條目3，preInfo是條目1，nextInfo是條目3，tabInfo是條目2， 
  120.              * 點(diǎn)擊前選中的是條目1，點(diǎn)擊后選中的條目3，此時(shí)條目2就不需要做任何操作了 
  121.              */ 
  122.             return; 
  123.         } 
  124.         if (preInfo == tabInfo) { 
  125.             // 將點(diǎn)擊前的條目反選 
  126.             inflateInfo(false, false); 
  127.         } else { 
  128.             // 選中被點(diǎn)擊的條目 
  129.             inflateInfo(true, false); 
  130.         } 
  131.     } 
  132.  
  133.     public BottomBarInfo<Color> getTabInfo() { 
  134.         return tabInfo; 
  135.     } 
  136.  
  137.     public Text getTabName() { 
  138.         return mTabName; 
  139.     } 
  140.  
  141.     public Image getImage() { 
  142.         return mTabImage; 
  143.     } 
  144. } 

底部導(dǎo)航欄的封裝

定義BottomNavigationBar，繼承棧布局。第一個泛型就是底部導(dǎo)航欄的條目，第二個泛型就是每個條目的數(shù)據(jù)。

  1. public class BottomNavigationBar extends StackLayout implements IBarLayout<BottomBar, BottomBarInfo<?>> { 
  2.  
  3.     private static final int ID_TAB_BOTTOM = 0XFF; 
  4.     /** 
  5.      * 事件監(jiān)聽的集合 
  6.      */ 
  7.     private List<OnBarSelectedListener<BottomBarInfo<?>>> tabSelectedListeners = new ArrayList<>(); 
  8.     /** 
  9.      * 當(dāng)前選中的條目 
  10.      */ 
  11.     private BottomBarInfo<?> selectedInfo; 
  12.     /** 
  13.      * 底部導(dǎo)航欄的透明度 
  14.      */ 
  15.     private float barBottomAlpha = 1; 
  16.     /** 
  17.      * 底部導(dǎo)航欄的高度 
  18.      */ 
  19.     private float barBottomHeight = 50; 
  20.     /** 
  21.      * 底部導(dǎo)航欄線條的高度 
  22.      */ 
  23.     private float barBottomLineHeight = 0.5f; 
  24.     /** 
  25.      * 底部導(dǎo)航欄線條的顏色 
  26.      */ 
  27.     private RgbColor barBottomLineColor = new RgbColor(223, 224, 225); 
  28.     /** 
  29.      * 所有的tab 
  30.      */ 
  31.     private List<BottomBarInfo<?>> infoList; 
  32.  
  33.     public BottomNavigationBar(Context context) { 
  34.         this(context, null); 
  35.     } 
  36.  
  37.     public BottomNavigationBar(Context context, AttrSet attrSet) { 
  38.         this(context, attrSet, ""); 
  39.     } 
  40.  
  41.     public BottomNavigationBar(Context context, AttrSet attrSet, String styleName) { 
  42.         super(context, attrSet, styleName); 
  43.     } 
  44.  
  45.     /** 
  46.      * 根據(jù)數(shù)據(jù)查找條目 
  47.      * 
  48.      * @param info 條目的數(shù)據(jù) 
  49.      * @return 條目 
  50.      */ 
  51.     @Override 
  52.     public BottomBar findBar(BottomBarInfo<?> info) { 
  53.         ComponentContainer componentContainer = (ComponentContainer) findComponentById(ID_TAB_BOTTOM); 
  54.         for (int i = 0; i < componentContainer.getChildCount(); i++) { 
  55.             Component component = componentContainer.getComponentAt(i); 
  56.             if (component instanceof BottomBar) { 
  57.                 BottomBar bottomBar = (BottomBar) component; 
  58.                 if (bottomBar.getTabInfo() == info) { 
  59.                     return bottomBar; 
  60.                 } 
  61.             } 
  62.         } 
  63.         return null; 
  64.     } 
  65.  
  66.     /** 
  67.      * 添加監(jiān)聽 
  68.      * 
  69.      * @param listener 監(jiān)聽 
  70.      */ 
  71.     @Override 
  72.     public void addBarSelectedChangeListener(OnBarSelectedListener<BottomBarInfo<?>> listener) { 
  73.         tabSelectedListeners.add(listener); 
  74.     } 
  75.  
  76.     /** 
  77.      * 默認(rèn)選中的條目 
  78.      * 
  79.      * @param defaultInfo 默認(rèn)選中條目的信息 
  80.      */ 
  81.     @Override 
  82.     public void defaultSelected(BottomBarInfo<?> defaultInfo) { 
  83.         onSelected(defaultInfo); 
  84.     } 
  85.  
  86.     /** 
  87.      * 初始化所有的條目 
  88.      * 
  89.      * @param infoList 所有條目的信息 
  90.      */ 
  91.     @Override 
  92.     public void initInfo(List<BottomBarInfo<?>> infoList) { 
  93.         if (infoList == null || infoList.isEmpty()) { 
  94.             return; 
  95.         } 
  96.         this.infoList = infoList; 
  97.         // 移除之前已經(jīng)添加的組件，防止重復(fù)添加 
  98.         removeComponent(); 
  99.         selectedInfo = null; 
  100.         // 添加背景 
  101.         addBackground(); 
  102.         // 添加條目 
  103.         addBottomBar(); 
  104.         // 添加線條 
  105.         addBottomLine(); 
  106.     } 
  107.  
  108.     /** 
  109.      * 添加線條 
  110.      */ 
  111.     private void addBottomLine() { 
  112.         Component line = new Component(getContext()); 
  113.         // 目前不支持直接設(shè)置背景顏色，只能通過Element來設(shè)置背景 
  114.         ShapeElement element = new ShapeElement(); 
  115.         element.setShape(ShapeElement.RECTANGLE); 
  116.         element.setRgbColor(barBottomLineColor); 
  117.         line.setBackground(element); 
  118.         LayoutConfig config = new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, 
  119.                 DisplayUtils.vp2px(getContext(), barBottomLineHeight)); 
  120.         // 位于底部 
  121.         config.alignment = LayoutAlignment.BOTTOM; 
  122.         config.setMarginBottom(DisplayUtils.vp2px(getContext(), barBottomHeight - barBottomLineHeight)); 
  123.         line.setAlpha(barBottomAlpha); 
  124.         addComponent(line, config); 
  125.     } 
  126.  
  127.     /** 
  128.      * 添加條目 
  129.      */ 
  130.     private void addBottomBar() { 
  131.         // 每個條目的寬度就是屏幕寬度除以條目的總個數(shù) 
  132.         int width = DisplayUtils.getDisplayWidthInPx(getContext()) / infoList.size(); 
  133.         // 高度是固定的值，這里需要做屏幕適配，將vp轉(zhuǎn)換成像素 
  134.         int height = DisplayUtils.vp2px(getContext(), barBottomHeight); 
  135.         StackLayout stackLayout = new StackLayout(getContext()); 
  136.         stackLayout.setId(ID_TAB_BOTTOM); 
  137.         for (int i = 0; i < infoList.size(); i++) { 
  138.             BottomBarInfo<?> info = infoList.get(i); 
  139.             // 創(chuàng)建布局配置對象 
  140.             LayoutConfig config = new LayoutConfig(width, height); 
  141.             // 設(shè)置底部對齊 
  142.             config.alignment = LayoutAlignment.BOTTOM; 
  143.             // 設(shè)置左邊距 
  144.             config.setMarginLeft(i * width); 
  145.             BottomBar bottomBar = new BottomBar(getContext()); 
  146.             tabSelectedListeners.add(bottomBar); 
  147.             // 初始化每個條目 
  148.             bottomBar.setBarInfo(info); 
  149.             // 添加條目 
  150.             stackLayout.addComponent(bottomBar, config); 
  151.             // 設(shè)置點(diǎn)擊事件 
  152.             bottomBar.setClickedListener(component -> onSelected(info)); 
  153.         } 
  154.         LayoutConfig layoutConfig = new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, 
  155.                 ComponentContainer.LayoutConfig.MATCH_CONTENT); 
  156.         layoutConfig.alignment = LayoutAlignment.BOTTOM; 
  157.         addComponent(stackLayout, layoutConfig); 
  158.     } 
  159.  
  160.     /** 
  161.      * 點(diǎn)擊條目后給外界回調(diào) 
  162.      * 
  163.      * @param nextInfo 點(diǎn)擊后需要選中的條目 
  164.      */ 
  165.     private void onSelected(BottomBarInfo<?> nextInfo) { 
  166.         for (OnBarSelectedListener<BottomBarInfo<?>> listener : tabSelectedListeners) { 
  167.             listener.onBarSelectedChange(infoList.indexOf(nextInfo), selectedInfo, nextInfo); 
  168.         } 
  169.         if (nextInfo.tabType == BottomBarInfo.BarType.IMAGE_TEXT) { 
  170.             selectedInfo = nextInfo; 
  171.         } 
  172.     } 
  173.  
  174.     /** 
  175.      * 添加背景 
  176.      */ 
  177.     private void addBackground() { 
  178.         Component component = new Component(getContext()); 
  179.         // 目前還不能直接設(shè)置背景顏色，只能通過Element來設(shè)置背景 
  180.         ShapeElement element = new ShapeElement(); 
  181.         element.setShape(ShapeElement.RECTANGLE); 
  182.         RgbColor rgbColor = new RgbColor(255, 255, 255); 
  183.         element.setRgbColor(rgbColor); 
  184.         component.setBackground(element); 
  185.         component.setAlpha(barBottomAlpha); 
  186.         LayoutConfig config = new LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, 
  187.                 DisplayUtils.vp2px(getContext(), barBottomHeight)); 
  188.         config.alignment = LayoutAlignment.BOTTOM; 
  189.         addComponent(component, config); 
  190.     } 
  191.  
  192.     /** 
  193.      * 移除之前已經(jīng)添加的組件，防止重復(fù)添加 
  194.      */ 
  195.     private void removeComponent() { 
  196.         for (int i = getChildCount() - 1; i > 0; i--) { 
  197.             removeComponentAt(i); 
  198.         } 
  199.         tabSelectedListeners.removeIf(listener -> 
  200.                 listener instanceof BottomBar); 
  201.     } 
  202.  
  203.     /** 
  204.      * 設(shè)置底部導(dǎo)航欄的透明度 
  205.      * 
  206.      * @param barBottomAlpha 底部導(dǎo)航欄的透明度 
  207.      */ 
  208.     public void setBarBottomAlpha(float barBottomAlpha) { 
  209.         this.barBottomAlpha = barBottomAlpha; 
  210.     } 
  211.  
  212.     /** 
  213.      * 設(shè)置底部導(dǎo)航欄的高度 
  214.      * 
  215.      * @param barBottomHeight 底部導(dǎo)航欄的高度 
  216.      */ 
  217.     public void setBarBottomHeight(float barBottomHeight) { 
  218.         this.barBottomHeight = barBottomHeight; 
  219.     } 
  220.  
  221.     /** 
  222.      * 設(shè)置底部導(dǎo)航欄線條的高度 
  223.      * 
  224.      * @param barBottomLineHeight 底部導(dǎo)航欄線條的高度 
  225.      */ 
  226.     public void setBarBottomLineHeight(float barBottomLineHeight) { 
  227.         this.barBottomLineHeight = barBottomLineHeight; 
  228.     } 
  229.  
  230.     /** 
  231.      * 設(shè)置底部導(dǎo)航欄線條的顏色 
  232.      * 
  233.      * @param barBottomLineColor 底部導(dǎo)航欄線條的顏色 
  234.      */ 
  235.     public void setBarBottomLineColor(RgbColor barBottomLineColor) { 
  236.         this.barBottomLineColor = barBottomLineColor; 
  237.     } 
  238. } 

initInfo(List<BottomBarInfo<?>> infoList)該方法由外界調(diào)用，外界將所有的條目信息傳遞過來，我們將條目添加到底部導(dǎo)航欄。首先移除之前已經(jīng)添加的組件，防止重復(fù)添加，然后添加背景，添加條目，添加線條。

更多原創(chuàng)，請關(guān)注：軟通動力HarmonyOS學(xué)院https://harmonyos.51cto.com/column/30

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2021-03-01 09:48:24

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-02-24 15:22:47

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-01-13 09:40:31

鴻蒙HarmonyOS開發(fā)

2021-02-04 13:06:38

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-06-28 14:48:03

鴻蒙HarmonyOS應(yīng)用

2021-01-18 09:52:20

鴻蒙HarmonyOS開發(fā)

2021-02-04 09:45:19

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-02-26 14:15:27

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-01-12 12:04:40

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-01-21 13:21:18

鴻蒙HarmonyOSPhotoview組件

2021-01-20 09:54:56

鴻蒙HarmonyOS開發(fā)

2021-03-01 14:01:41

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-05-12 15:17:39

鴻蒙HarmonyOS應(yīng)用

2021-03-31 09:50:25

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-01-22 17:33:03

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-04-12 09:36:54

鴻蒙HarmonyOS應(yīng)用

2021-03-19 17:42:01

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-04-20 09:42:20

鴻蒙HarmonyOS應(yīng)用開發(fā)

2021-03-10 15:03:40

鴻蒙HarmonyOS應(yīng)用

2023-02-07 15:43:13

三方庫適配鴻蒙
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號