如何使用回收站视图在两侧发送和接收消息的线程消息视图

时间:2016-06-07 11:00:20

标签: android firebase android-recyclerview firebaseui

我正在与Firebase进行聊天应用,基本上该应用运行良好。我正在使用UI,它有一个问题,邮件收件人或发件人是RecyclerView的一面,我想要它的一面(发件人正确,留给收件人)我有2个XML文件用于邮件收件人和发件人已经如此,我如何使用发件人的item_message_input.xml和收件人的item_message.xml(抱歉,我不知道如何清楚地描述我的问题)。

这是我的代码:

MainActivity.java

public class MainActivity extends AppCompatActivity
    implements GoogleApiClient.OnConnectionFailedListener {

public static class MessageViewHolder extends RecyclerView.ViewHolder {
    public TextView messageTextView;
    public TextView messengerTextView;
    public CircleImageView messengerImageView;

    public MessageViewHolder(View v) {
        super(v);
        messageTextView = (TextView) itemView.findViewById(R.id.messageTextView);
        messengerTextView = (TextView) itemView.findViewById(R.id.messengerTextView);
        messengerImageView = (CircleImageView) itemView.findViewById(R.id.messengerImageView);
    }
}

private static final String TAG = "MainActivity";
public static final String MESSAGES_CHILD = "messages";
private static final int REQUEST_INVITE = 1;
public static final int DEFAULT_MSG_LENGTH_LIMIT = 150;
public static final String ANONYMOUS = "anonymous";
private static final String MESSAGE_SENT_EVENT = "message_sent";
private String mUsername;
private String mPhotoUrl;
private SharedPreferences mSharedPreferences;
private GoogleApiClient mGoogleApiClient;

private Button mSendButton;
private RecyclerView mMessageRecyclerView;
private LinearLayoutManager mLinearLayoutManager;
private ProgressBar mProgressBar;
private EditText mMessageEditText;

// Firebase instance variables
private FirebaseAuth mFirebaseAuth;
private FirebaseUser mFirebaseUser;
private DatabaseReference mFirebaseDatabaseReference;
private FirebaseRecyclerAdapter<FriendlyMessage, MessageViewHolder> mFirebaseAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(this);
    // Set default username is anonymous.
    mUsername = ANONYMOUS;

    // Initialize FirebaseAuth
    mFirebaseAuth = FirebaseAuth.getInstance();
    mFirebaseUser = mFirebaseAuth.getCurrentUser();
    if (mFirebaseUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(new Intent(this, SignInActivity.class));
        finish();
        return;
    } else {
        mUsername = mFirebaseUser.getDisplayName();
        if (mFirebaseUser.getPhotoUrl() != null) {
            mPhotoUrl = mFirebaseUser.getPhotoUrl().toString();
        }
    }

    mGoogleApiClient = new GoogleApiClient.Builder(this)
            .enableAutoManage(this /* FragmentActivity */, this /* OnConnectionFailedListener */)
            .addApi(Auth.GOOGLE_SIGN_IN_API)
            .build();

    // Initialize ProgressBar and RecyclerView.
    mProgressBar = (ProgressBar) findViewById(R.id.progressBar);
    mMessageRecyclerView = (RecyclerView) findViewById(R.id.messageRecyclerView);
    mLinearLayoutManager = new LinearLayoutManager(this);
    mLinearLayoutManager.setStackFromEnd(true);
    mMessageRecyclerView.setLayoutManager(mLinearLayoutManager);

    // New child entries
    mFirebaseDatabaseReference = FirebaseDatabase.getInstance().getReference();
    mFirebaseAdapter = new FirebaseRecyclerAdapter<FriendlyMessage,
            MessageViewHolder>(
            FriendlyMessage.class,
            R.layout.item_message,
            MessageViewHolder.class,
            mFirebaseDatabaseReference.child(MESSAGES_CHILD)) {

        @Override
        protected void populateViewHolder(MessageViewHolder viewHolder,
                                          FriendlyMessage friendlyMessage, int position) {
            mProgressBar.setVisibility(ProgressBar.INVISIBLE);

            viewHolder.messengerTextView.setText(friendlyMessage.getName());
            viewHolder.messageTextView.setText(friendlyMessage.getText());

            if (friendlyMessage.getPhotoUrl() == null) {
                viewHolder.messengerImageView
                        .setImageDrawable(ContextCompat
                                .getDrawable(MainActivity.this,
                                        R.drawable.ic_account_circle_black_48dp));
            } else {
                Glide.with(MainActivity.this)
                        .load(friendlyMessage.getPhotoUrl())
                        .into(viewHolder.messengerImageView);
            }
        }
    };

    mFirebaseAdapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() {
        @Override
        public void onItemRangeInserted(int positionStart, int itemCount) {
            super.onItemRangeInserted(positionStart, itemCount);
            int friendlyMessageCount = mFirebaseAdapter.getItemCount();
            int lastVisiblePosition =
                    mLinearLayoutManager.findLastCompletelyVisibleItemPosition();
            // If the recycler view is initially being loaded or the
            // user is at the bottom of the list, scroll to the bottom
            // of the list to show the newly added message.
            if (lastVisiblePosition == -1 ||
                    (positionStart >= (friendlyMessageCount - 1) &&
                            lastVisiblePosition == (positionStart - 1))) {
                mMessageRecyclerView.scrollToPosition(positionStart);
            }
        }
    });

    mMessageRecyclerView.setLayoutManager(mLinearLayoutManager);
    mMessageRecyclerView.setAdapter(mFirebaseAdapter);

    mMessageEditText = (EditText) findViewById(R.id.messageEditText);
    mMessageEditText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(mSharedPreferences
            .getInt(CodelabPreferences.FRIENDLY_MSG_LENGTH, DEFAULT_MSG_LENGTH_LIMIT))});
    mMessageEditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            if (charSequence.toString().trim().length() > 0) {
                mSendButton.setEnabled(true);
            } else {
                mSendButton.setEnabled(false);
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {
        }
    });

    mSendButton = (Button) findViewById(R.id.sendButton);
    mSendButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            FriendlyMessage friendlyMessage = new
                    FriendlyMessage(mMessageEditText.getText().toString(), mUsername, mPhotoUrl);
            mFirebaseDatabaseReference.child(MESSAGES_CHILD).push().setValue(friendlyMessage);
            mMessageEditText.setText("");
        }
    });
}

@Override
public void onStart() {
    super.onStart();
    // Check if user is signed in.
    // TODO: Add code to check if user is signed in.
}

@Override
public void onPause() {
    super.onPause();
}

@Override
public void onResume() {
    super.onResume();
}

@Override
public void onDestroy() {
    super.onDestroy();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_menu, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.sign_out_menu:
            mFirebaseAuth.signOut();
            Auth.GoogleSignInApi.signOut(mGoogleApiClient);
            mUsername = ANONYMOUS;
            setResult(RESULT_OK);
            finish();
            startActivity(new Intent(this, SignInActivity.class));
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

@Override
public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
    // An unresolvable error has occurred and Google APIs (including Sign-In) will not
    // be available.
    Log.d(TAG, "onConnectionFailed:" + connectionResult);
    Toast.makeText(this, "Google Play Services error.", Toast.LENGTH_SHORT).show();
}

item_message.xml

<?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:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/messengerImageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="top" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/msg_bubble_incoming">

        <TextView
            android:id="@+id/messageTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:padding="8dp"
            android:textColor="#ffffff"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/messengerTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/messageTextView"
            android:gravity="center_vertical"
            android:paddingBottom="8dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:textAllCaps="true"
            android:textColor="#a2ffffff"
            android:textSize="10sp"
            android:textStyle="bold" />

    </RelativeLayout>

</LinearLayout>

</LinearLayout>

item_message_input.xml

<?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:orientation="vertical">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginTop="8dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/msg_bubble_input"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/messengerImageView2"
        android:layout_toStartOf="@+id/messengerImageView2">

        <TextView
            android:id="@+id/messageTextView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:padding="8dp"
            android:textColor="#ffffff"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/messengerTextView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/messageTextView2"
            android:gravity="center_vertical"
            android:paddingBottom="8dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:textAllCaps="true"
            android:textColor="#a2ffffff"
            android:textSize="10sp"
            android:textStyle="bold" />

    </RelativeLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/messengerImageView2"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>
</LinearLayout>

那么,在这种情况下,是否可以在RecyclerView的两侧显示消息? 请帮帮我:(非常感谢你!

2 个答案:

答案 0 :(得分:3)

在回收商视图中,您需要两个视图持有者。 一个是SenderViewHolder和另一个收件人查看持有人。

在recyclerView的数据集中。每个元素(消息)应该说它是发送还是接收的消息,并根据类型,你可以膨胀并填充相应的viewHolder。

在xml的发件人中,设置android:gravity = "left"并在xml的收件人中设置android:gravity = "right"

简而言之,您将拥有一个回收站视图,其中列出了发送和接收的消息。并且发送和接收都有自己的观点。因此,两个视图需要两个xmls。

在视图持有者的xml中,将android:gravity = "left"设置为一个,将android:gravity = "left"设置为另一个。重力是在第一个标记中设置的。<LinearLayout>在你的情况下。

在recyclerView适配器中执行以下操作:

ArrayList<Message> dataSet = new ArrayList<>(); // declare this as class level property.

首先,您必须在recyclerview适配器中取消getItemViewType()

 @Override
public int getItemViewType(int position) {
    if(dataset.get(position).getType == "sent") {
        return 1;
    } else {
        return 2;
    }
}

然后覆盖onCreateViewHolder()

 @Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
   if(viewType = 1) {
       View view = LayoutInflater.from(context).inflate(R.layout.sent_view_holder_layout, parent, false);
       return new SentViewHolder(view);
    } else {
       LayoutInflater.from(context).inflate(R.layout.received_view_holder_layout, parent, false);
       return new ReceivedViewHolder(view);
    }
  }

然后覆盖onBindViewHolder()

 @Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if(dataSet.get(position).getType== "sent") {
      populateSentViewHolder(holder, position);
    } else {
      populateReceivedViewHolder(holder, position);
    }
}

private void populateSentViewHolder(RecyclerView.ViewHolder holder, int position) {
 Message message = dataSet.get(position);
 ((SentViewHolder)holder).senderNameTextView.setText(message.getSender());
 ((SentViewHolder)holder).messageTextView.setText(message.getMessage());
}

private void populateReceivedViewHolder(RecyclerView.ViewHolder holder, int   position) {
  Message message = dataSet.get(position);
 ((ReceivedViewHolder)holder).senderNameTextView.setText(message.getSender());
 ((ReceivedViewHolder)holder).messageTextView.setText(message.getMessage());
}

在填充方法中,使用数据填充小部件。

如果您了解recyclerViews的工作原理,那么这个答案应该足够了。

答案 1 :(得分:2)

在FirebaseRecyclerAdapter中准备2个ViewType项,首先是发件人(右),第二个是收件人(左)。您还需要传递发件人用户名:

public class FirebaseRecyclerAdapter extends RecyclerView.Adapter {
  ...

  //you can initialize sendername in constructor
  public String mSenderName = "The Sender Name";
  public static final int VT_SENDER = 0;
  public static final int VT_RECIPIENT = 1;
  ...
  @Override
  public int getItemViewType(int position) {
    if (((FriendlyMessage)mItems.get(position)).getUserName() == mSenderName)
        return VT_SENDER;
    else
        return VT_RECIPIENT;
  }

  ...

  @Override
  public MessageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v;        
    switch (viewType) {
        case VT_SENDER:
            v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_message_input, parent, false);
        break;
        case VT_RECIPIENT:
            v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_message, parent, false);
        break;
    }
    return new MessageViewHolder(v);
  }

  ...

}