安卓开发笔记（三十三）: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">

    <TextView android:id="@+id/top_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="发现" android:textSize="15sp"
        />

    <ImageView android: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"
        />

    <ImageView android: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">

    <include layout="@layout/view_yop" android:id="@+id/great"
        >
    </include>
    <LinearLayout android: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">
        <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/pengyou"/>
        <TextView android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友圈"/>




</LinearLayout>
    <include layout="@layout/saoyisao" android:id="@+id/great"
        >

    </include>
    <TextView android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#C0C0C0"/>
    <LinearLayout android: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">
        <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/yaoyi"/>
        <TextView android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="摇一摇"/>




    </LinearLayout>

    <TextView android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#C0C0C0"/>

    <include layout="@layout/kanyikan"

        >

    </include>

    <LinearLayout android: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">
    <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/souyisou"/>
    <TextView android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="搜一搜"/>




</LinearLayout>
    <LinearLayout android: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">
        <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/fujin"/>
        <TextView android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="附近的人"/>

    </LinearLayout>

    <include layout="@layout/gouwu"

        >

    </include>
    <TextView android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#C0C0C0"/>
    <LinearLayout android: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">
        <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/youxi"/>
        <TextView android:textSize="15sp" android:layout_marginLeft="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="游戏"/>

    </LinearLayout>

    <LinearLayout android: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">
        <ImageView android:layout_gravity="center" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/xiaochengxu"/>
        <TextView android: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">
    <ImageView android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/gouwu" android:layout_centerVertical="true"

        />
    <TextView android: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">
    <ImageView android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/kanyikan" android:layout_centerVertical="true"

        />
    <TextView android: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">
    <ImageView android:id="@+id/top_r" android:layout_width="17dp" android:layout_height="17dp" android:src="@drawable/saoyisao" android:layout_centerVertical="true"

        />
    <TextView android: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

若是您有更好的方法，也能够找我聊聊

原文出处：https://www.cnblogs.com/geeksongs/p/10824454.html