本系列目标

通过安卓编程仿写微信“我”的界面,让大家也能做出类似微信界面.效果图如下:

本文目标

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

实现方案

• 通过截图工具或者下载一张微信支付照片,放到工程的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