nim_duilib(20)之即刻(1)

note

一个基于nim_duilib仿wechat的IM。

主界面

样式

美工差了。

布局

整体为水平布局，左边的深灰色区域(frame_left)，右侧的light white区域（frame_right）。

右侧的区域(frame_right)分为垂直布局，其中，左侧红色用于显示好友列表，右侧绿色用于显示聊天对话框

global xml中定义

定义了一些控件的样式

    <!--左侧窗口控件-->
    <Class name="left_btn_portrait" tooltiptext="头像"  height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1" normalimage="file='../left_frame/portrait_32X32.png'" />
    <Class name="left_opt_msg" tooltiptext="消息" text="消息" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
                      selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
                      selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>

    <Class name="left_opt_contact" tooltiptext="联系人" text="联系人" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
                      selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
                      selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>

    <Class name="left_opt_file" tooltiptext="文件" text="文件" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1"
                      selectednormalimage="file='../public/button/btn_global_red_80x30_normal.png'"
                      selecteddisabledimage="file='../public/button/btn_global_red_80x30_normal.png' fade='30'"/>

    <Class name="left_btn_setting" tooltiptext="设置" height="36" width="36" margin="10,20,10,10" bkcolor="color_light_white1" normalimage="file='../left_frame/setting.png'" />

    <!--中间窗体控件-->
    <TextColor name="edit_tip" value="#ffa8a8a8"/>
    <TextColor name="edit_bk_color" value="#ffd7d9d8"/>
    <Class name="middle_rich_edit_search" bkcolor="edit_bk_color" font="system_14" multiline="false" promptmode="true" prompttext="搜索" promptcolor="edit_tip"/>
    <Class name="middle_btn_add" font="system_16" bkcolor="color_light_white1"/>

frame_left

frame_left为垂直布局。 xml文件如下

    <!--左侧的frame-->
    <VBox class="frame_left" height ="stretch" width="60" >
      <!--头像-->
      <Button class="left_btn_portrait"  />

      <!--消息-->
      <Option class = "left_opt_msg" group = "left_frame" />

      <!--通讯录-->
      <Option class = "left_opt_contact" group = "left_frame" />

      <!--文件-->
      <Option class = "left_opt_file" group = "left_frame" />

      <Control />

      <!--设置-->
      <Button class = "left_btn_setting" />

    </VBox>

frame_right

xml内容

    <!--右侧的frame-->
    <VBox class="frame_middle_vbox" height="stretch" width="stretch">

      <!---->
      <HBox width="stretch" height="55" >
        <!--搜索-->
        <HBox width="250" height="30" margin="0,20,0,20">
          <Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192"
                   bkimage="file='../frame_middle/icon_search_gray.png' "/>

          <RichEdit class="middle_rich_edit_search" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="system_12" />
          <Button class="middle_btn_top_del" name="clear_input" visible="false" valign="center" margin="0,0,10,0" />
          <Button class="middle_btn_top_add" text="+" height="25" width="30" margin="0,0,10,10"/>
        </HBox>

        <!--标题-->
        <Label text="1234567890abcdefghijklmpqrstuvwxyz" font="system_16" margin="10,20,0,0"/>

        <Control />
        <!--右上角3个按钮-->
        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
        <Box width="21" margin="4,6,0,0">
          <Button class="btn_wnd_max" name="maxbtn" />
          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
        </Box>
        <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
      </HBox>

      <!--右侧：联系人列表和聊天框-->
      <HBox>
        <!--联系人列表-->
        <VBox bkcolor="red" width="250" height="stretch">

        </VBox>
        <!--聊天对话框-->
        <VBox bkcolor="green" width="stretch" height="stretch">

        </VBox>
      </HBox>
    </VBox>

xml完整

<?xml version="1.0" encoding="UTF-8"?>
<Window mininfo="700, 500" size="700,500" caption="0,0,0,500" shadowattached="true" sizebox="4,5,5,5"  >

  <HBox bkcolor="color_light_white1" height="stretch" width="stretch">

    <!--左侧的frame-->
    <VBox class="frame_left_vbox" height ="stretch" width="60" >
      <!--头像-->
      <Button class="left_btn_portrait"  />
      <!--消息-->
      <Option class="left_opt_msg" group = "left_frame" />
      <!--通讯录-->
      <Option class="left_opt_contact" group = "left_frame" />
      <!--文件-->
      <Option class="left_opt_file" group = "left_frame" />
      <Control />
      <!--设置-->
      <Button class="left_btn_setting" />
    </VBox>

    <!--右侧的frame-->
    <VBox class="frame_middle_vbox" height="stretch" width="stretch">

      <!---->
      <HBox width="stretch" height="55" >
        <!--搜索-->
        <HBox width="250" height="30" margin="0,20,0,20">
          <Control name="search_icon" width="auto" height="auto" valign="center" margin="10,0,0,0" alpha="192"
                   bkimage="file='../frame_middle/icon_search_gray.png' "/>

          <RichEdit class="middle_rich_edit_search" name="search_edit" height="auto" margin="8,0,10,0" valign="center" font="system_12" />
          <Button class="middle_btn_top_del" name="clear_input" visible="false" valign="center" margin="0,0,10,0" />
          <Button class="middle_btn_top_add" text="+" height="25" width="30" margin="0,0,10,10"/>
        </HBox>

        <!--标题-->
        <Label text="1234567890abcdefghijklmpqrstuvwxyz" font="system_16" margin="10,20,0,0"/>

        <Control />
        <!--右上角3个按钮-->
        <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0" />
        <Box width="21" margin="4,6,0,0">
          <Button class="btn_wnd_max" name="maxbtn" />
          <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
        </Box>
        <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
      </HBox>

      <!--右侧：联系人列表和聊天框-->
      <HBox>
        <!--联系人列表-->
        <VBox bkcolor="red" width="250" height="stretch">

        </VBox>
        <!--聊天对话框-->
        <VBox bkcolor="green" width="stretch" height="stretch">

        </VBox>
      </HBox>
    </VBox>

  </HBox>

</Window>