HarmonyOS ListContainer 圖文並排

1.兩個工具類:DateUtils  + HttpHelper

2.兩個依賴包:okhttp3  +  gson

3.裝載圖片類:Picasso,本地+調試模式,都不能訪問本地的網絡,運行需要註釋裝載圖片,因爲是華爲虛擬機

  解決方式:內網穿透技術  ,比如:Ngrok  ,教程:2021最新HarmonyOS鴻蒙2.0系統應用開發|基礎入門教程到實戰—更新中…_嗶哩嗶哩_bilibili

implementation 'com.squareup.okhttp3:okhttp:3.10.0'
compile 'com.google.code.gson:gson:2.6.2'
implementation 'io.openharmony.tpc.thirdlib:picasso:1.0.4'

 

 

 

 

package com.example.demo1.utils;

import java.text.SimpleDateFormat;
import java.util.Date;

public class DateUtils {
    public static String format(long l) {
        Date date = new Date(l);
        String format = new SimpleDateFormat("yyyy-MM-dd").format(date);

        return format;
    }
}
package com.example.demo1.utils;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;

public class HttpHelper {
    public static HttpHelper instance;
    OkHttpClient okHttpClient;

    public HttpHelper() {
        okHttpClient = new OkHttpClient().newBuilder().build();
    }

    public static HttpHelper getInstance() {
        if (instance == null) {
            synchronized (HttpHelper.class) {
                if (instance == null) {
                    instance = new HttpHelper();
                }
            }
        }

        return instance;
    }

    public void doGet(String url, Callback callback) {
        Request request = new Request.Builder().url(url).build();
        Call call = okHttpClient.newCall(request);

        call.enqueue(callback);
    }

}
package com.example.demo1.data;

import com.example.demo1.ResourceTable;
import com.example.demo1.utils.DateUtils;
import com.squareup.picasso.Picasso;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import ohos.global.resource.Resource;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

import java.util.List;

public class MovieProvider extends BaseItemProvider {
    public final HiLogLabel hiLogLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MovieProvider");
    List<Movie> list;
    AbilitySlice slice;

    public MovieProvider(List<Movie> list, AbilitySlice slice) {
        this.list = list;
        this.slice = slice;
    }

    @Override
    public int getCount() {
        return list != null ? list.size() : 0;
    }

    @Override
    public Object getItem(int i) {
        if (list != null && i >= 0 && i < list.size()) {
            return list.get(i);
        }
        return null;
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        final Component cpt;
        HiLog.debug(hiLogLabel, "getComponent" + i);
        if (component == null) {
            cpt = LayoutScatter.getInstance(slice)
                    .parse(ResourceTable.Layout_MovieListItem, null, false);
        } else {
            cpt = component;
        }

        Text publishTime = (Text) cpt.findComponentById(ResourceTable.Id_text_publishTime);
        Text shortTitle = (Text) cpt.findComponentById(ResourceTable.Id_text_shortTitle);
        Text vt = (Text) cpt.findComponentById(ResourceTable.Id_text_vt);
        Image vpic = (Image) cpt.findComponentById(ResourceTable.Id_vpic);


        publishTime.setText(DateUtils.format(list.get(i).getPublishTime()));
        shortTitle.setText(list.get(i).getShortTitle());
        vt.setText(list.get(i).getVt());

        //加載圖片-------------
//        Picasso.get().load(list.get(i).getVpic())
//                .placeholder(ResourceTable.Media_icon)
//                .resize(100, 100)
//                .into(vpic);

        return cpt;
    }
}
package com.example.demo1.slice;

import com.example.demo1.ResourceTable;
import com.example.demo1.data.Movie;
import com.example.demo1.data.MovieProvider;
import com.example.demo1.utils.HttpHelper;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.media.photokit.metadata.AVStorage;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.Response;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class MovieListContainerSlice extends AbilitySlice {
    public final HiLogLabel hiLogLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MovieListContainerSlice");

    String url = "http://127.0.0.1:5002/videos";

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_MovieListContainer);

        initView();//查詢數據
    }

    private void initView() {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_movieListContainer);

        HttpHelper.getInstance().doGet(url, new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                HiLog.debug(hiLogLabel, "onFailure");
                HiLog.debug(hiLogLabel, new Gson().toJson(e));
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String str = response.body().string();
                List<Movie> list = new Gson().fromJson(str, new TypeToken<List<Movie>>() {
                }.getType());
                HiLog.debug(hiLogLabel, "onResponse:size:" + list.size());


                MovieProvider movieProvider = new MovieProvider(list, MovieListContainerSlice.this);
                //更新ui
                getUITaskDispatcher().asyncDispatch(new Runnable() {
                    @Override
                    public void run() {
                        listContainer.setItemProvider(movieProvider);
                        movieProvider.notifyDataChanged();
                    }
                });
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}
<?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:alignment="center"
    ohos:orientation="vertical">

    <ListContainer
        ohos:id="$+id:movieListContainer"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ListContainer>

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

    <Image
        ohos:id="$+id:vpic"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:icon"></Image>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="電影標題:"
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_shortTitle"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="海賊王"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="發佈時間:"
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_publishTime"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="11-25"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:alignment="center"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">

        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="發佈簡介:"
            ohos:text_size="15vp"
            />

        <Text
            ohos:id="$+id:text_vt"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:hint="陰謀暴力!海賊管家克洛船長"
            ohos:hint_color="red"
            ohos:left_margin="10vp"
            ohos:text_size="15vp"
            />
    </DirectionalLayout>

    <Component
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:background_element="gray"></Component>
</DirectionalLayout>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章