HarmonyOS_ListContainer

HarmonyOS_ListContainer

准备ListContainer

• 在layout下新建listitem.xml来设计每一项布局

<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">

    <DirectionalLayout
        ohos:height="50fp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <Text
            ohos:id="$+id:item_text1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_color="#FFFFFF"
            ohos:padding="4vp"
            ohos:text="name"
            ohos:text_size="30fp"
            ohos:layout_alignment="center"/>

        <Text
            ohos:id="$+id:item_text2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_color="#FFACACAC"
            ohos:padding="4vp"
            ohos:text="word"
            ohos:text_size="20fp"
            ohos:layout_alignment="center"/>

    DirectionalLayout>

DirectionalLayout>

• 在包名\list下建立Item.java来关联每个项中的控件

package kelvin.harmony.demo.list;

public class Item
{
    private String text;

    public Item( String text )
    {
        this.text = name;
    }

    public String getText()
    {
        return text;
    }

    public void setText( String text )
    {
        this.text = text;
    }
}

• 在包名\list下建立ItemProvider.java来动态提供项

package kelvin.harmony.mailtalk.list;

import kelvin.harmony.mailtalk.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.List;

public class ItemProvider extends BaseItemProvider
{
    private final List< Item > list;
    private final AbilitySlice slice;

    public ItemProvider( List< Item > 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 component;

        if( convertComponent == null )
        {
            component = LayoutScatter.getInstance( slice ).parse( ResourceTable.Layout_list_item, null, false );
        }
        else
        {
            component = convertComponent;
        }

        Text text = ( Text ) component.findComponentById( ResourceTable.Id_item_text1 );
        Item Item = list.get( position );

        text.setText( Item.getName() );

        return component;
    }
}

使用ListContainer

• 申请列表类并关联

ListContainer listContainer = ( ListContainer ) findComponentById( ResourceTable.Id_listContainer );

• 设置列表内容

List< Item > list = getData();  //getData为列表提供数据
ItemProvider itemProvider = new ItemProvider( list, this );
listContainer.setItemProvider( itemProvider );

• 设置列表第一项顶端到列表顶部距离100&最后一项底端到列表底部距离150

listContainer.setContentOffSet( 100, 150 );

• 设置监听事件

listContainer.setItemClickedListener
                (
                    ( container, component, position, id ) ->
                        {
                            Item item = ( Item ) listContainer.getItemProvider().getItem( position );
                            //Log
                            System.out.println( "friend list onclick:  name = " + item.getName() + "    address = " + item.getAddress() );
                            //Send
                            ConversationIntent.setParam( "name", item.getName() );
                            ConversationIntent.setParam( "address", item.getAddress() );
                            present( new ConversationSlice(), ConversationIntent );
                        }
                );

• 支持旋转表冠来滑动列表

listContainer.setBindStateChangedListener
                (
                        new Component.BindStateChangedListener()
                        {
                            @Override
                            public void onComponentBoundToWindow( Component component )
                            {
                                component.setTouchFocusable( true );
                                component.requestFocus();
                            }

                            @Override
                            public void onComponentUnboundFromWindow( Component component ) {}
                        }
                );

• 设置数据

private ArrayList< Item > getData()
{
    ArrayList< Item > list = new ArrayList<>();

    list.add( new Item( "董子行" ) );
    list.add( new Item( "姚斯琪" ) );

    return list;
}