安卓開發筆記（三十三）:Android仿寫微信發現

首先我們來看看仿寫之後的效果：看到是這個界面我們首先應該思考這些按鈕是怎麼做出來的？有了一個整體的思路之後才知道該怎麼辦。最開始我想的就直接利用button控制項上面直接加上png的圖片就可以形成一個按鈕了，但當我加入圖片之後，發現因為圖片太大導致一個按鈕都會占據一個屏幕一半的空間，實在是得不償失， ...

首先我們來看看仿寫之後的效果：

看到是這個界面我們首先應該思考這些按鈕是怎麼做出來的？有了一個整體的思路之後才知道該怎麼辦。最開始我想的就直接利用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

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