如何在选项卡式基础应用程序中在android中创建类似skype的聊天窗口

时间:2012-03-15 13:52:45

标签: android android-layout android-listview chat tableview

这可能是一个非常新手的问题,但我没有得到如何构建一个简单的multi user chat应用程序,该应用程序具有针对每个用户分开的多个聊天窗口。我正在构建一个基于Tabbed的应用This,其中包含多个Tabs(5)。主页选项卡google map有我附近的引脚(根据设置)粉丝&顶部有三个ImageButtons列表按钮向我显示MapPins作为列表。Messages标签包含所有粉丝this的列表可以Chat

当我点击粉丝列表中的任何项目时,我需要的是在同一个标​​签上打开一个ChatWindow(每个用户可以从一个用户切换到另一个用户),&在顶部列表按钮上有三个按钮以导航回到粉丝列表,删除按钮以删除聊天记录& 关闭按钮以反复关闭当前聊天窗口,如果风扇的聊天窗口尚未打开或者我要聊天,则每次点击粉丝列表项时都会打开一个新的聊天窗口与新粉丝。我按照Marc Reichelt's博客来切换这些多个ChatWindows视图,就像主屏幕一样。感谢@Marc Reichelt这样一个非常棒的博客。

我如何构建顶部有三个按钮的布局,固定和放大它下面的多个聊天窗口可以切换......

我按照Marc

建立一个Test-ChatWindow

my code is ->

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&amp;中完成了ListView how update UI from background services。我正在努力构建一个简单的多用户聊天应用程序,为每个用户提供单独的聊天窗口,例如gTalk(google talk)是android上的默认应用程序。

当我使用列表视图时,在这种情况下,我没有得到如何从后台服务更新适配器或当我发送新消息(如何动态地制作不同的多个适配器并更新它们)。现在我正在使用TableView&amp;当我点击发送按钮或后台Service sendBroadcast 时,动态添加一行。

我很困惑,最好使用ListViewTableView ......?

最后,我想要做的是,如何构建顶部有三个按钮的聊天窗口&amp;多个聊天窗口,例如skype`s聊天窗口,可以分别从一个聊天窗口切换到另一个。 我会很感激任何帮助我解决这个问题的示例代码,链接或指针!

1 个答案:

答案 0 :(得分:2)

<强> UI

我会在xml中创建UI。

  • chat.xml 中定义我的ListView,请记住ListView的ID必须为@android:id/list
  • 使用两种不同的布局创建 chat_row.xml ,一种用于外发邮件,另一种用于传入。

您需要9-patch作为文本背景(实际上是两个,一个用于传入,一个用于传出)。

<强>代码

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

<强>链接

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