如何在聊天消息顶部显示日历日期? [英] How do I display the calendar date on the top of chat messages?
问题描述
我正在开发一个聊天应用程序,但我正在努力弄清楚如何在聊天消息顶部显示日历日期;例如,这样的事情:
I am working on a chat application but I am struggling to figure out how to display the calendar date on the top of chat messages; for example, something like this:
另一个带有时间戳的图像:
Another image with timestamps:
如您在示例中看到的,日期显示在新一批短信的顶部.我想做同样的事情,只是针对与特定日期相关的一批消息.假设我有 10 月 19 日的消息,它会在顶部显示 10 月 19 日,然后是 10 月 20 日的消息等等......这是与我的类似的工作示例代码:
As you see in the example, the date is displayed on top of a fresh new batch of text messages. I would like to do the same, just for a batch of messages related to a specific date. Say if I have messages for October 19, it shows October 19 on top followed by messages for October 20 and so on... Here's the working sample code similar to mine:
http://www.codeproject.com/Tips/897826/Designing-Android-Chat-Bubble-Chat-UI
代码的构造与我的相同,只是日期显示在顶部,这是我坚持的东西.我为每条消息都显示了时间戳,我只想以2015 年 10 月 19 日星期一"的格式显示这批消息的日期;仅在顶部一次,从 10 月 19 日开始,同样是过去和未来消息的日历日期,如图所示.有什么线索吗?谢谢!
The construction of the code is same as mine except for the date being displayed on top which is something I am stuck on. I have my timestamps showing for every message, I just want to display the date in the format "Monday, October 19, 2015" for the batch of messages; just once on top, from October 19, and likewise calendar dates for past and future messages, as shown in the image. Any clues? Thanks!
推荐答案
据我所知,您只想为某些消息组而不是每条消息显示时间/日期.所以这里是如何做到这一点.前提条件:我假设每个消息项都有时间戳,我们将根据该时间戳进行分组想法:我们需要每个列表项都有 timeview:TextView 元素,我们将根据它的位置和 TS(时间戳)显示和隐藏该元素示例:
As far as I understand you want to show time/date only for certain group of messages and not for each message. So here is how to do that. Precondition: I assume each message item has time stamp based on which we will do our grouping Idea: we will need each list item to have timeview:TextView element and we will show and hide that element based on it's position and TS (time stamp) Example:
item.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="match_parent"
android:background="@color/white"
android:orientation="vertical"
android:padding="@dimen/padding_small">
<TextView
android:id="@+id/timeText"
style="@style/DefaultText"
android:paddingBottom="@dimen/padding_small"
android:paddingRight="@dimen/padding_small"
android:paddingTop="@dimen/padding_small"
android:text="@string/hello_world"
android:textSize="@dimen/font_size_small_10"/>
<TextView
android:id="@+id/textView"
style="@style/DefaultText"
android:layout_width="wrap_content"
android:background="@drawable/bg_gray_rounded"
android:paddingBottom="@dimen/padding_extra_small"
android:paddingLeft="@dimen/padding_small"
android:paddingRight="@dimen/padding_small"
android:paddingTop="@dimen/padding_extra_small"
android:textColor="@color/gray"
android:textSize="@dimen/font_size_md"/>
</LinearLayout>
ChatRecyclerAdapter.java
public class ChatEGRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
public static class TextViewHolder extends RecyclerView.ViewHolder {
public TextView textView;
public TextView timeText;
public TextViewHolder(View v) {
super(v);
timeText = (TextView) v.findViewById(R.id.timeText);
textView = (TextView) v.findViewById(R.id.textView);
}
}
private final List<Message> messages;
public ChatEGRecyclerAdapter(List<Message> messages) {
this.messages = messages;
}
// Create new views (invoked by the layout manager)
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item, parent, false);
return new TextViewHolder(v);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
final Message m = messages.get(position);
final Context context = viewHolder.itemView.getContext();
TextViewHolder holder = (TextViewHolder)viewHolder;
holder.textView.setVisibility(View.VISIBLE);
holder.textView.setText(m.getText());
long previousTs = 0;
if(position>1){
Message pm = messages.get(position-1);
previousTs = pm.getTimeStamp();
}
setTimeTextVisibility(m.getTimeStamp(), previousTs, holder.timeText);
}
private void setTimeTextVisibility(long ts1, long ts2, TextView timeText){
if(ts2==0){
timeText.setVisibility(View.VISIBLE);
timeText.setText(Utils.formatDayTimeHtml(ts1));
}else {
Calendar cal1 = Calendar.getInstance();
Calendar cal2 = Calendar.getInstance();
cal1.setTimeInMillis(ts1);
cal2.setTimeInMillis(ts2);
boolean sameMonth = cal1.get(Calendar.YEAR) == cal2.get(Calendar.YEAR) &&
cal1.get(Calendar.MONTH) == cal2.get(Calendar.MONTH);
if(sameMonth){
timeText.setVisibility(View.GONE);
timeText.setText("");
}else {
timeText.setVisibility(View.VISIBLE);
timeText.setText(Utils.formatDayTimeHtml(ts2));
}
}
}
@Override
public int getItemCount() {
return messages.size();
}
}
剩下的就是创建你的 RecylcerView 并给它这个适配器
what left is to create your RecylcerView and give it this adapter
这篇关于如何在聊天消息顶部显示日历日期?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!