custom_layout.md

Customize widget style

中文文档

If you want to totally customize your widget, you can define custom ViewHolder and layout. This document will show you how to do it.

Step

Customize your widget style only need three steps.

Step one: create custom message item layout

Create xml layout file, you can refer MessageList's message item layout.

Step two:Create ViewHolder extends BaseMessageViewHolder and implements DefaultMessageViewHolder

The custom ViewHolder's constructor must have two types of parameter: View type and boolean type. For example:

public class TxtViewHolder<MESSAGE extends IMessage>
        extends BaseMessageViewHolder<MESSAGE>
        implements MsgListAdapter.DefaultMessageViewHolder {

    // Notice here
    public TxtViewHolder(View itemView, boolean isSender) {
        super(itemView);
        ...
    }


    @Override
    public void onBind(final MESSAGE message) {
        ...
    }

    @Override
    public void applyStyle(MessageListStyle style) {
        ...
    }

Step three: Use HoldersConfig object to set custom ViewHolder and layout

Remember there several kinds of message: text, photo, voice, video, so you need in place all of them, otherwise, will use default style.

MsgListAdapter.HoldersConfig holdersConfig = new MsgListAdapter.HoldersConfig();
// First parameter is custom ViewHolder class，second one is resource id of custom layout.
holdersConfig.setSenderTxtMsg(CustomViewHolder.class, layoutRes);
holdersConfig.setReceiverTxtMsg(CustomViewHolder.class, layoutRes);
holdersConfig.setSendPhotoMsg(CustomViewHolder.class, layoutRes);
...

That's all! Please try it by yourself!

Add custom message Interface

Add SEND_CUSTOM and RECEIVE_CUSTOM message type. You can use HoldersConfig set these kinds of message's ViewHolder and layout：

MsgListAdapter.HoldersConfig holdersConfig = new MsgListAdapter.HoldersConfig();
holdersConfig.setSendCustomMsg(CustomMessageViewHolder.class, layoutRes);
holdersConfig.setReceiveCustomMsg(CustomMessageViewHolder.class, layoutRes);

Support Variety kinds of custom message(since 0.5.2)

Usage:

• Build your custom view holder, extends BaseMessageViewHolder and implements DefaultMessageViewHolder, like TxtViewHolder:

public class TxtViewHolder<MESSAGE extends IMessage>
        extends BaseMessageViewHolder<MESSAGE>
        implements MsgListAdapter.DefaultMessageViewHolder {
        ...
        }

• Construct CustomMsgConfig, invoke MsgListAdapter.addCustomMsgType:

MsgListAdapter adapter = new MsgListAdapter<>("0", holdersConfig, imageLoader);
// The first parameter is ViewType，must not set number between 0 // and 12, because we are already taken.
// the second is resource id
// the third is sender or not
// the forth is the Class object of custom view holder.
CustomMsgConfig config1 = new CustomMsgConfig(13, R.layout.item.send_custom, true, DefaultCustomViewHolder.class);
// The first parameter is ViewType，the same as above.
adapter.addCustomMsgType(13, config1);

• In your Message (which implements IMessage), you need set the MessageType's type value of your custom message.

public class MyMessage implements IMessage {
 	private int type;
	// in this example the viewType is 13
	public void setType(int viewType) {
      this.type = viewType;
	}
  
    @Override
    public int getType() {
      return this.type;
    }
}