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

時間 2020-08-10 標籤安卓開發筆記三十三 33 android 仿寫微信發現

首先咱們來看看仿寫以後的效果：html

看到是這個界面咱們首先應該思考這些按鈕是怎麼作出來的？有了一個總體的思路以後才知道該怎麼辦。最開始我想的就直接利用button控件上面直接加上png的圖片就能夠造成一個按鈕了，但當我加入圖片以後，發現由於圖片太大致使一個按鈕都會佔據一個屏幕一半的空間，實在是得不償失，根本沒法使用。若是直接利用button在上面添加圖片，是不可以改變咱們加入圖片的大小的，雖然這是最簡單的方法，可是缺陷比較多，若是實在先使用這種方法就必須本身將png圖片的大小變小，但做爲一個程序員仍是算了。以後我又想到了自定義view，可是這個方法太麻煩了，對Java的要求較高，所以才考慮到了這裏的第三種方法：將每個按鈕寫成一個linearlayout,並將每個線性佈局設定成能夠被監聽的模式，這樣就能夠徹底當一個按鈕來使用了，還能夠爲它設定選擇器，也就是咱們的selector，最後的效果和咱們的button同樣，點擊以後也會發生顏色的改變（白色變成灰色）。android

　　咱們仔細觀察，每兩個按鈕之間還會有一條很細的線，這條線則直接可使用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>

二.主界面代碼

這部分代碼你就能夠清晰地看到個人思路了，凡是每兩個連在一塊兒的控件的第一個自定義的按鈕，我都使用了引入佈局的方式，第二個按鈕則直接寫在了主界面之上。具體緣由是由於只有第一個按鈕爲引入，而不是在主界面上直接編寫，這樣兩個按鈕纔會連在一塊兒，否則就會分開，達不到仿寫的效果。若是您有更好的辦法來解決這個問題的話，本人感激涕零。app

<?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圖片是怎麼來的。ui

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

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

原文出處：https://www.cnblogs.com/geeksongs/p/10824454.html3d