#夏日挑战赛# HarmonyOS应用开发-实现底部导航栏功能原创精华

OS中的塔秋莎

发布于 2022-7-26 20:38

浏览

4收藏

[本文正在参加星光计划3.0–夏日挑战赛] https://ost.51cto.com/posts/13641

前言

HarmonyOS应用开发最常见的一种功能就是底部导航栏，今天就带着大家一起来感受不一样的底部导航栏的实现-自定义Component的方式。

自定义View

创建布局

首先创建一个item_route.xml的布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_content"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:id="$+id:img"
        ohos:height="25vp"
        ohos:width="25vp"
        ohos:bottom_margin="1vp"
        ohos:scale_mode="inside"/>

    <Text
        ohos:id="$+id:text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_color="$color:hintColor"
        ohos:text_size="10vp"/>

</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

创建自定义Component的类RouteView.java

public class RouteView extends DirectionalLayout {
    private static final int ITEM_LAYOUT = ResourceTable.Layout_item_route;

    private List<Data> data;
    private Callback callback;

    public RouteView(Context context) {
        this(context, null);
    }

    public RouteView(Context context, AttrSet attrSet) {
        this(context, attrSet, null);
    }

    public RouteView(Context context, AttrSet attrSet, String styleName) {
        super(context, attrSet, styleName);
        init();
    }

    private void init() {
        setOrientation(HORIZONTAL);   //设置水平方向
    }

    public void setCallback(Callback callback) {
        this.callback = callback;
    }

    public void setData(DataBuilder builder) {
        setData(builder, 0);
    }

    public void setData(DataBuilder builder, int p) {
        data = builder.build();
        createItems();
        select(p);
    }

    public void select(int p) {
        for (int i = 0; i < data.size(); i++) {
            data.get(i).selected = i == p;
            refreshItemData(i);
        }
    }

    private void createItems() {
        data.forEach(d -> addComponent(createItem(),
                new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT, HORIZONTAL, 1)));
    }

    private Component createItem() {
        Component component = LayoutScatter.getInstance(getContext())
                .parse(ITEM_LAYOUT, null, false);
        ViewHolder holder = new ViewHolder();
        holder.img = (Image) component.findComponentById(ResourceTable.Id_img);
        holder.text = (Text) component.findComponentById(ResourceTable.Id_text);


        component.setTag(holder);
        component.setClickedListener(v -> {
            int p = getChildIndex(v);
            if (p < 0) return;

            select(p);
            if (callback != null) callback.onItemClicked(p);
        });
        return component;
    }

    private void refreshItemData(int p) {
        Component component = getComponentAt(p);
        Object tag = component.getTag();
        if (!(tag instanceof ViewHolder)) return;

        ViewHolder holder = (ViewHolder) tag;
        holder.text.setText(data.get(p).text);

        holder.img.setPixelMap(data.get(p).getImageRes());
        holder.text.setTextColor(ResUtil.getColorObj(getContext(), data.get(p).getColorRes()));
    }

    public interface Callback {
        void onItemClicked(int p);
    }

    static class ViewHolder {
        Text text;
        Image img;
    }

    static class Data {
        String text;
        int imageRes, selectedImageRes;
        int colorRes, selectedColorRes;
        boolean selected;

        public Data(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {
            this.text = text;
            this.imageRes = imageRes;
            this.selectedImageRes = selectedImageRes;
            this.colorRes = colorRes;
            this.selectedColorRes = selectedColorRes;
        }

        public int getImageRes() {
            return selected ? selectedImageRes : imageRes;
        }

        public int getColorRes() {
            return selected ? selectedColorRes : colorRes;
        }
    }

    public static class DataBuilder {
        private final List<Data> data = new ArrayList<>();

        public DataBuilder add(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {
            data.add(new Data(text, imageRes, selectedImageRes, colorRes, selectedColorRes));
            return this;
        }

        public List<Data> build() {
            return data;
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.

在项目的build.gradle中添加依赖，如下：

    api 'com.gitee.chinasoft_ohos:ohos-extension:1.0.0' 
1.

这里我们定义了一个接口Callback，用于点击选项卡的回调：代码如下：
```
public interface Callback {
      void onItemClicked(int p);
  }
1.
2.
3.
```
定义了一个集合List<Data> 用于存放item资源，Data数据结构如下：

   static class Data {
       String text;
       int imageRes, selectedImageRes;
       int colorRes, selectedColorRes;
       boolean selected;
       /*
       *  text:显示文本
       *  imageRes:未选中的图片资源文件
       *  selectedImageRes:选中的资源文件
       *  colorRes:  未选中的文本颜色
       *  selectedColorRes: 选中时文本的颜色
       * */
       public Data(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {
           this.text = text;
           this.imageRes = imageRes;
           this.selectedImageRes = selectedImageRes;
           this.colorRes = colorRes;
           this.selectedColorRes = selectedColorRes;
       }
       //获取图片资源
       public int getImageRes() {
           return selected ? selectedImageRes : imageRes;
       }
       //获取文本颜色
       public int getColorRes() {
           return selected ? selectedColorRes : colorRes;
       }
   }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

另外，我们通过builder建造者模式，可以动态的添加和删除item，代码如下：

 public static class DataBuilder {
     private final List<Data> data = new ArrayList<>();
     public DataBuilder add(String text, int imageRes, int selectedImageRes, int colorRes, int selectedColorRes) {
         data.add(new Data(text, imageRes, selectedImageRes, colorRes, selectedColorRes));
         return this;
     }
     public List<Data> build() {
         return data;
     }
 }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

应用开发整体框架

1、首先在MainAbility类中继承FractionAbility.
1.

public class MainAbility extends FractionAbility{
  @Override
  public void onStart(Intent intent) {
      super.onStart(intent);
      super.setMainRoute(MainAbilitySlice.class.getName());
  }
}
1.
2.
3.
4.
5.
6.
7.

2、创建两个Fraction的布局文件fr_home.xml、fr_me.xml。
fr_home.xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="$color:bgColor"
    ohos:alignment="center"
    ohos:orientation="vertical">
    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="首页页面"/>

</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

fr_me.xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
   xmlns:ohos="http://schemas.huawei.com/res/ohos"
   ohos:height="match_parent"
   ohos:width="match_parent"
   ohos:background_element="$color:bgColor"
   ohos:alignment="center"
   ohos:orientation="vertical">
   <Text
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:text="我的页面"/>

</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

3、创建HomeFraction、MeFraction类:
HomeFraction:

  public class HomeFraction extends Fraction {
   @Override
   protected void onStart(Intent intent) {
       super.onStart(intent);

   }
   @Override
   protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
       return scatter.parse(ResourceTable.Layout_fr_home, null, false);
   }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

MeFraction:

public class MeFraction extends Fraction {
   @Override
   protected void onStart(Intent intent) {
       super.onStart(intent);
   }
   @Override
   protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
       return scatter.parse(ResourceTable.Layout_fr_me, null, false);
   }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

4、在MainAbilitySlice类中初始化Fraction，实现RouteView.Callback回调。

   private void initFraction() {
       fractions = new ArrayList<>();
       homeFraction = new HomeFraction(this);
       fractions.add(homeFraction);
       fractions.add(new MeFraction(this));
       showFraction(0);
   }
   private void initView() {
       routeView = (RouteView) findComponentById(ResourceTable.Id_route);
       routeView.setCallback(this);
       RouteView.DataBuilder builder = new RouteView.DataBuilder()
               .add("首页", ResourceTable.Media_home, ResourceTable.Media_home_s                                                            ,
                       ResourceTable.Color_hintColor, ResourceTable.Color_tabTextColor)
               .add("我的", ResourceTable.Media_me, ResourceTable.Media_me_s,
                       ResourceTable.Color_hintColor, ResourceTable.Color_tabTextColor);
       routeView.setData(builder);
   }
    ......
   private void showFraction(int p) {
       scheduler = ((FractionAbility) getAbility()).getFractionManager().startFractionScheduler();

       for (int i = 0; i < fractions.size(); i++) {
           Fraction f = fractions.get(i);
           if (i == p) scheduler.replace(ResourceTable.Id_container, f);
           else scheduler.remove(f);
       }
       scheduler.submit();
   }

    ......
  @Override
   public void onItemClicked(int p) {
       showFraction(p);
   }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.