AS类微信界面设计

---

一、设计目标

简易类微信界面设计

二、步骤分类

1.添加drawable图片

在阿里矢量图库搜索微信图标并下载png图片，然后点击复制，再如图所示点击paste，将图片保存在drawable里面方便后续使用（请给图片命名）。

请分别下载绿色和黑色图片方便后续使用。我在这里分别将黑色和绿色命名为liaotian和liaotian1.

2.新建top来写wechat的标题

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="WeChat"
        android:textColor="#ffffff"
        android:textSize="20sp"/>
</LinearLayout>

3.新建buttom

用上图的方法新建xml

加入四个linearlayout并且命名，然后在linearlayout下面加入imageview和textview。

 xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    android:layout_gravity="bottom"
    android:background="#CCCCC5"
    android:baselineAligned="false">

    <LinearLayout
        android:id="@+id/liaotian"
        android:layout_width="270px"
        android:layout_height="200px"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/lt"
            android:layout_width="100px"
            android:layout_height="100px"
            app:srcCompat="@drawable/liaotian" />

        <TextView
            android:id="@+id/liaotian1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="聊天" />

    <