直播互动界面优化方案

背景:

直播界面的布局是上部16:9的主视频区域,下部是聊天输入布局加上16:9的文档布局。剩下的区域放视频列表,要求适配剩余位置居中。

存在问题:

1,当手机分辨率低,中间剩下的位置较少的情况下,小视频列表会显示不全,甚至和上下视频文档区域产生重叠。
2,主播的图标以及文字被盖住(这个和小视频会盖住主视频以及文档区域一样,因为小视频view是后面add进去的)

解决方案:

代码处理。先算出剩余空间高度,然后按比例给出高度

代码

获取到剩余高度传给videoadapter

mVideoAdapter=newVideoAdapter(DocClassLiveActivity.this,mVideos.getMeasuredHeight());

在videoviewholder里处理每一个item的宽高

VideoViewHolder(View itemView) {
            super(itemView);
            int itemHeight = parentHeight - DisplayUtils.dip2px(5f);
            int itemWidth = (int) (itemHeight / 1.76);
            FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mDocItemRoot.getLayoutParams();
            layoutParams.setMargins(0,DisplayUtils.dip2px(2.5f),0,DisplayUtils.dip2px(2.5f));
            layoutParams.width = itemWidth;
            layoutParams.height = itemHeight;
            mDocItemRoot.setLayoutParams(layoutParams);

        }

itemHeight 减去5dp是为了给上下留点缝隙,宽高比给她1.76

if(videoStreamView.getIsPresenter()){
              params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT);
            }else {
                params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT);
            }
            params.addRule(RelativeLayout.CENTER_IN_PARENT);
            renderer.setLayoutParams(params);
            holder.mDocItemRoot.addView(renderer,0 );

添加的时候对是否为主视频进行区分,addview的时候后面参数为0,处理添加的view盖住主讲图标以及名字问题。

你可能感兴趣的:(直播互动界面优化方案)