android 微信缩小通话界面_安卓如何做出微信那样的界面仿微信“我”的界面5/5...

本系列目标

通过安卓编程仿写微信“我”的界面,让大家也能做出类似微信界面.效果图如下:

本文目标

做出显示收藏等的部分并和前面开发的几个部分合并到一起,形成最终的微信“我”的界面.效果图如下:

实现方案

• 添加一个线性布局(LinearLayout,从上到下排列);

• 往上面创建的布局中,添加四个线性布局(从左到右排列),每两个中间加一条分割线;

• 往每个线性布局中加入图标,文字(尽可能占满空间),箭头

实现方案图:

代码:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="#FFFFFF"
    android:orientation="vertical">

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:orientation="horizontal">

<ImageView
            android:layout_width="39dp"
            android:layout_height="22dp"
            android:layout_marginEnd="10dp"
            android:src="@drawable/shoucang" />

<TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="收藏"
            android:textColor="#18191A" />

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:src="@drawable/right_arrow" />
LinearLayout>

<View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginStart="60dp"
        android:background="#ECEDEE" />

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:orientation="horizontal">

<ImageView
            android:layout_width="39dp"
            android:layout_height="22dp"
            android:layout_marginEnd="10dp"
            android:src="@drawable/album" />

<TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="相册"
            android:textColor="#18191A" />

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:src="@drawable/right_arrow" />
LinearLayout>

<View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginStart="60dp"
        android:background="#ECEDEE" />

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:orientation="horizontal">

<ImageView
            android:layout_width="39dp"
            android:layout_height="22dp"
            android:layout_marginEnd="10dp"
            android:src="@drawable/kabao" />

<TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="卡包"
            android:textColor="#18191A" />

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:src="@drawable/right_arrow" />
LinearLayout>

<View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginStart="60dp"
        android:background="#ECEDEE" />

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:orientation="horizontal">

<ImageView
            android:layout_width="39dp"
            android:layout_height="22dp"
            android:layout_marginEnd="10dp"
            android:src="@drawable/biaoqing" />

<TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="表情"
            android:textColor="#18191A" />

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:src="@drawable/right_arrow" />
LinearLayout>
LinearLayout>

工程截图

完工

至此,微信“我”的界面的详细开发已分步完成讲解.最后把这几块放入一个线性布局(从上到下排列)中即可.源代码见最下方链接.希望大家有所收获.

完整源代码

https://gitee.com/cxyzy1/android_ui_development/tree/master/wechatDemo