android 封装好的BottomTabBar

柔情只为你懂 2024-02-17 15:55 9阅读 0赞

1 在android app开发过程中，会发现很多App的底部（顶部一样） 会仿效IPHONE的设计。。做一个导航。 如下图黑色部分：

![1342775534_5993.png][] ![1342776744_4514.png][]

（这个是实现效果） 这个是设计原型

1.1 要是中间部分没有那个拱起来的部分，那么可能设计还简单一些。。 仔细分析下设计原型，，，中间那个 摇摇 的图标要大一些，而且和其他图标没在一个水平线上。

1.2 总的思想就是 先封装一个 没有 凸起 的通用，自动适配的组建。。。然后。。。在上面 通过 FrameLayout 放置一个 突起的组建。。。

1.3 设计细节

1.3.1 自己写一个 BottomTabBar (extends) LinearLayout . 通过 Inflater 加载一个 自定义的 View (通过xml配置)， 在View 的xml 中，注意书写好适配就OK了。

注意 layout\_weight 的使用。（参见上一篇 listview）

自定义LinearLayout:

**\[java\]** [view plain][] [copy][view plain]

1.  **package** com.dp.android.widget; 
2.  
3.  **import** com.dp.android.elong.shake.R; 
4.  
5.  **import** android.content.Context; 
6.  **import** android.util.AttributeSet; 
7.  **import** android.view.LayoutInflater; 
8.  **import** android.view.View; 
9.  **import** android.widget.LinearLayout; 
10. 
11. **public****class** BottomTabBar **extends** LinearLayout \{ 
12. //--implements two kinds of constructions--
13. **public** BottomTabBar(Context context) \{ 
14. **super**(context); 
15. 
16.  init(context); 
17.  \} 
18. 
19. 
20. **public** BottomTabBar(Context context, AttributeSet attrs) \{ 
21. **super**(context, attrs); 
22. 
23.  init(context); 
24.  \} 
25. 
26. **private****void** init(Context context) \{ 
27.  LayoutParams lp = **new** LayoutParams(LayoutParams.FILL\_PARENT,LayoutParams.WRAP\_CONTENT); 
28.  setLayoutParams(lp); 
29. 
30.  LayoutInflater mInflater = LayoutInflater.from(context); 
31. 
32.  View v = mInflater.inflate(R.layout.bottom\_tabs, **null**); 
33. 
34.  addView(v,lp); 
35.  \} 
36. \}

自定义的View（xml 形式）

**\[java\]** [view plain][] [copy][view plain]

1.  <?xml version="1.0" encoding="utf-8"?> 
2.   <LinearLayout 
3.   xmlns:android="http://schemas.android.com/apk/res/android"
4.   android:layout\_width="fill\_parent"
5.   android:layout\_height="fill\_parent"
6.   > 
7.  
8.    
9.   <LinearLayout 
10.  android:id="@+id/ll\_bottom\_tabls\_search"
11.  style = "@style/bottom\_tabs\_ll"
12.  > 
13. 
14.  <ImageView 
15.  android:id="@+id/im\_search"
16.  style = "@style/bottom\_tabs\_image"
17.  android:src="@drawable/bottom\_tab\_search" /> 
18. 
19. 
20.  <TextView 
21.  style = "@style/bottom\_tabs\_tv"
22.  android:text="@string/bottom\_tab\_search"
23.  /> 
24. 
25.  </LinearLayout> 
26. 
27.   
28.  <LinearLayout 
29.  android:id="@+id/ll\_bottom\_tabls\_history"
30.  style = "@style/bottom\_tabs\_ll"
31.  > 
32. 
33.  <ImageView 
34.  android:id="@+id/im\_history"
35.  style = "@style/bottom\_tabs\_image"
36.  android:src="@drawable/bottom\_tab\_history" /> 
37. 
38.  <TextView 
39.  style = "@style/bottom\_tabs\_tv"
40.  android:text="@string/bootom\_tab\_shake"
41.  /> 
42. 
43.  </LinearLayout> 
44. 
45.   
46.  <LinearLayout 
47.  android:id="@+id/ll\_bottom\_tabls\_change"
48.  style = "@style/bottom\_tabs\_ll"
49.  > 
50.  <ImageView 
51.  android:id="@+id/im\_change"
52.  style = "@style/bottom\_tabs\_image"
53.  android:src="@drawable/bottom\_tab\_blank"
54.  /> 
55. 
56.  <TextView 
57.  style = "@style/bottom\_tabs\_tv"
58.  android:text="@string/bottom\_tab\_change"
59.  /> 
60.  </LinearLayout> 
61. 
62.   
63.  <LinearLayout 
64.  android:id="@+id/ll\_bottom\_tabls\_collection"
65.  style = "@style/bottom\_tabs\_ll"
66.  > 
67. 
68.  <ImageView 
69.  android:id="@+id/im\_collection"
70.  style = "@style/bottom\_tabs\_image"
71.  android:src="@drawable/bottom\_tab\_collection"
72.  /> 
73. 
74.  <TextView 
75.  style = "@style/bottom\_tabs\_tv"
76.  android:text="@string/bootom\_tab\_collection"
77.  /> 
78.  </LinearLayout> 
79. 
80.   
81.  <LinearLayout 
82.  android:id="@+id/ll\_bottom\_tabls\_more"
83.  style = "@style/bottom\_tabs\_ll"
84.  > 
85. 
86.  <ImageView 
87.  android:id="@+id/im\_more"
88.  style = "@style/bottom\_tabs\_image"
89.  android:src="@drawable/bottom\_tab\_more"
90.  /> 
91. 
92.  <TextView 
93.  style = "@style/bottom\_tabs\_tv"
94.  android:text="@string/bootom\_tab\_more"
95.  /> 
96.  </LinearLayout> 
97. 
98.  </LinearLayout>

view 中用到的 三个 style

**\[java\]** [view plain][] [copy][view plain]

1.  <style name="bottom\_tabs\_ll" > 
2.   <item name="android:layout\_width">wrap\_content</item> 
3.   <item name="android:layout\_height">wrap\_content</item> 
4.   <item name="android:background">@color/black</item> 
5.   <item name="android:orientation">vertical</item> 
6.   <item name="android:gravity">center</item> 
7.   <item name="android:layout\_gravity">bottom</item> 
8.   <item name="android:layout\_weight">1</item> 
9.  </style> 
10. 
11. <style name="bottom\_tabs\_image" > 
12.  <item name="android:layout\_width">fill\_parent</item> 
13.  <item name="android:layout\_height">wrap\_content</item> 
14.  <item name="android:paddingTop">5dip</item> 
15. </style> 
16. 
17. <style name="bottom\_tabs\_tv" > 
18.  <item name="android:layout\_width">fill\_parent</item> 
19.  <item name="android:layout\_height">wrap\_content</item> 
20.  <item name="android:textSize">12sp</item> 
21.  <item name="android:textColor">@color/common\_white</item> 
22.  <item name="android:paddingTop">3dip</item> 
23.  <item name="android:gravity">center</item> 
24. </style>

//---------------------------------------------------------------下面是如何使用自己定义的 组建了-------------------------------------

1: 注意 BottomTabBar ，，， 这里面还用到了自定义的 “凸起” 组件。 MyBottmArc

//--------------------------------------------------------------------------------------下面看看 凸起 是怎么弄的---------------------------------------------------------------------------------

凸起 也是自己定义了一个 ImageView, 这个ImageView 的背景 就是绘制半个 圆弧。。。“拱形”

**\[java\]** [view plain][] [copy][view plain]

1.  **package** com.dp.android.widget; 
2.  
3.  **import** android.content.Context; 
4.  **import** android.graphics.Canvas; 
5.  **import** android.graphics.Paint; 
6.  **import** android.graphics.Rect; 
7.  **import** android.graphics.RectF; 
8.  **import** android.util.AttributeSet; 
9.  **import** android.widget.ImageView; 
10. 
11. **public****class** MyBottmArc **extends** ImageView \{ 
12. 
13. **private****static** Paint paint = **new** Paint(); 
14. 
15. **public** MyBottmArc(Context context) \{ 
16. **super**(context); 
17.  \} 
18. 
19. **public** MyBottmArc(Context context, AttributeSet attrs) \{ 
20. **super**(context, attrs); 
21.  \} 
22. 
23. **public** MyBottmArc(Context context, AttributeSet attrs, **int** defStyle) \{ 
24. **super**(context, attrs, defStyle); 
25.  \} 
26. 
27. **protected****void** onDraw(Canvas canvas) \{ 
28.  Rect m\_rect = canvas.getClipBounds(); 
29.  canvas.save(); 
30. 
31.  paint.setColor(0xff000000); 
32. 
33. **float** m\_left = m\_rect.left; 
34. **float** m\_top = m\_rect.top; 
35. **float** m\_right = m\_rect.right; 
36. **float** m\_bottom = (1.2f)\*(m\_rect.bottom); 
37. 
38.  RectF m\_rectf = **new** RectF(m\_left,m\_top,m\_right,m\_bottom); 
39.  canvas.drawOval(m\_rectf, paint); 
40. 
41.  canvas.restore(); 
42. 
43. **super**.onDraw(canvas); 
44.  \} 
45. \}

[1342775534_5993.png]: https://img-my.csdn.net/uploads/201207/20/1342775534_5993.png
[1342776744_4514.png]: https://img-my.csdn.net/uploads/201207/20/1342776744_4514.png
[view plain]: http://blog.csdn.net/greenbird811/article/details/7768247#