逼格爆表的小軟件安裝界面

一、3某0手機助手的圖片

我們可以經常看到一列軟件排行榜列表，其實每一行便是一個簡單的LinearLayout或着RelativeLayout!
[並非打廣告]
(https://img-blog.csdn.net/20161122111055454)

二、用LinearLayout來實現

1.MainActivity.java文件很簡單，直接貼.xml代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:orientation="vertical">

    <!--行佈局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:padding="5dp"
        android:background="#fff">

        <!--圖片-->
        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher" />

        <!--圖片文字說明部分-->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="小辣條~"
                android:textSize="16sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:text="版本：1.0"
                android:textColor="#999"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:text="大小：108.0M"
                android:textColor="#999"
                android:textSize="12sp" />

        </LinearLayout>

        <!--按鈕-->
        <Button
            android:id="@+id/btn"
            android:layout_width="53dp"
            android:layout_height="37dp"
            android:text="安裝"
            android:textColor="#fff"
            android:textSize="12sp"
            android:background="@drawable/btn_gn_n"/>

    </LinearLayout>

</LinearLayout>

2.佈局預覽圖

三、用RelativeLayout來實現

1.直接貼.xml代碼

<?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="match_parent"
    android:background="#eee">

    <!--行佈局-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <!--圖片-->
        <ImageView
            android:id="@+id/im_logo"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/ic_launcher"
            android:layout_centerVertical="true"/>

        <!--按鈕,先前後,在中間-->
        <Button
            android:id="@+id/btn"
            android:layout_width="66dp"
            android:layout_height="34dp"
            android:text="安裝"
            android:textColor="#fff"
            android:textSize="12sp"
            android:background="@drawable/btn_gn_n"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />

        <!--圖片文字說明部分-->
        <LinearLayout
            android:id="@+id/box"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_toRightOf="@id/im_logo"
            android:layout_toLeftOf="@id/btn"
            android:orientation="vertical"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="小辣條~"
                android:textSize="16sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:text="版本：1.0"
                android:textColor="#999"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:text="大小：108.0M"
                android:textColor="#999"
                android:textSize="12sp" />

        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

2.佈局預覽圖

四、心得總結

1、巧用佈局嵌套，並熟悉每個屬性。

2、android:src屬性 （vs ） android:background屬性

1. 相同點：都可以設置ImageView的背景
2. 不同點：android:src在設置ImageView的setAlpha()時有效果
   android:background在設置ImageView的setAlpha()時無效果
   setAlpha()；設置透明度屬性
3. 一般通俗的講：src屬性是原圖顯示，不改變圖片的大小；background屬性則按照控件的大小來放大或者縮小圖片。

3、製作拉伸不變形的Button

1. 利用Photoshop中吸管吸取覺得好的按鈕顏色，在前景色提取顏色–>新建圖片（64*64）,選擇透明色–>用圓角矩形填充前景色–>ctrl+T填滿整個圖片–>保存爲.png格式
2. 利用draw9patch.bat製作.9圖片，原則：左上拉伸，右下內容

4、黃金風格點式的 5dp

1. 前輩經過總結，設置子控件與父控件之間的偏移邊距或者填充邊距，一般偏移量和填充量都設置爲5dp，大或者小都顯得難看
2. 例如，在線性佈局中主屬性中設置
   android:layout_marginLeft=”5dp”
   android:layout_marginRight=”5dp”
   android:layout_marginTop=”5dp”