仿UC评论区域----使用kpswitch三方库
2018-12-12 本文已影响0人
吃泥巴的猫
先上效果图：
效果图
本次demo用三方库 implementation 'cn.dreamtobe.kpswitch:library:1.6.1'
附上GitHub地址
本demo主要为底部菜单栏的实现，评论按钮滑动到底部变更为回到顶部按钮，点击评论框出现评论控件
底部菜单栏代码：
public class BottomCommentView extends LinearLayout implements View.OnClickListener {
@BindView(R.id.tv_comment)
TextView tvComment;
@BindView(R.id.iv_comment_and_go_top)
ImageView ivCommentAndGoTop;
@BindView(R.id.iv_good)
ImageView ivGood;
@BindView(R.id.iv_share)
ImageView ivShare;
@BindView(R.id.tv_comment_num)
TextView tvCommentNum;
private boolean goTopFlag = false;
private int commentNum;
public BottomCommentView(Context context) {
this(context, null);
}
public BottomCommentView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BottomCommentView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
View view = LayoutInflater.from(context).inflate(R.layout.bottom_comment_view_layout, this);
ButterKnife.bind(this, view);
setChildViewOnclick();
}
public void setCommentNum(int commentNum) {
this.commentNum = commentNum;
}
public void setGoTop() {
// TODO: 2018/12/7 变更为回到顶部
ivCommentAndGoTop.setImageResource(R.drawable.top);
tvCommentNum.setVisibility(GONE);
goTopFlag = true;
}
public void setComment() {
if (commentNum > 0){
// TODO: 2018/12/7 变更为评论
ivCommentAndGoTop.setImageResource(R.drawable.comment);
tvCommentNum.setVisibility(VISIBLE);
tvCommentNum.setText(commentNum+"");
}
goTopFlag = false;
}
private void setChildViewOnclick() {
tvComment.setOnClickListener(this);
ivCommentAndGoTop.setOnClickListener(this);
ivGood.setOnClickListener(this);
ivShare.setOnClickListener(this);
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.tv_comment) {
listener.onCommentClick();
}
if (v.getId() == R.id.iv_comment_and_go_top) {
if (goTopFlag)
listener.onGoTopClick();
else listener.onCommentListClick();
}
if (v.getId() == R.id.iv_good) {
listener.onGoodClick();
}
if (v.getId() == R.id.iv_share) {
listener.onShareClick();
}
}
private OnItemClickListener listener;
public BottomCommentView setListener(OnItemClickListener listener) {
this.listener = listener;
return this;
}
public interface OnItemClickListener {
//评论框监听
void onCommentClick();
//回到顶部监听
void onGoTopClick();
//点赞监听
void onGoodClick();
//分享按钮监听
void onShareClick();
//评论按钮监听
void onCommentListClick();
}
}
样式文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:orientation="horizontal"
android:gravity="center_vertical">
<TextView
android:id="@+id/tv_comment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1.5"
android:background="@drawable/comment_edit_bg"
android:hint="请输入回复内容"
android:textColor="@color/colorTextSmall"
android:textSize="@dimen/sp_14" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp">
<ImageView
android:id="@+id/iv_comment_and_go_top"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:src="@drawable/comment" />
<TextView
android:id="@+id/tv_comment_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="253"
android:textSize="8sp"
android:background="@drawable/comment_num_bg"
android:textColor="@color/colorWhite"/>
<ImageView
android:id="@+id/iv_good"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerInParent="true"
android:src="@drawable/good" />
<ImageView
android:id="@+id/iv_share"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="@drawable/share" />
</RelativeLayout>
</LinearLayout>
用ScrollView实现回到顶部的功能，需要重写ScrollView类，重写onScrollChanged，并暴露接口
public class MyScrollview extends ScrollView {
private ScrollViewListener scrollViewListener = null;
public MyScrollview(Context context) {
super(context);
}
public MyScrollview(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public MyScrollview(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
public interface ScrollViewListener {
void onScrollChanged(MyScrollview scrollView, int x, int y, int oldx, int oldy);
}
}
在activity中实现接口：
svContent.setScrollViewListener((scrollView, x, y, oldx, oldy) -> {
View childAt = scrollView.getChildAt(0);
int childHeight = childAt.getHeight();//获取子控件高度
int height = scrollView.getHeight();//获取Scrollview的控件高度
if (y + height == childHeight) {//判断条件 当子控件高度=Scrollview的控件高度+x的时候控件到达底部
bottomCommentView.setGoTop();
} else bottomCommentView.setComment();
});
评论框始终位于键盘上方，且键盘与panel可互相且换，根布局需要KPSwitchRootLinearLayout（也可是RelativeLayout等），panel需要KPSwitchPanelLinearLayout等同级，[详见三方库文档](https://github.com/Jacksgong/JKeyboardPanelSwitch/blob/master/NON-FULLSCREEN_TUTORIAL_zh.md）：
<?xml version="1.0" encoding="utf-8"?>
<cn.dreamtobe.kpswitch.widget.KPSwitchRootLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<include
android:id="@+id/title"
layout="@layout/app_title_bar" />
<com.example.administrator.keyboarddemo.MyScrollview
android:id="@+id/sv_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
</LinearLayout>
</com.example.administrator.keyboarddemo.MyScrollview>
<include
android:id="@+id/ly_comment_edit"
layout="@layout/comment_view_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<cn.dreamtobe.kpswitch.widget.KPSwitchPanelLinearLayout
android:id="@+id/panel_root"
style="@style/Panel"
android:visibility="gone">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorTextDeep" />
</cn.dreamtobe.kpswitch.widget.KPSwitchPanelLinearLayout>
<com.example.administrator.keyboarddemo.BottomCommentView
android:id="@+id/bottom_comment_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</cn.dreamtobe.kpswitch.widget.KPSwitchRootLinearLayout>
在activity中实现：
@SuppressLint("ClickableViewAccessibility")
private void setKeyBoard() {
bottomCommentView.setCommentNum(22);
bottomCommentView.setListener(this);
KeyboardUtil.attach(this, panelRoot,
isShowing -> Log.d(TAG, String.format("Keyboard is %s", isShowing
? "showing" : "hiding")));
KPSwitchConflictUtil.attach(panelRoot, ivEmoji, editComment,
switchToPanel -> {
if (switchToPanel) {
editComment.clearFocus();
} else {
editComment.requestFocus();
}
});
svContent.setOnTouchListener((view, motionEvent) -> {
if (motionEvent.getAction() == MotionEvent.ACTION_UP) {
KPSwitchConflictUtil.hidePanelAndKeyboard(panelRoot);
lyComment.setVisibility(View.GONE);
bottomCommentView.setVisibility(View.VISIBLE);
}
return false;
});
}
详情可见Demo
