logo
当前页

自定义麦位

指定用户麦位

语聊房 UIKit(Live Audio Room Kit) 支持为语聊房中的角色设置指定麦位,主要接口如下:

  1. takeSeatIndexWhenJoining:当加入语聊房时(对于主持人和发言人),使用此选项自动设置用户所坐的麦位。
  2. hostSeatIndexes:仅用于设置 主持人 的特殊麦位(不允许发言人和观众就坐)。

自定义麦位布局

语聊房 UIKit 的布局方式,与行和对齐方式相关,如需自定义麦位布局,请参考以下说明:

  • ZegoLiveAudioRoomLayoutConfig:
  1. rowConfigs(List< ZegoLiveAudioRoomLayoutRowConfig >): 有多少行,以及每行的配置方式。
  1. rowSpacing(int): 每行的间距,必须 ≥ 0。
  • ZegoLiveAudioRoomLayoutRowConfig:
    1. count(int): 每行的麦位数,范围 [1 - 4]。
    2. seatSpacing(int): 每个麦位的水平间距,必须 ≥ 0(仅当对齐方式为 FLEX_STARTFLEX_ENDCENTER 时生效)。
    3. alignment(ZegoLiveAudioRoomLayoutAlignment): 为列设置的对齐方式。
  • ZegoLiveAudioRoomLayoutAlignment:
    1. FLEX_START: 将麦位尽可能靠近起始位置。
    2. FLEX_END: 将麦位尽可能靠近结束位置。
    3. CENTER: 将麦位尽可能靠中间位置。
    4. SPACE_BETWEEN: 在麦位之间均匀分布剩余空间。
    5. SPACE_AROUND: 在麦位之间均匀分布剩余空间,并在第一个和最后一个麦位之前和之后分布一半的空间。
    6. SPACE_EVENLY: 在麦位之间均匀分布剩余空间,并在第一个和最后一个麦位之前和之后分布相同的空间。

六种 alignment 效果如下:

以如下麦位设置为例,举例说明自定义设置的实现方式:

  1. 第一行的唯一麦位,设置为主持人的特殊麦位。
  1. 第二行和第三行的麦位数为 4,对齐方式为 SPACE_AROUND
Java
Kotlin
public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
            config.takeSeatIndexWhenJoining = 0;
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        config.hostSeatIndexes = Collections.singletonList(0);
        config.layoutConfig.rowConfigs = Arrays.asList(
                new ZegoLiveAudioRoomLayoutRowConfig(1, ZegoLiveAudioRoomLayoutAlignment.CENTER),
                new ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND),
                new ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND));

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}
1
Copied!
class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            config.takeSeatIndexWhenJoining = 0
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }
        config.hostSeatIndexes = listOf(0)
        config.layoutConfig.rowConfigs = Arrays.asList<Any>(
            ZegoLiveAudioRoomLayoutRowConfig(1, ZegoLiveAudioRoomLayoutAlignment.CENTER),
            ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND),
            ZegoLiveAudioRoomLayoutRowConfig(4, ZegoLiveAudioRoomLayoutAlignment.SPACE_AROUND)
        )

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName, roomID, config
        )
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}
1
Copied!

自定义麦位的 UI

默认情况下,麦位的用户界面会显示围绕用户头像的声浪。

如果您对声浪样式不满意,或者想自定义前景和背景视图,请相应地使用seatConfig中的配置。

隐藏声浪

默认情况下,声浪会显示出来,如果要隐藏它,请使用showSoundWaveInAudioMode配置。

showSoundWaveInAudioMode: 使用此选项来决定是否显示用户头像周围的声浪。默认情况下显示。

以下是参考代码:

Java
Kotlin
public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        config.seatConfig.showSoundWaveInAudioMode = false;

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}
1
Copied!
class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

        config.seatConfig.showSoundWaveInAudioMode = false

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
            appID, appSign, userID, userName, roomID, config
        )
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}
1
Copied!

自定义麦位的前景或背景视图

要自定义用户麦位的视图,请根据需要在seatConfig中设置以下属性。

  • foregroundViewProvider:使用此属性自定义组件或者在视图的顶层添加一些自定义组件,例如显示用户级别的图标。
  • backgroundColor:使用此属性自定义背景颜色。
  • backgroundImage:使用此属性自定义背景图像。

以下是效果和参考代码的示例:

Java
Kotlin
public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }
        config.seatConfig.backgroundColor = 0xffcccccc;
        config.seatConfig.foregroundViewProvider = new ZegoLiveAudioRoomSeatForegroundViewProvider() {
            @Override
            public ZegoBaseAudioVideoForegroundView getForegroundView(ViewGroup parent, ZegoUIKitUser uiKitUser, int seatIndex) {
                return new YourCustomAudioForegroundView(parent.getContext(), uiKitUser,seatIndex);
            }
        };

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}
1
Copied!
class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

      config.seatConfig.backgroundColor = 0xffcccccc
      config.seatConfig.foregroundViewProvider = object : ZegoLiveAudioRoomSeatForegroundViewProvider() {
            fun getForegroundView(parent:ViewGroup,uiKitUser: ZegoUIKitUser?,seatIndex: int): ZegoBaseAudioVideoForegroundView {
                return YourCustomAudioForegroundView(parent.context, uiKitUser, seatIndex)
            }
        }

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName, roomID, config)
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}
1
Copied!

自定义麦位打开/关闭状态对应的图标

要自定义麦位打开/关闭状态对应的图标,请根据需要在seatConfig中中设置以下属性。

  • openIcon:使用此属性自定义麦位的打开图标,通常显示为麦位的默认图标。
  • closeIcon:使用此属性自定义麦位的关闭图标,当主持人关闭麦位时显示。

以下是参考代码:

Java
Kotlin
public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }
        config.seatConfig.openIcon = yourOpenDrawable;
        config.seatConfig.closeIcon = yourCloseDrawable;       
     

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}
1
Copied!
class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName
        
        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

      config.seatConfig.openIcon = yourOpenDrawable;
      config.seatConfig.closeIcon = yourCloseDrawable;       
     

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName, roomID, config)
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}
1
Copied!

Previous

设置用户头像

Next

自定义上麦逻辑