本系列目標

通過安卓編程仿寫微信“我”的界面,讓大家也能做出類似微信界面.效果圖如下:

本文目標

做出支付部分(其他部分在后續文章中逐步分享).效果圖如下:

實現方案

• 通過截圖工具或者下載一張微信支付照片,放到工程的src/main/res/drawable目錄下,命名為pay.png;同樣獲取一張向右的箭頭,命名為right_arrow.png;

• 添加一個線性布局(LinearLayout,從左到右排列);

• 加入一個圖片控件,設置圖片為微信支付圖片;

• 加入一個文本控件(TextView),內容為:支付,盡可能占滿水平方向上空間.

• 加入一個圖片控件,設置圖片為向右的箭頭.

實現方案圖:

代碼:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="8dp"
    android:background="#FFFFFF"
    android:gravity="center_vertical"
    android:orientation="horizontal">

<ImageView
        android:layout_width="39dp"
        android:layout_height="22dp"
        android:layout_marginEnd="10dp"
        android:src="@drawable/pay" />

<TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_weight="1"
        android:text="支付"
        android:textColor="#18191A" />

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:src="@drawable/right_arrow" />
LinearLayout>

工程截圖

完整源代碼

https://gitee.com/cxyzy1/android_ui_development/tree/master/wechatDemo