一对一直播源码开发，表情面板无缝切换的实现
一对一直播源码开发，表情面板无缝切换的实现
云豹科技程序员
修改于 2021-06-28 18:10:54
修改于 2021-06-28 18:10:54
在一对一直播源码使用过程中，有时会出现软键盘切换闪屏问题，就是当切换表情的时候屏幕会跳动，因此要对一对一直播源码表情面板无缝切换进行优化。
第一步 在module的build.gradle中加入（这个库很小，8个类，最大类也就200来行代码，小类几十行代码）
compile 'net.qiujuer.widget:airpanel:1.0.0'第二步 创建空气面板布局lay_chat_air_panel.xml(这个里面就需要用到库中的自定的一个控件了)
<?xml version="1.0" encoding="utf-8"?>
<net.qiujuer.widget.airpanel.AirPanelLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/airPanelSubLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="1px"
android:visibility="gone">
<!--airPanelSubLayout这个根布局的id必须是这个-->
<!--这里放入一个fragment,在这个fragment里面实现表情、语音、图片、输入法的相关逻辑切换-->
<fragment
android:id="@+id/frag_panel"
class="com.mingchu.cnim4android.fragment.panel.PanelFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="@layout/fragment_panel" />
</net.qiujuer.widget.airpanel.>AirPanelLinearLayout这里给出这个fragment的相关逻辑实现(当然这个逻辑和软键盘没有任何关系了，只是负责控制哪个面板的显示和隐藏，因为所有的关于软键盘的控制都已经被AirPanelLinearLayout完成了)
public class PanelFragment extends BaseFragment implements FaceListener {
//表情面板
private View mFacePanel;
//图片相册面板
private View mGalleryPanel;
//录音面板
private View mRecordPanel;
private PanelCallback mCallback;
public PanelFragment() {
// Required empty public constructor
}
@Override
protected int getContentLayoutId() {
return R.layout.fragment_panel;
}
@Override
protected void initView(View view) {
super.initView(view);
initRecord(view);
initFace(view);
initGallery(view);
}
//初始化表情布局
private void initFace(View root) {
View facePanel = mFacePanel = root.findViewById(R.id.lay_face_panel);
//todo 接下来就是相关的表情加载和相关点击的实现 这个有空就为大家在以后的文章中讲解
//
}
/**
* 初始化录音布局
*
* @param root 根布局
*/
private void initRecord(View root) {
View recordPanel = mRecordPanel = root.findViewById(R.id.lay_record_panel);
//todo 接下来就是相关的语音录制相关点击的实现 这个有空就为大家在以后的文章中讲解
}
/**
* 初始化图片画廊
*
* @param root 根布局
*/
private void initGallery(View root) {
View galleryPanel = mGalleryPanel = root.findViewById(R.id.lay_gallery_panel);
//todo 接下来就是相关的图片展示和相关点击的实现 这个有空就为大家在以后的文章中讲解
}
/**
* 发送
*
* @param galleryView
* @param paths
*/
private void onSendGalleryClick(GalleryView galleryView, String[] paths) {
galleryView.clear();
PanelCallback callback = mCallback;
if (callback == null)
return;
callback.onSendGalleryClick(paths);
}
public void setup(PanelCallback callback) {
this.mCallback = callback;
}
public boolean isOpenFace() {
return mFacePanel.getVisibility() == View.VISIBLE;
}
public boolean isOpenMore() {
return mGalleryPanel.getVisibility() == View.VISIBLE;
}
/**
* 显示表情界面
*/
public void showFace() {
mFacePanel.setVisibility(View.VISIBLE);
mGalleryPanel.setVisibility(View.GONE);
mRecordPanel.setVisibility(View.GONE);
}
/**
* 显示录音界面
*/
public void showRecord() {
mFacePanel.setVisibility(View.GONE);
mGalleryPanel.setVisibility(View.GONE);
mRecordPanel.setVisibility(View.VISIBLE);
}
/**
* 显示图片界面
*/
public void showGallery() {
mFacePanel.setVisibility(View.GONE);
mGalleryPanel.setVisibility(View.VISIBLE);
mRecordPanel.setVisibility(View.GONE);
GalleryView view = (GalleryView) mGalleryPanel.findViewById(R.id.view_gallery);
view.clear();
}
public void showMore() {
showGallery();
}
/**
* 面板变化和相关输入输出的回调
*/
public interface PanelCallback {
//获取到输入的EditText的值
EditText getInputEditText();
/**
* 点击发送按钮的时候发送图片地址集合
*
* @param paths 本地相册图片路径
*/
void onSendGalleryClick(String[] paths);
/**
* 录音完成的时候回调
*
* @param file 录音文件
* @param time 录音时长
*/
void onRecordDone(File file, long time);
}
}这个时候万事俱备，只差我们怎么使用了，不急，一步一步来，毕竟心急吃不了热豆腐。刚才创建的那个布局，我们放到我们需要使用的fragment或者activity的布局里面
<!--注意一点，根布局使用的是AirPanelLinearLayout-->
<include layout="@layout/lay_chat_sub_air_panel"/>好了，看下如何在fragment编写相关逻辑吧，当然我这里使用的是fragment，activity里面使用的逻辑也是一样的。
//第一步
//刚才我们实现的面板fragment
private PanelFragment mPanelContent;
//接口
private AirPanel.Boss mPanelBoss;
//第二步
mPanelBoss = (AirPanel.Boss) view.findViewById(R.id.lay_container); //这个id就是根布局的id (也就是AirPanelLinearLayout或者是子类的id)
mPanelBoss.setPanelListener(new AirPanel.Listener() {
@Override
public void requestHideSoftKeyboard() {
// 这里面传递的是EditText控件 也就是我们的输入控件 Util这个方法是集成的库中的工具类
Util.hideKeyboard(mEtContent);
}
});
//第三步 找到我们的fragment 可以操作里面的控制逻辑
PanelFragment fragment = (PanelFragment) getChildFragmentManager().findFragmentById(R.id.frag_panel);
//让我们的fragment实现这个方法PanelCallback
fragment.setup(this);
mPanelContent = fragment;
//这个时候我们可以操作了 因为实现了PanelCallback这个接口，那么会实现里面的方法，我们看下如何处理吧
@Override
public EditText getInputEditText() {
//获取表情输入 当然需要自己进行转换
return mEtContent;
}
@Override
public void onSendGalleryClick(String[] paths) {
//图片地址 这个时候我们需要进行上传逻辑
mPresenter.pushImages(paths);
}
@Override
public void onRecordDone(File file, long time) {
//语音的发起
mPresenter.pushAudio(file.getAbsolutePath(), time);
}然后我们看下点击逻辑吧
//语音切换
@OnClick(R.id.btn_record)
void onRecordClick() {
if (mPanelBoss.isOpen()) {
Util.showKeyboard(mEtContent);
} else {
mPanelContent.showRecord();
mPanelBoss.openPanel();
}
}
//图片点击
private void onMoreClick() {
if (mPanelBoss.isOpen() && mPanelContent.isOpenMore()) {
Util.showKeyboard(mEtContent);
} else {
mPanelContent.showMore();
mPanelBoss.openPanel();
}
}
//表情点击
@OnClick(R.id.btn_face)
void onFaceClick() {
if (mPanelBoss.isOpen() && mPanelContent.isOpenFace()) {
//显示输入法
Util.showKeyboard(mEtContent);
} else {
mPanelContent.showFace();
mPanelBoss.openPanel();
}
}好了，这个时候就已经完美的实现了一对一直播源码中表情、输入法、语音、图片面板的切换了，是不是很简单哈。以上就是“一对一直播源码开发，表情面板无缝切换的实现”的全部内容了，希望对大家有帮助。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
云直播
云直播（Cloud Streaming Services，CSS）为您提供极速、稳定、专业的云端直播处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、快直播、云导播台三种服务，分别针对大规模实时观看、超低延时直播、便捷云端导播的场景，配合腾讯云视立方·直播 SDK，为您提供一站式的音视频直播解决方案。