总结 2017-12-11

今天我们对经常使用的微信通讯录界面进行UI练习，因为只是画UI操作,图中搜索功能未实现

1.首先先对界面的布局使用进行判断，第一部分我运用的是相对布局里面套的线性布局，最外面是一个相对布局划分好这一块的大小，宽度就是屏幕的宽度，高度暂设一个值，在这个相对布局中再次创建一个相对布局，设置其颜色为白色，这样对比之下就会有分割线效果，设置这个布局 边距外面的大布局，实现白色的搜素框效果，里面的相对布局的大小即为白色区域大小，接下来，因为能看到居中的两个元素， 放大镜和搜素。所以我创建了一个线性布局，使线性布局居中与我们的白色区域，再运用权重比，设置两个元素比例即可实现两个元素在白色区域的居中效果，而右侧的语音图片，向右与父元素靠齐即可。 

2.分析一下面的几个模块，创建相对布局设置好每块布局距离屏幕顶端的距离，其次在相对布局中，创建线性布局，同样使用权重比，通过设置图片与文本的比例实现界 面优化。（因为图片素材是截图得到的，每个图片的大小没有相同，所以权重比会有所不同）。调整元素格式进行居中设置，下面的 群聊、便签、公众号，实现原理相同，需要注意的是每块距离屏幕是模块的高度加1的值，才能实现分割线的效果，

3. 企业号、格微办公实现原理同上，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff">


            <LinearLayout
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:weightSum="2">


                <ImageView
                    android:layout_weight="0.7"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:src="@drawable/search" />

                <TextView
                    android:layout_weight="1.3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="搜索"
                    android:textSize="18dp"
                    android:layout_gravity="center"/>


            </LinearLayout>


            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@drawable/yuyin"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                />


        </RelativeLayout>


    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="60dp"
        android:background="#ffffff">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="8">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1.06"
                android:src="@drawable/weixin" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="新的朋友"
                android:textSize="20dp"
                android:layout_gravity="center"
                android:layout_weight="6.94"/>

        </LinearLayout>


    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="121dp"
        android:background="#ffffff">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="8">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/e"
                android:layout_weight="0.92"
                android:layout_gravity="center"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="群聊"
                android:textSize="20dp"
                android:layout_gravity="center"
                android:layout_weight="7.08"/>

        </LinearLayout>

    </RelativeLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="182dp"
        android:background="#ffffff">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="8">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="0.92"
                android:src="@drawable/w" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="7.08"
                android:text="标签"
                android:textSize="20dp" />

        </LinearLayout>

    </RelativeLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="243dp"
        android:background="#ffffff">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="8">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1.00"
                android:src="@drawable/q" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="公众号"
                android:textSize="20dp"
                android:layout_gravity="center"
                android:layout_weight="7"/>

        </LinearLayout>

    </RelativeLayout>

        <TextView
            android:layout_marginTop="303dp"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:text="企业号"
            android:textSize="15dp"
            android:gravity="center_vertical"
            android:paddingLeft="15dp"
            android:id="@+id/textView3" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#ffffff"
        android:layout_below="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:weightSum="8">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1.32"
                android:src="@drawable/gewei" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="格微办公"
                android:textSize="20dp"
                android:layout_gravity="center"
                android:layout_weight="6.68"/>

        </LinearLayout>

    </RelativeLayout>




</RelativeLayout>