安卓开发笔记（三十三）:Android仿写微信发现

首先我们来看看仿写之后的效果：

看到是这个界面我们首先应该思考这些按钮是怎么做出来的？有了一个整体的思路之后才知道该怎么办。最开始我想的就直接利用button控件上面直接加上png的图片就可以形成一个按钮了，但当我加入图片之后，发现因为图片太大导致一个按钮都会占据一个屏幕一半的空间，实在是得不偿失，根本无法使用。如果直接利用button在上面添加图片，是不能够改变我们加入图片的大小的，虽然这是最简单的方法，但是缺陷比较多，如果实在先使用这种方法就必须自己将png图片的大小变小，但作为一个程序员还是算了。之后我又想到了自定义view，但是这个方法太麻烦了，对Java的要求较高，因此才考虑到了这里的第三种方法：将每一个按钮写成一个linearlayout,并将每一个线性布局设定成可以被监听的模式，这样就可以完全当一个按钮来使用了，还可以为它设定选择器，也就是我们的selector，最后的效果和我们的button一样，点击之后也会发生颜色的改变（白色变成灰色）。

　　我们仔细观察，每两个按钮之间还会有一条很细的线，这条线则直接可以使用textview控件来进行填充、利用backgroud属性就可以设定textview的背景颜色，里面没有文字也没有任何关系，但是需要将textview的高度设定成0.5或者1dp。这样大体的思路就有了，还需要注意一点的是我们在进行UI布局的时候尽可能利用include进行布局，这样才会让其他程序员能够很好地进行理解。下面我们分别来看看include的布局以及我们的主界面的布局。

一.首页标题栏

首页标题栏我就直接使用了一个相对布局，后面引用两个imageview，为了效果的展示。如果真要将这两个图标设定为可以监听的话，可以直接将这个控件更改为imagebutton，并给它设定一个响应的id即可。不需要做过多的修改。这个布局我们会通过include直接引入到我们的主界面当中。

<?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="60dp"android:orientation="vertical"android:background="#C0C0C0"android:padding="10dp"><TextViewandroid:id="@+id/top_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:text="发现"android:textSize="15sp"/><ImageViewandroid:layout_alignParentBottom="true"android:id="@+id/top_r"android:layout_width="17dp"android:layout_height="17dp"android:src="@drawable/sousuo"android:layout_centerVertical="true"android:layout_toLeftOf="@+id/top_left"android:layout_marginRight="29dp"/><ImageViewandroid:layout_alignParentBottom="true"android:id="@+id/top_left"android:layout_width="17dp"android:layout_height="17dp"android:src="@drawable/tianjia"android:layout_centerVertical="true"android:layout_alignParentRight="true"/></RelativeLayout>

二.主界面代码

这部分代码你就可以清晰地看到我的思路了，凡是每两个连在一起的控件的第一个自定义的按钮，我都使用了引入布局的方式，第二个按钮则直接写在了主界面之上。具体原因是因为只有第一个按钮为引入，而不是在主界面上直接编写，这样两个按钮才会连在一起，不然就会分开，达不到仿写的效果。如果您有更好的办法来解决这个问题的话，本人感激不尽。

<?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"xmlns:tools="http://schemas.android.com/tools"android:orientation="vertical"android:background="#C0C0C0"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><includelayout="@layout/view_yop"android:id="@+id/great"></include><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/pengyou"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="朋友圈"/></LinearLayout><includelayout="@layout/saoyisao"android:id="@+id/great"></include><TextViewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="#C0C0C0"/><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit2"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/yaoyi"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="摇一摇"/></LinearLayout><TextViewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="#C0C0C0"/><include layout="@layout/kanyikan"></include><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit3"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/souyisou"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="搜一搜"/></LinearLayout><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit4"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/fujin"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="附近的人"/></LinearLayout><includelayout="@layout/gouwu"></include><TextViewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="#C0C0C0"/><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit5"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/youxi"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="游戏"/></LinearLayout><LinearLayoutandroid:background="#ffffff"android:id="@+id/gj_recruit9"android:layout_width="match_parent"android:layout_height="50dip"android:layout_marginBottom="17dip"android:focusableInTouchMode="true"android:clickable="true"android:orientation="horizontal"android:padding="7dip"><ImageViewandroid:layout_gravity="center"android:layout_width="20dp"android:layout_height="20dp"android:background="@drawable/xiaochengxu"/><TextViewandroid:textSize="15sp"android:layout_marginLeft="10dp"android:layout_gravity="center"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="小程序"/></LinearLayout></LinearLayout>

我们可以清晰地看到这个项目所include的id组件有哪些，下面我们就分别展示下各个id所对应引入的布局。

三.gouwu.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/kan"android:layout_width="match_parent"android:layout_height="45dp"android:orientation="vertical"android:background="#ffffff"android:padding="10dp"><ImageViewandroid:id="@+id/top_r"android:layout_width="17dp"android:layout_height="17dp"android:src="@drawable/gouwu"android:layout_centerVertical="true"/><TextViewandroid:id="@+id/top_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@+id/top_r"android:layout_marginLeft="10dp"android:text="购物"android:textSize="15sp"/></RelativeLayout>

四.kanyikan.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/kan"android:layout_width="match_parent"android:layout_height="45dp"android:orientation="vertical"android:background="#ffffff"android:padding="10dp"><ImageViewandroid:id="@+id/top_r"android:layout_width="17dp"android:layout_height="17dp"android:src="@drawable/kanyikan"android:layout_centerVertical="true"/><TextViewandroid:id="@+id/top_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@+id/top_r"android:layout_marginLeft="10dp"android:text="看一看"android:textSize="15sp"/></RelativeLayout>

五.saoyisao.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/saoa"android:layout_width="match_parent"android:layout_height="45dp"android:orientation="vertical"android:background="#ffffff"android:padding="10dp"><ImageViewandroid:id="@+id/top_r"android:layout_width="17dp"android:layout_height="17dp"android:src="@drawable/saoyisao"android:layout_centerVertical="true"/><TextViewandroid:id="@+id/top_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@+id/top_r"android:layout_marginLeft="10dp"android:text="扫一扫"android:textSize="15sp"/>
</RelativeLayout>

这样我们的界面编写总算是完成了，唯一博客里没有讲的就是这些png图片哪里来的了，如果大家对这个很感兴趣的话，可以在这篇博文当中看看那些png图片是怎么来的。

https://www.cnblogs.com/geeksongs/p/10769365.html

如果您有更好的方法，也可以找我聊聊