首页 > 代码库 > 13聊天界面布局的完成
13聊天界面布局的完成
最终实现的效果:
先看上面的怎么实现:
分为三个部分,一是返回的按钮,二是中间聊天的用户名或者聊天的群名,三是删除按钮或者群详情的按钮。
整体使用相对布局。
<RelativeLayout android:id="@+id/top_bar" android:layout_width="match_parent" android:layout_height="@dimen/height_top_bar" android:background="@color/common_top_bar_blue" android:gravity="center_vertical" > <LinearLayout android:layout_width="45dp" android:layout_height="match_parent" android:background="@drawable/common_tab_bg" android:onClick="back" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="9dp" android:scaleType="centerInside" android:src=http://www.mamicode.com/"@drawable/our_group_back_on" />>
设置群组聊天的布局不可见:android:visibility="gone"
接下来是这一部分:
整体的框架如下:
使用相对布局,View的作用是与上面的布局分开
<View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/gray_normal" />聊天中,一个是语音模式,一个是键盘输入文字的形式。
所以有两个按钮:
<Button android:id="@+id/btn_set_mode_voice" android:layout_width="32dp" android:layout_height="32dp" android:layout_marginLeft="6dp" android:background="@drawable/chatting_setmode_voice_btn" android:onClick="setModeVoice" android:visibility="visible" /> <Button android:id="@+id/btn_set_mode_keyboard" android:layout_width="32dp" android:layout_height="32dp" android:layout_marginLeft="6dp" android:background="@drawable/chatting_setmode_keyboard_btn" android:onClick="setModeKeyboard" android:visibility="gone" />
当是语音模式的时候,其他的布局为一个TextView(按住说话):<LinearLayout android:id="@+id/btn_press_to_speak" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginBottom="6dp" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:layout_marginTop="6dp" android:layout_weight="1" android:background="@drawable/chat_press_speak_btn" android:gravity="center" android:visibility="gone" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="@string/button_pushtotalk" android:textColor="#666666" android:textSize="16sp" /> </LinearLayout>
当为键盘模式的时候,则自定义了一个EditText,完成复制粘贴的功能。<RelativeLayout android:id="@+id/edittext_layout" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginBottom="3dp" android:layout_marginLeft="6dp" android:layout_marginRight="6dp" android:layout_weight="1" android:gravity="bottom" > <com.dy.ustc.im.ui.widget.PasteEditText android:id="@+id/et_sendmessage" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginRight="35dip" android:background="@null" android:maxLines="3" android:minHeight="40dp" android:onClick="editClick" android:paddingBottom="3dp" android:paddingLeft="1dp" android:paddingRight="1dp" android:paddingTop="3dp" android:textSize="18sp" /> <ImageView android:id="@+id/iv_emoticons_normal" android:layout_width="24dip" android:layout_height="24dip" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_gravity="center_vertical|right" android:layout_margin="1dip" android:scaleType="fitCenter" android:src=http://www.mamicode.com/"@drawable/chatting_biaoqing_btn_normal">
然后是这部分的布局:
一个是表情的容器,一个是按钮的容器。
最后一部分的内容:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/root_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f2f0eb" android:orientation="vertical" > <RelativeLayout android:id="@+id/top_bar" android:layout_width="match_parent" android:layout_height="@dimen/height_top_bar" android:background="@color/common_top_bar_blue" android:gravity="center_vertical" > <LinearLayout android:layout_width="45dp" android:layout_height="match_parent" android:background="@drawable/common_tab_bg" android:onClick="back" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="9dp" android:scaleType="centerInside" android:src=http://www.mamicode.com/"@drawable/our_group_back_on" />>
13聊天界面布局的完成
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。