logo
当前页

自定义背景

语聊房 UIKit (Live Audio Room Kit) 允许您自定义语聊房的背景视图。

实现流程

以实现如下自定义设置为例,将为您举例说明具体实现方式。

  1. 在左上角显示语聊房的标题和房间 ID。
  2. 显示自定义背景图片。

具体实现方式如下:

  1. 创建 AudioRoomBackgroundView 类。
Java
Kotlin
  import android.content.Context;
  import android.graphics.Color;
  import android.text.TextUtils.TruncateAt;
  import android.util.AttributeSet;
  import android.util.TypedValue;
  import android.widget.FrameLayout;
  import android.widget.LinearLayout;
  import android.widget.TextView;
  import androidx.annotation.NonNull;
  import androidx.annotation.Nullable;
  import com.zegocloud.uikit.utils.Utils;

  public class AudioRoomBackgroundView extends FrameLayout {

      private TextView roomName;
      private TextView roomID;

      public AudioRoomBackgroundView(@NonNull Context context) {
          super(context);
          initView();
      }

      public AudioRoomBackgroundView(@NonNull Context context, @Nullable AttributeSet attrs) {
          super(context, attrs);
          initView();
      }

      public AudioRoomBackgroundView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
          super(context, attrs, defStyleAttr);
          initView();
      }

      private void initView() {
          LinearLayout linearLayout = new LinearLayout(getContext());
          linearLayout.setOrientation(LinearLayout.VERTICAL);

          LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2, -2);
          int marginEnd = Utils.dp2px(12, getResources().getDisplayMetrics());
          params.setMargins(0, 0, marginEnd, 0);

          roomName = new TextView(getContext());
          roomName.setMaxLines(1);
          roomName.setEllipsize(TruncateAt.END);
          roomName.setSingleLine(true);
          roomName.getPaint().setFakeBoldText(true);
          roomName.setTextColor(Color.parseColor("#ff1b1b1b"));
          roomName.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
          roomName.setMaxWidth(Utils.dp2px(200, getResources().getDisplayMetrics()));
          linearLayout.addView(roomName, params);

          roomID = new TextView(getContext());
          roomID.setMaxLines(1);
          roomID.setEllipsize(TruncateAt.END);
          roomID.setSingleLine(true);
          roomID.setTextColor(Color.parseColor("#ff606060"));
          roomID.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
          roomID.setMaxWidth(Utils.dp2px(120, getResources().getDisplayMetrics()));
          linearLayout.addView(roomID, params);

          FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(-2, -2);
          int marginStart = Utils.dp2px(16, getResources().getDisplayMetrics());
          int marginTop = Utils.dp2px(10, getResources().getDisplayMetrics());
          layoutParams.setMargins(marginStart, marginTop, 0, 0);
          addView(linearLayout, layoutParams);
      }

      public void setRoomName(String roomName) {
          this.roomName.setText(roomName);
      }

      public void setRoomID(String roomID) {
          this.roomID.setText("ID: " + roomID);
      }
  }
1
Copied!
  import android.content.Context
  import android.graphics.Color
  import android.text.TextUtils.TruncateAt
  import android.util.AttributeSet
  import android.util.TypedValue
  import android.widget.FrameLayout
  import android.widget.LinearLayout
  import android.widget.TextView
  import com.zegocloud.uikit.utils.Utils

  class AudioRoomBackgroundView : FrameLayout {
      private lateinit var roomName: TextView
      private lateinit var roomID: TextView

      constructor(context: Context) : super(context) {
          initView()
      }

      constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
          initView()
      }

      constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
          context, attrs, defStyleAttr
      ) {
          initView()
      }

      private fun initView() {
          val linearLayout = LinearLayout(context)
          linearLayout.orientation = LinearLayout.VERTICAL
          val params = LinearLayout.LayoutParams(-2, -2)
          val marginEnd: Int = Utils.dp2px(12, resources.displayMetrics)
          params.setMargins(0, 0, marginEnd, 0)
          roomName = TextView(context)
          roomName.maxLines = 1
          roomName.ellipsize = TruncateAt.END
          roomName.isSingleLine = true
          roomName.paint.isFakeBoldText = true
          roomName.setTextColor(Color.parseColor("#ff1b1b1b"))
          roomName.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
          roomName.maxWidth = Utils.dp2px(200, resources.displayMetrics)
          linearLayout.addView(roomName, params)
          roomID = TextView(context)
          roomID.maxLines = 1
          roomID.ellipsize = TruncateAt.END
          roomID.isSingleLine = true
          roomID.setTextColor(Color.parseColor("#ff606060"))
          roomID.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
          roomID.maxWidth = Utils.dp2px(120, resources.displayMetrics)
          linearLayout.addView(roomID, params)
          val layoutParams = LayoutParams(-2, -2)
          val marginStart: Int = Utils.dp2px(16, resources.displayMetrics)
          val marginTop: Int = Utils.dp2px(10, resources.displayMetrics)
          layoutParams.setMargins(marginStart, marginTop, 0, 0)
          addView(linearLayout, layoutParams)
      }

      fun setRoomName(roomName: String?) {
          this.roomName.text = roomName
      }

      fun setRoomID(roomID: String) {
          this.roomID.text = "ID: $roomID"
      }
  }
1
Copied!
  1. AudioRoomBackgroundView 设置到 ZegoUIKitPrebuiltLiveAudioRoomFragment
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; // 替换为您的 AppID,请从 ZEGO 控制台获取
          String appSign = yourAppSign; // 替换为您的 AppSign,请从 ZEGO 控制台获取
          String userID = yourUserID; // 替换为您的 UserID
          String userName = yourUserName; // 替换为您的 UserName

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

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

          ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
              appID, appSign, userID, userName,roomID,config);
          getSupportFragmentManager().beginTransaction()
              .replace(R.id.fragment_container, fragment)
              .commitNow();
          AudioRoomBackgroundView roomBackgroundView = new AudioRoomBackgroundView(this);
          roomBackgroundView.setRoomID(roomID);
          roomBackgroundView.setRoomName("Live Audio Room");
          roomBackgroundView.setBackgroundResource(R.drawable.background);
          fragment.setBackgroundView(roomBackgroundView);
      }
  }
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 // 替换为您的 AppID,请从 ZEGO 控制台获取
          val appSign = yourAppSign // 替换为您的 AppSign,请从 ZEGO 控制台获取
          val userID = YourUserID // 替换为您的 UserID
          val userName = YourUserName // 替换为您的 UserName
          
          val isHost = intent.getBooleanExtra("host", false)
          val roomID = intent.getStringExtra("roomID")

          val config: ZegoUIKitPrebuiltLiveAudioRoomConfig
          if (isHost) {
              config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
          } else {
              config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
          }
          val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(
              appID, appSign, userID, userName, roomID, config
          )
          supportFragmentManager.beginTransaction()
              .replace(R.id.fragment_container, fragment)
              .commitNow()
          val roomBackgroundView = AudioRoomBackgroundView(this)
          roomBackgroundView.setRoomID(roomID)
          roomBackgroundView.setRoomName("Live Audio Room")
          roomBackgroundView.setBackgroundResource(R.drawable.background)
          fragment.setBackgroundView(roomBackgroundView)
      }
  }
1
Copied!

Previous

自定义上麦逻辑

Next

自定义用户属性

当前页

返回到顶部