28超信界面的布局设计

1.效果图：

2.xml文件的outline：

3.标题栏

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_top_bar"
          android:background="@color/common_top_bar_blue" 
        android:gravity="center_vertical" >

        <TextView
            android:id="@+id/message_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="会话"
            android:textColor="#fff"
            android:textSize="18sp" />

    </RelativeLayout>

标题栏采用相对布局，指定了高度和颜色，还指定里面的TextView垂直居中。

4.搜索框

<include layout="@layout/search_bar" />

搜索框在其他的布局中还会出现，为了使用方便和避免代码冗余，单独把他放在一个布局中。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="7dp"
    android:paddingBottom="7dp"
    android:background="#ededed"
    android:paddingLeft="@dimen/padding_search_bar"
    android:paddingRight="@dimen/padding_search_bar" >

    <EditText
      	android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:id="@+id/query"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="@drawable/seabar_input"
        android:drawableLeft="@drawable/search_bar_icon_normal"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:hint="搜索"
        android:textColorHint="#b3b3b3"
        android:textSize="16sp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:singleLine="true"/>

    <ImageButton
        android:id="@+id/search_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="3dp"
        android:background="@android:color/transparent"
        android:padding="6dp"
        android:src="@drawable/search_clear"
        android:visibility="visible" />
    <!-- android:visibility="invisible" -->

</RelativeLayout>

就是一个EditText和ImageButton其中默认ImageButton是invisible的。

5.网络状态的布局：

在默认状态下，他是gone的。由于其他布局也会使用到，故抽取出来。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/chat_error_item_bg"
    android:clickable="true"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_neterror"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="9dp"
        android:src="@drawable/login_error_icon" />

    <TextView
        android:id="@+id/tv_connect_errormsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="4dp"
        android:layout_toRightOf="@id/iv_neterror"
        android:text="不能连接到服务器"
        android:textColor="#000" />

</RelativeLayout>

6.ListView

 
      <ListView
         android:cacheColorHint="#00000000"
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:divider="@null"
        />

7.整体的布局

<?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="#f2f0eb"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_top_bar"
          android:background="@color/common_top_bar_blue" 
        android:gravity="center_vertical" >

        <TextView
            android:id="@+id/message_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="会话"
            android:textColor="#fff"
            android:textSize="18sp" />

    </RelativeLayout>
    <include layout="@layout/search_bar" />

    <include
        android:id="@+id/rl_error_item"
        layout="@layout/chat_neterror_item"
        android:visibility="visible" />
  <!--   android:visibility="gone"  -->

    
      <ListView
         android:cacheColorHint="#00000000"
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:divider="@null"
        />
</LinearLayout>