Android仿直播評論功能效果
廢話不多說，直接上效果圖：
相信很多人對這個效果都不陌生，在很多的APP上面都有類似的效果，特別是在直播類的，一般涉及到評論的地方都會有很多這種效果出現(xiàn)，今天我們就來看一看如何去實現(xiàn)這個效果。
首先分析一下：
1.可以動態(tài)添加視圖并且支持滾動，所以可以采用ScrollView+LinearLayout或者RecyclerView來實現(xiàn)，在這里我采用的是ScrollView+LinearLayout。
2.當(dāng)新添加一個視圖的時候，自動將其他視圖頂上去，所以添加完視圖之后需要將視圖滾動到底部。
3.每個視圖出現(xiàn)的時候是帶有一定的動畫效果，即從右下角變成完整的樣式。
那么，接下來我們就來實現(xiàn)一下：
（1）設(shè)置布局
<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="500dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginLeft="20dp"android:layout_marginTop="80dp"android:layout_marginRight="20dp"android:layout_marginBottom="60dp"android:overScrollMode="never"android:scrollbars="none"><com.steven.baselibrary.view.CommentRollingandroid:id="@+id/comment_rolling_layout"android:layout_width="match_parent"android:layout_height="wrap_content" /></ScrollView></RelativeLayout>
（2）自定義類繼承自LinearLayout，在這里實現(xiàn)動態(tài)添加View
public class CommentRolling extends LinearLayout {private Context mContext;private List<Map<String, Object>> mCommentList;private int mCurrent = 0;public CommentRolling(Context context) {this(context, null);}public CommentRolling(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public CommentRolling(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);this.mContext = context;setOrientation(VERTICAL);mCommentList = new ArrayList<>();}/*** 設(shè)置數(shù)據(jù)*/public void setList(List<Map<String, Object>> commentList) {if (mCommentList != null) {mCommentList.addAll(commentList);addText();}}/*** 添加單條數(shù)據(jù)*/public void addList(Map<String, Object> map) {if (mCommentList != null) {mCommentList.add(map);addText();}}/*** 添加View*/private void addText() {View view = LayoutInflater.from(mContext).inflate(R.layout.view_comment_rolling, this, false);ShapeableImageView imageView = view.findViewById(R.id.comment_rolling_image);TextView textView = view.findViewById(R.id.comment_rolling_text);Glide.with(mContext).load(mCommentList.get(mCurrent).get("commentImage")).into(imageView);textView.setText(String.valueOf(mCommentList.get(mCurrent).get("commentText")));if (mCurrent == 0) {view.setAlpha(0);}addView(view)view.post(() -> {((ScrollView) getParent()).fullScroll(ScrollView.FOCUS_DOWN);ScaleAnimation scaleAnimation1 = new ScaleAnimation(0f, 1f, 0f, 1f, 0, view.getHeight());scaleAnimation1.setDuration(1000);scaleAnimation1.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart(Animation animation) {if (mCurrent == 0) {view.setAlpha(1);}}@Overridepublic void onAnimationEnd(Animation animation) {if (mCurrent > 20) {removeViewAt(0);}mCurrent++;if (mCurrent < mCommentList.size()) {addText();}}@Overridepublic void onAnimationRepeat(Animation animation) {}});view.startAnimation(scaleAnimation1);});}}
在這里需要注意幾點：
1》新添加一個視圖的時候，自動將其他視圖頂上去
((ScrollView) getParent()).fullScroll(ScrollView.FOCUS_DOWN);2》在每次addView的時候，視圖并沒有馬上加上去，這個時候啟動動畫不一定有效果，所以需要使用view.post()將動畫包裹。
3》視圖不能無限疊加，否則容易出現(xiàn)OOM，按照自己的需求在合適的地方去removeViewAt(int position)。
（3）添加數(shù)據(jù)實現(xiàn)效果
val list = mutableListOf<MutableMap<String, Any>>().apply {for (i in 0..10) {val map = mutableMapOf<String, Any>().apply {put("commentImage","https://i.52112.com/icon/jpg/256/20210315/113065/4866441.jpg")put("commentText", "當(dāng)前數(shù)據(jù)當(dāng)前數(shù)據(jù)當(dāng)前數(shù)據(jù)當(dāng)前數(shù)據(jù)當(dāng)前數(shù)據(jù)為$i")}add (map)}}comment_rolling_layout.setList(list)
當(dāng)然，這僅僅只是功能的實現(xiàn)，并未進行進一步的封裝，大家可以根據(jù)自己的需要去進行處理。
評論
圖片
表情