先下载一个微信apk,以压缩包的形式打开,对比微信界面,找出我们需要的素材。
以下两个模块的还原完全采用RelativeLayout相对布局。
按钮效果的实现
点击对应版块,将有点击效果。这可以通过修改点击背景图实现。
在res目录下新建drawable目录,存放以下文件。
单行:selector_single.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="false" android:drawable="@drawable/ic_preference_single_normal"></item> <item android:state_pressed="true" android:drawable="@drawable/ic_preference_single_pressed"></item> </selector>
多行顶端:selector_first.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="false" android:drawable="@drawable/ic_preference_first_normal"></item> <item android:state_pressed="true" android:drawable="@drawable/ic_preference_first_pressed"></item> </selector>
多行中部:selector_body.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="false" android:drawable="@drawable/ic_preference_normal"></item> <item android:state_pressed="true" android:drawable="@drawable/ic_preference_pressed"></item> </selector>
多行底部:selector_last.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="false" android:drawable="@drawable/ic_preference_last_normal"></item> <item android:state_pressed="true" android:drawable="@drawable/ic_preference_last_pressed"></item> </selector>
“发现”模块
布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E1E0DE" tools:context=".FindActivity" > <RelativeLayout android:id="@+id/relativeLayout1" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="#2B3439" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="发现" android:textColor="#fff" android:textSize="22sp" /> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout1" android:layout_marginTop="10dp" android:background="@drawable/selector_single" android:clickable="true" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/find_more_friend_photograph_icon" /> <TextView android:id="@+id/text_pyq" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView1" android:text="朋友圈" android:textColor="#000" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout3" android:layout_width="fill_parent" android:layout_height="100dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout2" android:layout_marginTop="10dp" > <RelativeLayout android:id="@+id/rel_sys" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/selector_first" android:clickable="true" > <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/find_more_friend_scan" /> <TextView android:id="@+id/text_sys" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView3" android:text="扫一扫" android:textColor="#000" /> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_marginRight="-10.5dp" android:background="@drawable/selector_last" android:clickable="true"> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/come_from_shake" /> <TextView android:id="@+id/text_yyy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView5" android:text="摇一摇" android:textColor="#000" /> <ImageView android:id="@+id/imageView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout4" android:layout_width="match_parent" android:layout_height="100dp" android:layout_alignParentLeft="true" android:layout_marginTop="10dp" android:layout_below="@+id/relativeLayout3"> <RelativeLayout android:id="@+id/rel_fjdr" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/selector_first" android:clickable="true" > <ImageView android:id="@+id/imageView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/find_more_friend_near_icon" /> <TextView android:id="@+id/text_fjdr" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView7" android:text="附近的人" android:textColor="#000" /> <ImageView android:id="@+id/imageView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_marginRight="-10.5dp" android:background="@drawable/selector_last" android:clickable="true"> <ImageView android:id="@+id/imageView9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/come_from_bottle" /> <TextView android:id="@+id/text_plp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView9" android:text="漂流瓶" android:textColor="#000" /> <ImageView android:id="@+id/imageView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout5" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout4" android:layout_marginTop="10dp" android:background="@drawable/selector_single" android:clickable="true"> <ImageView android:id="@+id/imageView11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_game" /> <TextView android:id="@+id/text_yxzx" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView11" android:text="游戏中心" android:textColor="#000" /> <ImageView android:id="@+id/imageView12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> </RelativeLayout>
效果图
“我”模块
布局文件
<?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="#E1E0DE" > <RelativeLayout android:id="@+id/relativeLayout1" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="#2B3439" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="我" android:textColor="#fff" android:textSize="22sp" /> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="90dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout1" android:layout_marginTop="10dp" android:background="@drawable/selector_single" android:clickable="true" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:src="@drawable/special_spring_head2" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerVertical="true" android:layout_marginLeft="23dp" android:paddingTop="20dp" android:paddingBottom="20dp" android:layout_toRightOf="@+id/imageView1" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="决Jue" android:textColor="#000" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="微信号:JueWYQ" /> </RelativeLayout> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout3" android:layout_width="fill_parent" android:layout_height="150dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout2" android:layout_marginTop="10dp" > <RelativeLayout android:id="@+id/rel_wdxc" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/selector_first" android:clickable="true" > <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_my_album" /> <TextView android:id="@+id/text_sys" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView3" android:text="我的相册" android:textColor="#000" /> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:id="@+id/rel_wdsc" android:layout_width="match_parent" android:layout_height="50dp" android:layout_below="@id/rel_wdxc" android:layout_alignParentLeft="true" android:background="@drawable/selector_body" android:clickable="true"> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_my_favorite" /> <TextView android:id="@+id/text_sys" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView3" android:text="我的收藏" android:textColor="#000" /> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_marginRight="-10.5dp" android:background="@drawable/selector_last" android:clickable="true"> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_my_bank_card" /> <TextView android:id="@+id/text_yyy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView5" android:text="我的银行卡" android:textColor="#000" /> <ImageView android:id="@+id/imageView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout4" android:layout_width="fill_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout3" android:layout_marginTop="10dp" android:background="@drawable/selector_single" android:clickable="true"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_emoji_store" /> <TextView android:id="@+id/text_pyq" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView1" android:text="表情商店" android:textColor="#000" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> <RelativeLayout android:id="@+id/relativeLayout5" android:layout_width="fill_parent" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout4" android:layout_marginTop="10dp" android:background="@drawable/selector_single" android:clickable="true" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/more_setting" /> <TextView android:id="@+id/text_pyq" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/imageView1" android:text="设置" android:textColor="#000" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:src="@drawable/pay_nofify_nav" /> </RelativeLayout> </RelativeLayout>