RecyclerView实现点击回复效果
RecyclerView实现点击回复效果
效果展示
Activity的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="com.goucai.merchant.activity.store_manager.MessageBoardActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/message_board_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</LinearLayout>
这个布局文件中只包含了一个recyclerView.也就是这次我们要实现的主体文件，今天我们所有的操作都要在这个recyclerView中实现
RecyclerView 的item的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="75dp">
<ImageView
android:id="@+id/message_board_user_icon"
android:layout_marginLeft="18dp"
android:layout_marginTop="11dp"
android:src="@drawable/baicai"
android:layout_width="60dp"
android:layout_height="60dp" />
<LinearLayout
android:layout_marginRight="10dp"
android:layout_marginLeft="21dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:id="@+id/message_board_user_name"
android:layout_marginTop="11dp"
android:textColor="@color/store_manager_textcolor"
android:textSize="18sp"
android:text="小张"
android:singleLine="true"
android:layout_width="110dp"
android:layout_height="25dp" />
<TextView
android:id="@+id/message_board_state"
android:layout_weight="1"
android:layout_marginTop="7dp"
android:gravity="top"
android:textSize="14sp"
android:textColor="@color/store_manager_textcolor"
android:text="好评"
android:layout_width="0dp"
android:layout_height="25dp" />
<TextView
android:id="@+id/message_board_time"
android:textSize="14sp"
android:text="18：18"
android:layout_width="50dp"
android:layout_height="25dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="14dp"
android:id="@+id/message_board_message"
android:textColor="@color/gray01"
android:text="工欲善其事，必先利其器，iOS开发中不仅要学会Xcode的基本操作，而且还得学会一些Xcode的使用技巧，如掌握常用的快捷键等，还有就是今天要说到的Xcode插件，下面我就为大家介绍几款开发中比较常用的Xcode插件。"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@+id/message_replay_btn"
android:visibility="invisible"
android:text="回复"
android:textColor="@color/white"
android:background="@color/colorPrimary"
android:layout_width="66dp"
android:layout_height="28dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<EditText
android:id="@+id/message_board_message_edit"
android:visibility="gone"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/message_board_dialog_icon"
android:layout_width="325dp"
android:layout_height="109dp" />
</LinearLayout>
这个布局文件看起来非常复杂，其实是非常简单的，只不过由于我是用用LinearLayout写的，需要实现多层嵌套，所以看起非常复杂，最后的效果图就是下面这样
在这个布局文件中有一个比较关键的地方，就是我们需要先写出，item点击以后出现的效果，然后再将没有点击的时候不需要展示的控件隐藏，也就是设置控件的Visibility.
例如我的布局文件中的
<Button
android:id="@+id/message_replay_btn"
android:visibility="invisible"
android:text="回复"
android:textColor="@color/white"
android:background="@color/colorPrimary"
android:layout_width="66dp"
android:layout_height="28dp" />
和
<EditText
android:id="@+id/message_board_message_edit"
android:visibility="gone"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:background="@drawable/message_board_dialog_icon"
android:layout_width="325dp"
android:layout_height="109dp" />
之所以一个设置为Gone,一个设置为invisible时因为。GONE是彻底隐藏，并且不占用空间。因为我们的EditText需要没点击的时候收起来，所以一定要设置为GONE。而invisible只是不可见，仍然占用空间，如果我们将Button设置为GONE的话，就会导致左边的评价挤过来，所以需要设置为invisible
activity的代码
在activity中，我们只需要实现所有应该RecyclerView 应该实现的即可，没有什么特别的。代码如下
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import com.goucai.merchant.R;
import com.goucai.merchant.adapter.MessageBoardAdapter;
import com.goucai.merchant.beans.MessageBoard;
import com.goucai.merchant.lib.SystemBarTintManager;
import com.goucai.merchant.utils.Util;
import java.util.ArrayList;
import java.util.List;
public class MessageBoardActivity extends AppCompatActivity implements MessageBoardAdapter.OnClickOrderListener {
private RecyclerView recyclerView;
private MessageBoardAdapter adapter;
private List<MessageBoard> mList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_message_board);
initDate();
initView();
}
private void initDate() {
mList=new ArrayList<>();
for (int i=0;i<20;i++){
MessageBoard messageBoard=new MessageBoard();
messageBoard.setUserName("name"+i);
mList.add(messageBoard);
}
}
private void initView() {
((TextView)findViewById(R.id.title)).setText("评价留言");
recyclerView= (RecyclerView) findViewById(R.id.message_board_recyclerview);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
adapter = new MessageBoardAdapter(this,mList);
// adapter.setOnRecyclerViewListener(this);
adapter.setOnClickOrderListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onClickItem(View itemView, View view, EditText e, Button btn) {
Util.Log_i("点击了：评价留言"+itemView.getTag());
adapter.notifyDataSetChanged();
}
}
现在重点来了，就是RecyleView的Adapate的实现
先上代码，一会再来讲解
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import com.goucai.merchant.R;
import com.goucai.merchant.beans.MessageBoard;
import com.goucai.merchant.utils.Util;
import java.util.List;
/**
* Created by ruiqin on 2016/6/18.
*/
public class MessageBoardAdapter extends RecyclerView.Adapter{
private List<MessageBoard> mList;
private View mView;
private Context mContext;
private LayoutInflater inflater;
private int selPosition=10001;
public MessageBoardAdapter(Context context, List<MessageBoard> list){
mList=list;
mContext=context;
inflater=LayoutInflater. from(mContext);
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// mView= View.inflate(mContext,R.layout.item_order_layout,parent);
mView=inflater.inflate(R.layout.item_message_board_layout,parent,false);
MyViewHolder viewHolder=new MyViewHolder(mView);
Util.Log_i("onCreateViewHolder");
return viewHolder;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
((MyViewHolder)holder).username.setText(mList.get(position).getUserName());
holder.itemView.setTag(position);
if (position>10000){
return;
}
if (position==selPosition){
((MyViewHolder)holder).editText.setVisibility(View.VISIBLE);
((MyViewHolder)holder).replayBtn.setVisibility(View.VISIBLE);
}else {
((MyViewHolder)holder).editText.setVisibility(View.GONE);
((MyViewHolder)holder).replayBtn.setVisibility(View.INVISIBLE);
}
}
@Override
public int getItemCount() {
// Util.Log_i("listsize="+mList.size());
return mList.size();
}
class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private TextView username;
private EditText editText;
private Button replayBtn;
public MyViewHolder(View itemView) {
super(itemView);
itemView.setOnClickListener(this);
username= (TextView) itemView.findViewById(R.id.message_board_user_name);
editText= (EditText) itemView.findViewById(R.id.message_board_message_edit);
replayBtn= (Button) itemView.findViewById(R.id.message_replay_btn);
}
@Override
public void onClick(View v) {
v.findViewById(R.id.message_board_message_edit).setVisibility(View.VISIBLE);
v.findViewById(R.id.message_replay_btn).setVisibility(View.VISIBLE);
selPosition=Integer.parseInt(itemView.getTag().toString());
MessageBoardAdapter.this.notifyDataSetChanged();
// editTextList.get(Integer.parseInt(itemView.getTag().toString())).setVisibility(View.VISIBLE);
// btnList.get(Integer.parseInt(itemView.getTag().toString())).setVisibility(View.VISIBLE);
onClickOrderListener.onClickItem(itemView,v,editText,replayBtn);
}
}
public void setOnClickOrderListener(OnClickOrderListener onClickOrderListener)
{
this.onClickOrderListener =onClickOrderListener;
}
public OnClickOrderListener onClickOrderListener;
public interface OnClickOrderListener {
void onClickItem(View itemView, View view,EditText editText,Button replayBtn);
}
}
好了，要实现点击效果首先我们要坐的就是定义一个全局变量
private int selPosition=10001;
你问我为什么初始值要赋值为10001，一会儿再来说明
定义好全局变量以后，我们就需要实现Item的点击事件了。我们需要在OnClick
里面将selPosition值赋值为当前点击的值
selPosition=Integer.parseInt(itemView.getTag().toString());
这里我们是通过在onBindViewHolder中给itemView添加TAG,然后在Onclick中取出，来实现的。
v.findViewById(R.id.message_board_message_edit).setVisibility(View.VISIBLE);
v.findViewById(R.id.message_replay_btn).setVisibility(View.VISIBLE);
这段代码的作用就是将当前选择的item的EditText和Button设置为可见。
其实到这里，我们的主要功能已经实现了，点击Item后，item会扩展，并出现Button和EditText。
但是现在还有两个问题，一个是上一个点击的Item会依然保持被点击状态，不会回复到原来状态，而且我们滑动到下面，再滑动到原来位置的时候，你点击的那个item会回复到最初始的状态。
出现这个问题的原因是android为了节省资源，在你将item滑出屏幕的时候，会对item进行回收。之后再在onBindViewHolder中进行重绘。
知道了问题的原因以后，我们所要做的就是在onBindViewHolder中告诉系统，哪个item我点击了，你重绘的时候，请恢复到你回收前的状态，实现的代码如下
if (selPosition>10000){
return;
}
if (position==selPosition){
((MyViewHolder)holder).editText.setVisibility(View.VISIBLE);
((MyViewHolder)holder).replayBtn.setVisibility(View.VISIBLE);
}else {
((MyViewHolder)holder).editText.setVisibility(View.GONE);
((MyViewHolder)holder).replayBtn.setVisibility(View.INVISIBLE);
}
现在看到这里你应该理解我将selPosition设置为10001的原因了吧，因为如果我将selPosition设置为0的话，就会导致进入这个activity的时候，第0个item就已经处于选中状态了。当然你也可以设置-1，然后前面加个判断啥的。
最后我们再在Onclick中加一个
MessageBoardAdapter.this.notifyDataSetChanged();
解决点击一个item上个item仍然处于选中状态的情况!
