【Android】“微信”apk中的“发现”和“我”两个模块的布局

先下载一个微信apk，以压缩包的形式打开，对比微信界面，找出我们需要的素材。

以下两个模块的还原完全采用RelativeLayout相对布局。

按钮效果的实现

点击对应版块，将有点击效果。这可以通过修改点击背景图实现。

在res目录下新建drawable目录，存放以下文件。

单行：selector_single.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android" >  
3.     <item android:state_pressed="false" android:drawable="@drawable/ic_preference_single_normal"></item>  
4.     <item android:state_pressed="true" android:drawable="@drawable/ic_preference_single_pressed"></item>  
5. </selector>  

多行顶端：selector_first.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android" >  
3.     <item android:state_pressed="false" android:drawable="@drawable/ic_preference_first_normal"></item>  
4.     <item android:state_pressed="true" android:drawable="@drawable/ic_preference_first_pressed"></item>  
5. </selector>  

多行中部：selector_body.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android" >  
3.     <item android:state_pressed="false" android:drawable="@drawable/ic_preference_normal"></item>  
4.     <item android:state_pressed="true" android:drawable="@drawable/ic_preference_pressed"></item>  
5. </selector>  

多行底部：selector_last.xml

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas./apk/res/android" >  
3.     <item android:state_pressed="false" android:drawable="@drawable/ic_preference_last_normal"></item>  
4.     <item android:state_pressed="true" android:drawable="@drawable/ic_preference_last_pressed"></item>  
5. </selector>  

“发现”模块

布局文件

[html] view plaincopy

1. <RelativeLayout xmlns:android="http://schemas./apk/res/android"  
2.     xmlns:tools="http://schemas./tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#E1E0DE"  
6.     tools:context=".FindActivity" >  
7.   
8.     <RelativeLayout  
9.         android:id="@+id/relativeLayout1"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="50dp"  
12.         android:layout_alignParentLeft="true"  
13.         android:layout_alignParentTop="true"  
14.         android:background="#2B3439" >  
15.   
16.         <TextView  
17.             android:id="@+id/textView1"  
18.             android:layout_width="wrap_content"  
19.             android:layout_height="wrap_content"  
20.             android:layout_centerHorizontal="true"  
21.             android:layout_centerVertical="true"  
22.             android:text="发现"  
23.             android:textColor="#fff"  
24.             android:textSize="22sp" />  
25.     </RelativeLayout>  
26.   
27.     <RelativeLayout  
28.         android:id="@+id/relativeLayout2"  
29.         android:layout_width="fill_parent"  
30.         android:layout_height="50dp"  
31.         android:layout_alignParentLeft="true"  
32.         android:layout_below="@+id/relativeLayout1"  
33.         android:layout_marginTop="10dp"  
34.         android:background="@drawable/selector_single"  
35.         android:clickable="true" >  
36.   
37.         <ImageView  
38.             android:id="@+id/imageView1"  
39.             android:layout_width="wrap_content"  
40.             android:layout_height="wrap_content"  
41.             android:layout_alignParentLeft="true"  
42.             android:layout_centerVertical="true"  
43.             android:src="@drawable/find_more_friend_photograph_icon" />  
44.   
45.         <TextView  
46.             android:id="@+id/text_pyq"  
47.             android:layout_width="wrap_content"  
48.             android:layout_height="wrap_content"  
49.             android:layout_centerVertical="true"  
50.             android:layout_marginLeft="20dp"  
51.             android:layout_toRightOf="@+id/imageView1"  
52.             android:text="朋友圈"  
53.             android:textColor="#000" />  
54.   
55.         <ImageView  
56.             android:id="@+id/imageView2"  
57.             android:layout_width="wrap_content"  
58.             android:layout_height="wrap_content"  
59.             android:layout_alignParentRight="true"  
60.             android:layout_centerVertical="true"  
61.             android:layout_marginRight="10dp"  
62.             android:src="@drawable/pay_nofify_nav" />  
63.     </RelativeLayout>  
64.   
65.     <RelativeLayout  
66.         android:id="@+id/relativeLayout3"  
67.         android:layout_width="fill_parent"  
68.         android:layout_height="100dp"  
69.         android:layout_alignParentLeft="true"  
70.         android:layout_below="@+id/relativeLayout2"  
71.         android:layout_marginTop="10dp" >  
72.   
73.         <RelativeLayout  
74.             android:id="@+id/rel_sys"  
75.             android:layout_width="match_parent"  
76.             android:layout_height="50dp"  
77.             android:layout_alignParentLeft="true"  
78.             android:layout_alignParentTop="true"   
79.             android:background="@drawable/selector_first"  
80.             android:clickable="true" >  
81.   
82.             <ImageView  
83.                 android:id="@+id/imageView3"  
84.                 android:layout_width="wrap_content"  
85.                 android:layout_height="wrap_content"  
86.                 android:layout_alignParentLeft="true"  
87.                 android:layout_centerVertical="true"  
88.                 android:src="@drawable/find_more_friend_scan" />  
89.   
90.             <TextView  
91.                 android:id="@+id/text_sys"  
92.                 android:layout_width="wrap_content"  
93.                 android:layout_height="wrap_content"  
94.                 android:layout_centerVertical="true"  
95.                 android:layout_marginLeft="20dp"  
96.                 android:layout_toRightOf="@+id/imageView3"  
97.                 android:text="扫一扫"  
98.                 android:textColor="#000" />  
99.   
100.             <ImageView  
101.                 android:id="@+id/imageView4"  
102.                 android:layout_width="wrap_content"  
103.                 android:layout_height="wrap_content"  
104.                 android:layout_alignParentRight="true"  
105.                 android:layout_centerVertical="true"  
106.                 android:layout_marginRight="10dp"  
107.                 android:src="@drawable/pay_nofify_nav" />  
108.         </RelativeLayout>  
109.   
110.         <RelativeLayout  
111.             android:layout_width="wrap_content"  
112.             android:layout_height="50dp"  
113.             android:layout_alignParentBottom="true"  
114.             android:layout_marginRight="-10.5dp"  
115.             android:background="@drawable/selector_last"  
116.             android:clickable="true">  
117.               
118.             <ImageView  
119.                 android:id="@+id/imageView5"  
120.                 android:layout_width="wrap_content"  
121.                 android:layout_height="wrap_content"  
122.                 android:layout_alignParentLeft="true"  
123.                 android:layout_centerVertical="true"  
124.                 android:src="@drawable/come_from_shake" />  
125.   
126.             <TextView  
127.                 android:id="@+id/text_yyy"  
128.                 android:layout_width="wrap_content"  
129.                 android:layout_height="wrap_content"  
130.                 android:layout_centerVertical="true"  
131.                 android:layout_marginLeft="20dp"  
132.                 android:layout_toRightOf="@+id/imageView5"  
133.                 android:text="摇一摇"  
134.                 android:textColor="#000" />  
135.   
136.             <ImageView  
137.                 android:id="@+id/imageView6"  
138.                 android:layout_width="wrap_content"  
139.                 android:layout_height="wrap_content"  
140.                 android:layout_alignParentRight="true"  
141.                 android:layout_centerVertical="true"  
142.                 android:layout_marginRight="10dp"  
143.                 android:src="@drawable/pay_nofify_nav" />  
144.         </RelativeLayout>  
145.     </RelativeLayout>  
146.   
147.     <RelativeLayout  
148.         android:id="@+id/relativeLayout4"  
149.         android:layout_width="match_parent"  
150.         android:layout_height="100dp"  
151.         android:layout_alignParentLeft="true"  
152.         android:layout_marginTop="10dp"   
153.         android:layout_below="@+id/relativeLayout3">  
154.           
155.         <RelativeLayout  
156.             android:id="@+id/rel_fjdr"  
157.             android:layout_width="match_parent"  
158.             android:layout_height="50dp"  
159.             android:layout_alignParentLeft="true"  
160.             android:layout_alignParentTop="true"   
161.             android:background="@drawable/selector_first"  
162.             android:clickable="true" >  
163.   
164.             <ImageView  
165.                 android:id="@+id/imageView7"  
166.                 android:layout_width="wrap_content"  
167.                 android:layout_height="wrap_content"  
168.                 android:layout_alignParentLeft="true"  
169.                 android:layout_centerVertical="true"  
170.                 android:src="@drawable/find_more_friend_near_icon" />  
171.   
172.             <TextView  
173.                 android:id="@+id/text_fjdr"  
174.                 android:layout_width="wrap_content"  
175.                 android:layout_height="wrap_content"  
176.                 android:layout_centerVertical="true"  
177.                 android:layout_marginLeft="20dp"  
178.                 android:layout_toRightOf="@+id/imageView7"  
179.                 android:text="附近的人"  
180.                 android:textColor="#000" />  
181.   
182.             <ImageView  
183.                 android:id="@+id/imageView8"  
184.                 android:layout_width="wrap_content"  
185.                 android:layout_height="wrap_content"  
186.                 android:layout_alignParentRight="true"  
187.                 android:layout_centerVertical="true"  
188.                 android:layout_marginRight="10dp"  
189.                 android:src="@drawable/pay_nofify_nav" />  
190.         </RelativeLayout>  
191.   
192.   
193.         <RelativeLayout  
194.             android:layout_width="wrap_content"  
195.             android:layout_height="50dp"  
196.             android:layout_alignParentBottom="true"  
197.             android:layout_marginRight="-10.5dp"  
198.             android:background="@drawable/selector_last"  
199.             android:clickable="true">  
200.               
201.             <ImageView  
202.                 android:id="@+id/imageView9"  
203.                 android:layout_width="wrap_content"  
204.                 android:layout_height="wrap_content"  
205.                 android:layout_alignParentLeft="true"  
206.                 android:layout_centerVertical="true"  
207.                 android:src="@drawable/come_from_bottle" />  
208.   
209.             <TextView  
210.                 android:id="@+id/text_plp"  
211.                 android:layout_width="wrap_content"  
212.                 android:layout_height="wrap_content"  
213.                 android:layout_centerVertical="true"  
214.                 android:layout_marginLeft="20dp"  
215.                 android:layout_toRightOf="@+id/imageView9"  
216.                 android:text="漂流瓶"  
217.                 android:textColor="#000" />  
218.   
219.             <ImageView  
220.                 android:id="@+id/imageView10"  
221.                 android:layout_width="wrap_content"  
222.                 android:layout_height="wrap_content"  
223.                 android:layout_alignParentRight="true"  
224.                 android:layout_centerVertical="true"  
225.                 android:layout_marginRight="10dp"  
226.                 android:src="@drawable/pay_nofify_nav" />  
227.         </RelativeLayout>  
228.     </RelativeLayout>  
229.   
230.     <RelativeLayout  
231.         android:id="@+id/relativeLayout5"  
232.         android:layout_width="match_parent"  
233.         android:layout_height="50dp"  
234.         android:layout_alignParentLeft="true"  
235.         android:layout_below="@+id/relativeLayout4"  
236.         android:layout_marginTop="10dp"   
237.         android:background="@drawable/selector_single"  
238.         android:clickable="true">  
239.         <ImageView  
240.             android:id="@+id/imageView11"  
241.             android:layout_width="wrap_content"  
242.             android:layout_height="wrap_content"  
243.             android:layout_alignParentLeft="true"  
244.             android:layout_centerVertical="true"  
245.             android:src="@drawable/more_game" />  
246.   
247.         <TextView  
248.             android:id="@+id/text_yxzx"  
249.             android:layout_width="wrap_content"  
250.             android:layout_height="wrap_content"  
251.             android:layout_centerVertical="true"  
252.             android:layout_marginLeft="20dp"  
253.             android:layout_toRightOf="@+id/imageView11"  
254.             android:text="游戏中心"  
255.             android:textColor="#000" />  
256.   
257.         <ImageView  
258.             android:id="@+id/imageView12"  
259.             android:layout_width="wrap_content"  
260.             android:layout_height="wrap_content"  
261.             android:layout_alignParentRight="true"  
262.             android:layout_centerVertical="true"  
263.             android:layout_marginRight="10dp"  
264.             android:src="@drawable/pay_nofify_nav" />  
265.     </RelativeLayout>  
266.   
267. </RelativeLayout>  

效果图

“我”模块

布局文件

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas./apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#E1E0DE" >  
6.       
7.     <RelativeLayout  
8.         android:id="@+id/relativeLayout1"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="50dp"  
11.         android:layout_alignParentLeft="true"  
12.         android:layout_alignParentTop="true"  
13.         android:background="#2B3439" >  
14.   
15.         <TextView  
16.             android:id="@+id/textView1"  
17.             android:layout_width="wrap_content"  
18.             android:layout_height="wrap_content"  
19.             android:layout_centerHorizontal="true"  
20.             android:layout_centerVertical="true"  
21.             android:text="我"  
22.             android:textColor="#fff"  
23.             android:textSize="22sp" />  
24.     </RelativeLayout>  
25.       
26.     <RelativeLayout  
27.         android:id="@+id/relativeLayout2"  
28.         android:layout_width="fill_parent"  
29.         android:layout_height="90dp"  
30.         android:layout_alignParentLeft="true"  
31.         android:layout_below="@+id/relativeLayout1"  
32.         android:layout_marginTop="10dp"  
33.         android:background="@drawable/selector_single"  
34.         android:clickable="true" >  
35.   
36.         <ImageView  
37.             android:id="@+id/imageView1"  
38.             android:layout_width="wrap_content"  
39.             android:layout_height="wrap_content"  
40.             android:layout_alignParentLeft="true"  
41.             android:layout_centerVertical="true"  
42.             android:layout_marginLeft="10dp"  
43.             android:src="@drawable/special_spring_head2" />  
44.   
45.         <RelativeLayout  
46.             android:layout_width="match_parent"  
47.             android:layout_height="match_parent"  
48.             android:layout_centerVertical="true"  
49.             android:layout_marginLeft="23dp"  
50.             android:paddingTop="20dp"  
51.             android:paddingBottom="20dp"  
52.             android:layout_toRightOf="@+id/imageView1" >  
53.   
54.             <TextView  
55.                 android:id="@+id/textView2"  
56.                 android:layout_width="wrap_content"  
57.                 android:layout_height="wrap_content"  
58.                 android:layout_alignParentLeft="true"  
59.                 android:layout_alignParentTop="true"  
60.                 android:text="决Jue"  
61.                 android:textColor="#000" />  
62.   
63.             <TextView  
64.                 android:id="@+id/textView3"  
65.                 android:layout_width="wrap_content"  
66.                 android:layout_height="wrap_content"  
67.                 android:layout_alignParentBottom="true"  
68.                 android:layout_alignParentLeft="true"  
69.                 android:text="微信号：JueWYQ" />  
70.               
71.         </RelativeLayout>  
72.   
73.         <ImageView  
74.             android:id="@+id/imageView2"  
75.             android:layout_width="wrap_content"  
76.             android:layout_height="wrap_content"  
77.             android:layout_alignParentRight="true"  
78.             android:layout_centerVertical="true"  
79.             android:layout_marginRight="10dp"  
80.             android:src="@drawable/pay_nofify_nav" />  
81.     </RelativeLayout>  
82.   
83.    <RelativeLayout  
84.         android:id="@+id/relativeLayout3"  
85.         android:layout_width="fill_parent"  
86.         android:layout_height="150dp"  
87.         android:layout_alignParentLeft="true"  
88.         android:layout_below="@+id/relativeLayout2"  
89.         android:layout_marginTop="10dp" >  
90.   
91.         <RelativeLayout  
92.             android:id="@+id/rel_wdxc"  
93.             android:layout_width="match_parent"  
94.             android:layout_height="50dp"  
95.             android:layout_alignParentLeft="true"  
96.             android:layout_alignParentTop="true"  
97.             android:background="@drawable/selector_first"  
98.             android:clickable="true" >  
99.   
100.             <ImageView  
101.                 android:id="@+id/imageView3"  
102.                 android:layout_width="wrap_content"  
103.                 android:layout_height="wrap_content"  
104.                 android:layout_alignParentLeft="true"  
105.                 android:layout_centerVertical="true"  
106.                 android:src="@drawable/more_my_album" />  
107.   
108.             <TextView  
109.                 android:id="@+id/text_sys"  
110.                 android:layout_width="wrap_content"  
111.                 android:layout_height="wrap_content"  
112.                 android:layout_centerVertical="true"  
113.                 android:layout_marginLeft="20dp"  
114.                 android:layout_toRightOf="@+id/imageView3"  
115.                 android:text="我的相册"  
116.                 android:textColor="#000" />  
117.   
118.             <ImageView  
119.                 android:id="@+id/imageView4"  
120.                 android:layout_width="wrap_content"  
121.                 android:layout_height="wrap_content"  
122.                 android:layout_alignParentRight="true"  
123.                 android:layout_centerVertical="true"  
124.                 android:layout_marginRight="10dp"  
125.                 android:src="@drawable/pay_nofify_nav" />  
126.         </RelativeLayout>  
127.   
128.         <RelativeLayout  
129.             android:id="@+id/rel_wdsc"  
130.             android:layout_width="match_parent"  
131.             android:layout_height="50dp"  
132.             android:layout_below="@id/rel_wdxc"  
133.             android:layout_alignParentLeft="true"  
134.             android:background="@drawable/selector_body"  
135.             android:clickable="true">  
136.   
137.             <ImageView  
138.                 android:id="@+id/imageView3"  
139.                 android:layout_width="wrap_content"  
140.                 android:layout_height="wrap_content"  
141.                 android:layout_alignParentLeft="true"  
142.                 android:layout_centerVertical="true"  
143.                 android:src="@drawable/more_my_favorite" />  
144.   
145.             <TextView  
146.                 android:id="@+id/text_sys"  
147.                 android:layout_width="wrap_content"  
148.                 android:layout_height="wrap_content"  
149.                 android:layout_centerVertical="true"  
150.                 android:layout_marginLeft="20dp"  
151.                 android:layout_toRightOf="@+id/imageView3"  
152.                 android:text="我的收藏"  
153.                 android:textColor="#000" />  
154.   
155.             <ImageView  
156.                 android:id="@+id/imageView4"  
157.                 android:layout_width="wrap_content"  
158.                 android:layout_height="wrap_content"  
159.                 android:layout_alignParentRight="true"  
160.                 android:layout_centerVertical="true"  
161.                 android:layout_marginRight="10dp"  
162.                 android:src="@drawable/pay_nofify_nav" />  
163.         </RelativeLayout>  
164.   
165.         <RelativeLayout  
166.             android:layout_width="wrap_content"  
167.             android:layout_height="50dp"  
168.             android:layout_alignParentBottom="true"  
169.             android:layout_marginRight="-10.5dp"  
170.             android:background="@drawable/selector_last"  
171.             android:clickable="true">  
172.               
173.             <ImageView  
174.                 android:id="@+id/imageView5"  
175.                 android:layout_width="wrap_content"  
176.                 android:layout_height="wrap_content"  
177.                 android:layout_alignParentLeft="true"  
178.                 android:layout_centerVertical="true"  
179.                 android:src="@drawable/more_my_bank_card" />  
180.   
181.             <TextView  
182.                 android:id="@+id/text_yyy"  
183.                 android:layout_width="wrap_content"  
184.                 android:layout_height="wrap_content"  
185.                 android:layout_centerVertical="true"  
186.                 android:layout_marginLeft="20dp"  
187.                 android:layout_toRightOf="@+id/imageView5"  
188.                 android:text="我的银行卡"  
189.                 android:textColor="#000" />  
190.   
191.             <ImageView  
192.                 android:id="@+id/imageView6"  
193.                 android:layout_width="wrap_content"  
194.                 android:layout_height="wrap_content"  
195.                 android:layout_alignParentRight="true"  
196.                 android:layout_centerVertical="true"  
197.                 android:layout_marginRight="10dp"  
198.                 android:src="@drawable/pay_nofify_nav" />  
199.         </RelativeLayout>  
200.     </RelativeLayout>  
201.     <RelativeLayout  
202.         android:id="@+id/relativeLayout4"  
203.         android:layout_width="fill_parent"  
204.         android:layout_height="50dp"  
205.         android:layout_alignParentLeft="true"  
206.         android:layout_below="@+id/relativeLayout3"  
207.         android:layout_marginTop="10dp"  
208.         android:background="@drawable/selector_single"  
209.         android:clickable="true">  
210.   
211.         <ImageView  
212.             android:id="@+id/imageView1"  
213.             android:layout_width="wrap_content"  
214.             android:layout_height="wrap_content"  
215.             android:layout_alignParentLeft="true"  
216.             android:layout_centerVertical="true"  
217.             android:src="@drawable/more_emoji_store" />  
218.   
219.         <TextView  
220.             android:id="@+id/text_pyq"  
221.             android:layout_width="wrap_content"  
222.             android:layout_height="wrap_content"  
223.             android:layout_centerVertical="true"  
224.             android:layout_marginLeft="20dp"  
225.             android:layout_toRightOf="@+id/imageView1"  
226.             android:text="表情商店"  
227.             android:textColor="#000" />  
228.   
229.         <ImageView  
230.             android:id="@+id/imageView2"  
231.             android:layout_width="wrap_content"  
232.             android:layout_height="wrap_content"  
233.             android:layout_alignParentRight="true"  
234.             android:layout_centerVertical="true"  
235.             android:layout_marginRight="10dp"  
236.             android:src="@drawable/pay_nofify_nav" />  
237.     </RelativeLayout>  
238.     <RelativeLayout  
239.         android:id="@+id/relativeLayout5"  
240.         android:layout_width="fill_parent"  
241.         android:layout_height="50dp"  
242.         android:layout_alignParentLeft="true"  
243.         android:layout_below="@+id/relativeLayout4"  
244.         android:layout_marginTop="10dp"  
245.         android:background="@drawable/selector_single"  
246.         android:clickable="true" >  
247.   
248.         <ImageView  
249.             android:id="@+id/imageView1"  
250.             android:layout_width="wrap_content"  
251.             android:layout_height="wrap_content"  
252.             android:layout_alignParentLeft="true"  
253.             android:layout_centerVertical="true"  
254.             android:src="@drawable/more_setting" />  
255.   
256.         <TextView  
257.             android:id="@+id/text_pyq"  
258.             android:layout_width="wrap_content"  
259.             android:layout_height="wrap_content"  
260.             android:layout_centerVertical="true"  
261.             android:layout_marginLeft="20dp"  
262.             android:layout_toRightOf="@+id/imageView1"  
263.             android:text="设置"  
264.             android:textColor="#000" />  
265.   
266.         <ImageView  
267.             android:id="@+id/imageView2"  
268.             android:layout_width="wrap_content"  
269.             android:layout_height="wrap_content"  
270.             android:layout_alignParentRight="true"  
271.             android:layout_centerVertical="true"  
272.             android:layout_marginRight="10dp"  
273.             android:src="@drawable/pay_nofify_nav" />  
274.     </RelativeLayout>  
275.   
276. </RelativeLayout>  

效果图