[[420493]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

學習鴻蒙已經一個月了，這一個月學到了不少東西：服務卡片的制作，分布式數據庫，分布式任務調度等等。。。但是這一個月來都是一些碎片化的學習為多，需要什么才去學習什么。我想來一次更為系統的學習，于是選擇從UI的制作開始一步步地學習。對于UI學習，以為相比于文檔上面枯燥的說教(當然文檔還是得好好看，畢竟基礎很重要)，解析IDE里面所自帶的UI模板肯定是更加有趣的方式。事實上，解析模板比我想象中學習的東西要多，很多我以為是這樣做的，卻發現別人是那樣做的。相信對于IDE模板的解析相信能夠幫助我更好的運用這些組件。我第一個解析的模板選擇了News_Ability模板。下面將分享我對這個模板的解析思路以及學習到的東西。如果想要查看更多詳細的學習筆記，

News_Ability模板中的布局與組件

布局：Directional布局

組件：Image，Text，TextField，ListContainer，ScrollView

布局分析

第一個頁面的分析：由圖片可見，第一個頁面主要就是兩個部分，一是新聞種類的選擇欄，二是新聞概覽的欄。一開始我天真的認為新聞種類選擇欄是通過TabList實現的，但通過查看代碼發現這兩個板塊都是通過ListContainer實現的。

第二個頁面分析：頁面的頂部是文章的題目，閱讀量和點贊數，顯然都是用Text組件實現，并且猜測是用一個水平方向得Directionnal組件裝起來得。接下來是一個ScrollView組件，使用這個組件的理由也很容易理解，文章的內容無法保障在當前屏幕就全部展示完畢，需要有一個把內容下拉的組件。最底部就是評論輸入欄，以及點贊，轉發，收藏(瘋狂暗示)等操作，查看代碼得知：分別是使用TextField，Image組件來實現的。

組件ListContainer的使用

組件ListContainer的使用相對比較復雜，我覺得還是有必要把文檔里面的東西搬運一下。先呈上官方文檔官網文檔鏈接。

概括地來說，LisiContainer的使用有如下幾步

1.在layout目錄下，AbilitySlice對應的布局文件page_listcontainer.xml文件中創建ListContainer。

<ListContainer 
    ohos:id="$+id:list_container" 
    ohos:height="200vp" 
    ohos:width="300vp" 
    ohos:layout_alignment="horizontal_center"/> 

 2.在layout目錄下新建xml文件(例：item_sample.xml)，作為ListContainer的子布局。

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_content" 
    ohos:width="match_parent" 
    ohos:left_margin="16vp" 
    ohos:right_margin="16vp" 
    ohos:orientation="vertical"> 
    <Text 
        ohos:id="$+id:item_index" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:padding="4vp" 
        ohos:text="Item0" 
        ohos:text_size="20fp" 
        ohos:layout_alignment="center"/> 
</DirectionalLayout> 

 3.創建SampleItem.java，作為ListContainer的數據包裝類

public class SampleItem { 
    private String name; 
    public SampleItem(String name) { 
        this.name = name; 
    } 
    public String getName() { 
        return name; 
    } 
    public void setName(String name) { 
        this.name = name; 
    } 
} 

 4.ListContainer每一行可以為不同的數據，因此需要適配不同的數據結構，使其都能添加到ListContainer上。創建SampleItemProvider.java，繼承自BaseItemProvider。必須重寫的方法如下：

示例代碼如下：

// 請根據實際工程/包名引入 
import com.example.myapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.agp.components.*; 
import java.util.List; 
public class SampleItemProvider extends BaseItemProvider { 
    private List<SampleItem> list; 
    private AbilitySlice slice; 
    public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) { 
        this.list = list; 
        this.slice = slice; 
    } 
    @Override 
    public int getCount() { 
        return list == null ? 0 : list.size(); 
    } 
    @Override 
    public Object getItem(int position) { 
        if (list != null && position >= 0 && position < list.size()){ 
            return list.get(position); 
        } 
        return null; 
    } 
    @Override 
    public long getItemId(int position) { 
        return position; 
    } 
    @Override 
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { 
        final Component cpt; 
        if (convertComponent == null) { 
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false); 
        } else {  
            cpt = convertComponent; 
        } 
        SampleItem sampleItem = list.get(position); 
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index); 
        text.setText(sampleItem.getName()); 
        return cpt; 
    } 
} 

5.在Java代碼中添加ListContainer的數據，并適配其數據結構。

@Override 
 public void onStart(Intent intent) { 
     super.onStart(intent); 
     super.setUIContent(ResourceTable.Layout_page_listcontainer); 
     initListContainer(); 
 } 
 private void initListContainer() { 
     ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container); 
     List<SampleItem> list = getData(); 
     SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this); 
     listContainer.setItemProvider(sampleItemProvider); 
 } 
 private ArrayList<SampleItem> getData() { 
     ArrayList<SampleItem> list = new ArrayList<>(); 
     for (int i = 0; i <= 8; i++) { 
         list.add(new SampleItem("Item" + i)); 
     } 
     return list; 
 } 

 6.listContainer在sampleItemProvider 初始化后修改數據。

private void initListContainer() { 
     ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container); 
     List<SampleItem> list = getData(); 
     SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this); 
     listContainer.setItemProvider(sampleItemProvider); 
     list.add(new SampleItem("Item" + sampleItemProvider.getCount())); 
     listContainer.setBindStateChangedListener(new Component.BindStateChangedListener() { 
         @Override 
         public void onComponentBoundToWindow(Component component) { 
             // ListContainer初始化時數據統一在provider中創建，不直接調用這個接口； 
             // 建議在onComponentBoundToWindow監聽或者其他事件監聽中調用。 
             sampleItemProvider.notifyDataChanged(); 
         } 
 
         @Override 
         public void onComponentUnboundFromWindow(Component component) {} 
     }); 
 } 

新聞列表界面的解析

xml文件解析

新聞列表界面的UI效果如下圖：

打開文件一看，里面有很多布局文件，但是想要知道呈現在我們眼前的這一畫面究竟是哪一個文件其實很簡單。因為程序首先運行的是MainAbility類，所以打開MainAbility類，可以看見下圖：

上面這幅圖中setMainRoute方法指向了MainAbilityListSlice類，即路由到MainAbilityListSlice類上了，所以顯示在我們面前的畫面是MainAbilitySlice所加載的布局。于是，我們就繼續到MainAbilityListSlice類的代碼中去找設置布局的語句。

哎，這不就是找到了這個布局到底是誰了嗎?接下來我們就可以到resources包里的layout文件夾中解析xml布局代碼了!我們點開這個xml布局文件：

這是一個DirectionalLayout，方向是垂直的(vertical)。里面有兩個列表，一個是水平方向的，應該就是新聞種類的選擇欄了，另一個在這里并沒有在這里顯式設定方向，不過顯然可以推斷這個就是新聞內容概覽的列表。中間的Component我們暫時還不知道它的作用，不過，我們會知道的。既然已經有了兩個ListContainer，根據上文我們對這個組件的認識，可以推斷肯定有兩個xml文件分別用來編輯這兩個ListContainer里面內容的樣式的，查看layout文件夾里面的xml文件，根據文件名我們就可以推測哪兩個文件是用來編輯ListContainer里的內容的樣式的。

當然，文件名只是起到幫助我們尋找的作用，想要更加嚴謹的話，還是得到java代碼中去尋找語句，打開NewsTypeProvider類，可以看見如下語句，這便驗證了我們的猜測了。(同理，另一個ListContainer也是這樣操作)

接下來就打開這些編輯樣式，打開之前，出于學習的目的，我想我們要先有一個自己大概的猜想，把打開文件作為一種驗證的方法。

新聞種類選擇欄很簡單，我猜測只有一個Text組件，事實也是這樣的。新聞概覽的樣式如上圖，由圖中我們猜測，這是由一個水平方向的Directional布局組織起來的額組件，里面放著一個用來顯示文章標題的Text組件和一個用來顯示文章圖片的Image組件。接下來，讓我們來看看是不是這樣的吧!這里由于截圖大小的問題，就選擇把代碼復制下來。

<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="110vp" 
    ohos:width="match_parent" 
    ohos:orientation="vertical"> 
 
    <!--水平的方向布局，是概覽的每一條新聞的樣式--> 
    <DirectionalLayout 
        ohos:height="109.5vp" 
        ohos:width="match_parent" 
        ohos:orientation="horizontal" 
        ohos:padding="10vp"> 
 
        <!--文章標題--> 
        <Text 
            ohos:id="$+id:item_news_title" 
            ohos:height="match_content" 
            ohos:width="0vp" 
            ohos:max_text_lines="3" 
            ohos:multiple_lines="true" 
            ohos:right_padding="20vp" 
            ohos:text_size="18vp" 
            ohos:weight="3"/> 
        <!--文章圖片--> 
        <Image 
            ohos:id="$+id:item_news_image" 
            ohos:height="match_parent" 
            ohos:width="0vp" 
            ohos:scale_mode="stretch" 
            ohos:weight="2"/> 
 
    </DirectionalLayout> 
 
    <Component 
        ohos:height="0.5vp" 
        ohos:width="match_parent" 
        ohos:background_element="#FF162AAB" 
        /> 
</DirectionalLayout> 

We are almost right.但是，細心點就會發現這里有兩個問題：1.父布局是一個垂直方向的Directional布局，里面才包含一個水平方向的Directional子布局。2.除了我們的猜測之外，Component組件又出現了，并且它的底色是白色。也許到了有必要搞清楚Component組件是什么東西的時候了。在我學習布局的時候會經常用到一個方法：改顏色。默認顏色都是白色導致我們有時候很難分辨我們每個組件的大小，位置等，把顏色改成便于區分，花里胡哨的，會有利于我們這些初學者學習UI布局。

這里把Component的顏色改一下，就會發現它的作用類似于一個分界線，并且它是一條很細的線，這是因為它的height只有0.5vp。那我們就改一改它的參數，驗證一下我們的猜想。讓我們整活起來：把底色改成喜慶的大紅，再把高度給他調成20vp。

這里有一點需要注意的，因為根布局的高度以及其中一個子Directional布局(并且這個布局在Component的上面)的高度已經確定了，所以只更改一個參數是不夠的，再作如下更改：

順便也把前面的Component組件的參數改一下，運行效果如下：

好家伙，有點過年那味兒了，當然我的心情也跟這顏色一樣喜慶，因為這不單驗證了我的猜想，我還學會了新的布局方法：加一個Component組件來使各組件有一個分隔的效果!至此，xml文件我們已經搞得清清楚楚了!接下來就去看看java代碼里面有什么可以學習的地方吧!

Java代碼解析

根據上面我們對ListContainer組件的初步認識，在完成了對xml文件的編輯之后的一步是創建數據包裝類。這個數據包裝類放在beans包里面，里面有NewsType和NewsInfo兩個類，前者很簡單，就不拆開看了，我們粗略地看一下后者。

數據封裝類中的屬性分別為：標題，種類，圖片路徑，閱讀量，點贊量，內容。剩下的是一些設置或者獲得這些屬性的方法。

下一步呢?是的，我們去看看Provider類吧，打開provider文件夾，挑選更為復雜一點的NewsListProvider類打開看看吧，這個類繼承自BaseItemProvider(BaseItemProvider文檔鏈接)，且必須重寫四個方法。這個類有兩個屬性，一個是存放新聞信息的list，一個是上下文。類里面還藏有一個靜態內部類ViewHolder。代碼如下

public class NewsListProvider extends BaseItemProvider { 
    private List<NewsInfo> newsInfoList; 
    private Context context; 
 
    /** 
     * constructor function 
     * 
     * @param listBasicInfo list info 
     * @param context       context 
     */ 
    public NewsListProvider(List<NewsInfo> listBasicInfo, Context context) { 
        this.newsInfoList = listBasicInfo; 
        this.context = context; 
    } 
    //必須重寫的方法1：返回填充的表項個數 
    @Override 
    public int getCount() { 
        return newsInfoList == null ? 0 : newsInfoList.size(); 
    } 
    //必須重寫的方法2：根據id（表項的位置）返回表項 
    @Override 
    public Object getItem(int position) { 
        return newsInfoList.get(position); 
    } 
    //必須重寫的方法3：返回表項的id 
    @Override 
    public long getItemId(int position) { 
        return position; 
    } 
    //必須重寫的方法4：根據id返回組件 
    @Override 
    public Component getComponent(int position, Component component, ComponentContainer componentContainer) { 
        ViewHolder viewHolder; 
        Component temp = component; 
        //如果還沒有component，那么就進行如下操作： 
        if (temp == null) { 
            //1.獲得組件的布局 
            temp = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_news_layout, null, false); 
            //2.創建一個viewHolder，并設置它的屬性 
            viewHolder = new ViewHolder(); 
            //設置它的標題：從temp中的布局找到里面的Text組件，并將其設置成這一個viewHolder的標題 
            viewHolder.title = (Text) temp.findComponentById(ResourceTable.Id_item_news_title); 
            //設置它的圖片：從temp中的布局找到里面的Image組件，并將其設置成這一個viewHolder的圖片 
            viewHolder.image = (Image) temp.findComponentById(ResourceTable.Id_item_news_image); 
            //設置這個組件的標簽，viewHolder就是這個組件的標簽 
            temp.setTag(viewHolder); 
        } 
        //如果已經有component了，通過組件的標簽來獲得viewHolder里面的內容 
        else { 
            viewHolder = (ViewHolder) temp.getTag(); 
        } 
        viewHolder.title.setText(newsInfoList.get(position).getTitle()); 
        viewHolder.image.setPixelMap(CommonUtils.getPixelMapFromPath(context, newsInfoList.get(position).getImgUrl())); 
        //返回這個子組件 
        return temp; 
    } 
 private static class ViewHolder 
    { 
        Text title; 
        Image image; 
    } 

每一語句的內容都注釋到上面的代碼里面了，因此不再贅述。準備工作都做好了，下面回到MainAbilityListSlice類中繼續看代碼。接下來一步，根據上面的ListContainer組件的使用方法，我們要在Java代碼中添加ListContainer的數據，并適配其數據結構。詳細的解析在代碼中，如下：

private void initData() 
   { 
       //得到新聞類型的數據，并創建一個類型為NewsType的列表來存放這些數據，由于這些數據都放在路徑為"entry/resources/rawfile/news_type_datas.json"的json文件中，所以用如下語句提取 
       List<NewsType> newsTypeList = 
               ZSONArray.stringToClassList( 
                       CommonUtils.getStringFromJsonPath(this, "entry/resources/rawfile/news_type_datas.json"), 
                       NewsType.class); 
       //得到所有新聞概覽的數據，并創建一個類型為NewsInfo的列表來存放這些數據，由于這些數據都放在路徑為"entry/resources/rawfile/news_datas.json"的json文件中，所以用如下語句提取 
       totalNewsDataList = 
               ZSONArray.stringToClassList( 
                       CommonUtils.getStringFromJsonPath(this, "entry/resources/rawfile/news_datas.json"), 
                       NewsInfo.class); 
 
       //創建一個用來存儲新聞數據的數據結構ArrayList 
       newsDataList = new ArrayList<>(); 
       newsDataList.addAll(totalNewsDataList); 
 
       //實例化下面兩個類 
       newsTypeProvider = new NewsTypeProvider(newsTypeList, this); 
       newsListProvider = new NewsListProvider(newsDataList, this); 
   } 

然后就是設置響應點擊的監聽器，在這個模板中，點擊新聞種類欄的項可以篩選新聞，并且新聞種類項的樣式會發生變化，點擊新聞概覽的項可以跳轉到詳細頁面。由已經有的代碼可以猜測前者是通過改變Listcontainer的項目的內容來實現，而后者則是通過帶參數的頁面跳轉來實現的。代碼及詳細注釋如下：

private void initListener() { 
       //新聞種類選擇欄的項被點擊時的回調事件 
       selectorListContainer.setItemClickedListener( 
               // 
               (listContainer, component, position, id) -> { 
                   //當被點擊到，不著急變樣式，先獲得這個Text 
                   setCategorizationFocus(false); 
                   selectText = (Text) component.findComponentById(ResourceTable.Id_news_type_text); 
                   //獲得完了，再進行樣式變換 
                   setCategorizationFocus(true);//樣式變換 
                   //清除現有的newsDataList，為的是為下面更新newsDataList作準備，這樣就可以做到跟新聞概覽框的內容與新聞種類相對應 
                   newsDataList.clear(); 
                   for (NewsInfo mTotalNewsData : totalNewsDataList) { 
                       //把屬于當前被點擊的新聞種類的新聞數據加進newsDataList中，做到同步的效果 
                       if (selectText.getText().equals(mTotalNewsData.getType()) || position == 0) { 
                           newsDataList.add(mTotalNewsData); 
                       } 
                   } 
                   //更新列表內容 
                   updateListView(); 
               }); 
       //新聞概覽表中的元素被點擊的時候，進行跳轉操作 
       newsListContainer.setItemClickedListener( 
               (listContainer, component, position, id) -> { 
                   Intent intent = new Intent(); 
                   Operation operation = 
                           new Intent.OperationBuilder() 
                                   .withBundleName(getBundleName()) 
                                   .withAbilityName(MainAbility.class.getName()) 
                                   .withAction("action.detail") 
                                   .build(); 
                   intent.setOperation(operation); 
 
                   //設置跳轉攜帶的參數 
                   intent.setParam(MainAbilityDetailSlice.INTENT_TITLE, newsDataList.get(position).getTitle()); 
                   intent.setParam(MainAbilityDetailSlice.INTENT_READ, newsDataList.get(position).getReads()); 
                   intent.setParam(MainAbilityDetailSlice.INTENT_LIKE, newsDataList.get(position).getLikes()); 
                   intent.setParam(MainAbilityDetailSlice.INTENT_CONTENT, newsDataList.get(position).getContent()); 
                   intent.setParam(MainAbilityDetailSlice.INTENT_IMAGE, newsDataList.get(position).getImgUrl()); 
                   startAbility(intent); 
               }); 
   } 

到此，第一個頁面的實現思路已經被我們剖析得很清楚了。不知不覺已經碼了8000字，如果再把第二個頁面在本貼中剖析，恐淪為“又長又臭”之作，因此決定把這個模板的解析分為兩篇文章，這樣大家讀起來也清晰一點，我寫起來也輕松一點。那么就先對本文來個小結吧!

小結

1.在解析這個模板之前，我一直以為新聞種類欄使用的是Tablist組件來實現的。使用Tablist會出現的問題就是如果標簽過多，多到溢出屏幕，無法做到滑動就能夠查看的效果(如果可以做到，各位大佬能否指點一二?)。

2.解析過程中我學習到了ListContainer的使用方法，并且對其有了較為深刻的認識。

3.解析思路，從MainAbility出發，順藤摸瓜，遇到陌生的組件就去查看文檔，然后配合模板的實戰例子使用，效果杠杠的。點開詳細代碼前，須有自己的想法或者是大概的思路。

4.不了解的功能的組件可以通過設置一個辣眼睛的背景顏色來凸顯它，這個方法在自己寫布局的時候也很好用。

5.Component可作為分界的手段。

更多資料請關注我們的項目 :Awesome-HarmonyOS_木棉花

本項目會長期更新 ，希望隨著鴻蒙一同成長變強的既有我們，也有正在看著這個項目的你。明年3月，深大校園內的木棉花會盛開，那時，鴻蒙也會變的更好，愿這花開，有你我的一份。

文章相關附件可以點擊下面的原文鏈接前往下載

UI_template_news_ability.zip

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com