android - 如何在选项卡式基本应用程序中制作像 skype 一样的聊天窗口

Question

这可能是一个非常新手的问题，但我不知道如何构建一个简单的多用户聊天 应用程序，每个用户都有多个聊天窗口。我正在构建一个基于 Tabbed 的应用程序 This具有多个 Tabs(5)。主页选项卡有 google map，上面有我附近(根据设置)粉丝的图钉和三个 ImageButtons，list button 显示 MapPins 作为列表。Messages 选项卡包含所有粉丝的列表 this我可以和谁聊天。

我需要的是当我点击粉丝列表中的任何项目然后点击一个 ChatWindow将在同一个选项卡上打开(每个用户分开，可以从一个用户切换到另一个用户)，顶部有三个按钮列表按钮导航回粉丝列表，删除按钮 删除聊天记录 & 关闭按钮 响应地关闭当前聊天窗口，与此相同，如果粉丝的聊天窗口尚未打开，则每次点击粉丝列表项都会打开一个新的聊天窗口打开或者如果我要和新粉丝聊天。我关注Marc Reichelt's博客在这些多个 ChatWindows View 之间切换，就像主屏幕一样。感谢@Marc Reichelt 写了这么棒的博客。

我如何构建顶部有三个固定按钮并在其下方有多个可以切换的聊天窗口的布局...？

我建了一个 Test-ChatWindow通过关注马克

我的代码是->

public class MultipleChatWindows extends Activity implements OnClickListener {

 /** Class that extends ViewGroup */
 RealViewSwitcher realViewSwitcher;

 @Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // create the view switcher
    realViewSwitcher = new RealViewSwitcher(getApplicationContext());

    final int[] backgroundColors = { Color.RED, Color.BLUE, Color.CYAN,
            Color.GREEN, Color.YELLOW };
    for (int i = 0; i < 5; i++) {
        TextView dateTime = new TextView(getApplicationContext());
        dateTime.setTag("time" + i);
        dateTime.setTextSize(15);
        dateTime.setHint("Date & Time");
        //dateTime.setTextColor(Color.YELLOW);
        dateTime.setTextColor(Color.BLACK);
        dateTime.setGravity(Gravity.RIGHT);
        dateTime.setBackgroundColor(backgroundColors[i]);

        ScrollView scVw = new ScrollView(this);
        scVw.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1));
        scVw.setTag("chat_scVw" + i);
        // scVw.setLayoutParams(new LayoutParams(320, 300));// 320,380
         scVw.setBackgroundColor(Color.TRANSPARENT);

        TableLayout table = new TableLayout(this);
        table.setStretchAllColumns(true);
        table.setShrinkAllColumns(true);
        table.setTag("chat_table" + i);
        //table.setLayoutParams(new LayoutParams(320, LayoutParams.MATCH_PARENT));
        table.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1));
        //table.setWeightSum(1);
        table.setSelected(true);
        table.setScrollBarStyle(ScrollView.SCROLLBARS_INSIDE_INSET);
        //table.setBackgroundColor(Color.GRAY);

        TableRow rowTitle = new TableRow(this);
        rowTitle.setGravity(Gravity.CENTER_HORIZONTAL);

        TableRow rowConditions = new TableRow(this);
        rowConditions.setGravity(Gravity.CENTER);

        TextView title = new TextView(this);//
        title.setText("ManU CHAT Window" + i);

        title.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18);
        title.setGravity(Gravity.CENTER);
        title.setTypeface(Typeface.SERIF, Typeface.BOLD);

        /* If i add the table on scroll view then when i add one new row in this table view by clicking 
         * on send button & try to scroll on to next chat window then it will not give me the touch listener 
         * which is call when i touch on the scroll view. that`s why i directly add table on to main view 
         * behalf of adding this scroll view but it create one problem that is when the given size of the
         * table is filed by the rows then it will not scrolled... How do enable scrolling on it???   */
         scVw.addView(table);
        //table.addView(scVw);

        LinearLayout main = new LinearLayout(this);
        main.setOrientation(LinearLayout.VERTICAL);
        main.setBackgroundColor(backgroundColors[i]);
        main.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        main.setPadding(5, 5, 5, 5);

        LinearLayout chatChild = new LinearLayout(this);
        chatChild.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        chatChild.setBackgroundColor(Color.LTGRAY);
        //chatChild.setWeightSum(1);

        EditText chatMessage = new EditText(this);
        chatMessage.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1));
        chatMessage.setTag("chat_msg_text" + i);
        chatMessage.setSingleLine();
        chatMessage.setHint("Type your Message");

        Button sendMessage = new Button(this);
        sendMessage.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        sendMessage.setId(i);
        sendMessage.setTag("chat_send_btn" + i);
        sendMessage.setText("Send");

        sendMessage.setOnClickListener(this);

        chatChild.addView(chatMessage);
        chatChild.addView(sendMessage);

        main.addView(dateTime);
        main.addView(scVw);
        //main.addView(table);
        main.addView(chatChild);

        realViewSwitcher.addView(main);

    }

    // set as content view
    setContentView(realViewSwitcher);

    // OPTIONAL: listen for screen changes
    realViewSwitcher.setOnScreenSwitchListener(onScreenSwitchListener);

 }

 private final RealViewSwitcher.OnScreenSwitchListener onScreenSwitchListener = new RealViewSwitcher.OnScreenSwitchListener() {
    @Override
    public void onScreenSwitched(int screen) {
        // this method is executed if a screen has been activated, i.e. the
        // screen is completely visible
        // and the animation has stopped (might be useful for removing /
        // adding new views)
        Log.d("RealViewSwitcher", "switched to screen:" + screen);
    }
 };

 @Override
 public void onClick(View v) {
    // TODO Auto-generated method stub
    sendText(v.getId());
    Log.i("SndBtn_ID & TAG>", "ID:" + v.getId() + ", TAG:" + v.getTag());
 }

 private void sendText(int index) {
    EditText textVw = (EditText) realViewSwitcher.getChildAt(index).findViewWithTag("chat_msg_text" + index);
    String text = textVw.getText().toString();

    Log.i("MSG>>>", ":" + text);

    if (!text.equals("")) {

        TableLayout tbl = (TableLayout) realViewSwitcher.getChildAt(index).findViewWithTag("chat_table" + index);

        // scVw=(ScrollView)realViewSwitcher.getChildAt(index).findViewWithTag("chat_scVw"+index);
        TableRow rowMsg = new TableRow(this);

        TableRow.LayoutParams params1 = new TableRow.LayoutParams();
        // params1.span = 2;
        rowMsg.setLayoutParams(params1);

        /* layout that hold one complete row(i.e.,image, message & line separator). */
        LinearLayout rowChild = new LinearLayout(this);
        rowChild.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        rowChild.setOrientation(LinearLayout.VERTICAL);
        //rowChild.setBackgroundColor(Color.GRAY);

        /* layout that hold image & message. */
        LinearLayout rowChildData = new LinearLayout(this);
        rowChildData.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
        rowChildData.setOrientation(LinearLayout.HORIZONTAL);
        rowChildData.setBackgroundColor(Color.GRAY);

        /* layout that show the separator line. */
        LinearLayout rowChildSeparator = new LinearLayout(this);
        rowChildSeparator.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,1)); 
        rowChildSeparator.setOrientation(LinearLayout.VERTICAL);
        //rowChildSeparator.setBackgroundColor(Color.LTGRAY);

        /* Image icon showing that this msg is of. */
        ImageView nxtTo = new ImageView(this);
        LinearLayout.LayoutParams nxtParam=new LinearLayout.LayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        nxtParam.topMargin=6;
        nxtParam.gravity=Gravity.TOP;
        nxtTo.setLayoutParams(nxtParam);//(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        nxtTo.setImageDrawable(this.getResources().getDrawable(R.drawable.red_arrow));

        TextView msg1 = new TextView(this);
        msg1.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1));
        msg1.setText(text);
        msg1.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18);
        msg1.setGravity(Gravity.LEFT);
        msg1.setTypeface(Typeface.SERIF, Typeface.BOLD);

        TableRow.LayoutParams paramsMsg = new TableRow.LayoutParams();
        paramsMsg.span = 1;
        paramsMsg.weight = 1;

        TableRow.LayoutParams paramsImg = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        paramsImg.gravity = Gravity.LEFT;

        ImageView img1 = new ImageView(this);
        img1.setLayoutParams(new LayoutParams(30, 30));
        img1.setImageDrawable(this.getResources().getDrawable(R.drawable.icon));

        rowChildData.addView(img1);
        rowChildData.addView(nxtTo);
        rowChildData.addView(msg1);

        rowChild.addView(rowChildData);
        rowChild.addView(rowChildSeparator);

        rowMsg.addView(rowChild, paramsMsg);

        tbl.addView(rowMsg);

    }

    Toast.makeText(this, text, Toast.LENGTH_LONG).show();
    textVw.setText(null);
  }
 }

我在 Transcript Mode 中浏览了 ListView & how update UI from background services .我正在努力构建一个简单的多用户聊天应用程序，每个用户都有单独的聊天窗口，例如 gTalk(google talk)是 android 上的默认应用程序。

当我使用 ListView 时，在这种情况下，我不知道如何从后台服务更新适配器，或者当我发送新消息时(如何动态制作不同的多个适配器并更新它们)。现在我正在使用 TableView 并在单击发送按钮或后台 Service sendBroadcast 时动态添加一行。

我很困惑使用 ListView 或 TableView 哪个更好...？

最后，我想做的是，如何构建顶部有三个按钮的聊天窗口和多个聊天窗口，如 skype`s可以分别从一个聊天窗口切换到另一个聊天窗口。? 如果有任何示例代码、链接或指针可以帮助我解决此问题，我将不胜感激!

Answer 1

用户界面

我会在 xml 中创建 UI。

• 在chat.xml中定义我的ListView，记住你的ListView的id需要是@android:id/列表。
• 创建一个具有两种不同布局的 chat_row.xml，一种用于传出消息，一种用于传入消息。

您需要一个 9-patch用于文本背景(实际上是牵引，一种用于传入，一种用于传出)。

代码

• 继承自 ListActivity并将 chat.xml 设置为内容 View 。
• 将您的聊天消息存储在 Sqlite 数据库中。
• 创建自定义 CursorAdapter并将其设置为列表适配器。
• 在 CursorAdapter 的 bindView 函数中隐藏/显示 chat_row.xml 的正确布局并设置所有值(您设置的值将从数据库中获取)。

链接

自定义 CursorAdaptors - http://thinkandroid.wordpress.com/2010/01/11/custom-cursoradapters/