android 自定义控件（底部icon点击效果）

此片文章算是笔者之前写的一篇自定义控件的扩展，此片文章觉得吃力的可以先看前一篇，原文地址：

android 自定义view的使用（最佳demo——返回标题栏）

另外，笔者此篇中的功能一般会搭配fragment一起使用，笔者介绍fragment的地址如下：

android viewpager+fragment做主界面(超容易理解的demo！)

效果：（源码在文章结尾）

主要实现的功能：

1、在java代码中动态设置底部控件的icon和text。（搭配fragment的时候特别方便）

2、text点击时会加粗

3、封装成自定义控件，更加方便。

(考虑到新手可能不易理解，笔者代码没有多加功能)

把底部icon做成自定义控件的优势：

1、搭配fragment或者viewpager使用的时候更加方便，避免写过多重复性代码。

2、代码维护起来更加方便，比如要修改底部icon中的字体，直接在自定义控件的layout中修改就可以。

3、提高代码的可阅读性。

代码截图：

MainActivity:

[java] view plain

1. package com.example.double2.mybottomlayout;  

2.   

3. import android.app.Activity;  

4. import android.os.Bundle;  

5. import android.view.View;  

6.   

7. public class MainActivity extends Activity implements View.OnClickListener {  

8.   

9.     BottomLayout blSituation;  

10.     BottomLayout blMap;  

11.     BottomLayout blDiscover;  

12.     BottomLayout blMyData;  

13.   

14.     @Override  

15.     protected void onCreate(Bundle savedInstanceState) {  

16.         super.onCreate(savedInstanceState);  

17.         setContentView(R.layout.act_main);  

18.   

19.         //初始化控件  

20.         initView();  

21.     }  

22.   

23.     private void initView() {  

24.         initBottomLayout();  

25.   

26.     }  

27.   

28.     private void initBottomLayout() {  

29.         blSituation = (BottomLayout) findViewById(R.id.bottom_icon_situation);  

30.         blMap = (BottomLayout) findViewById(R.id.bottom_icon_map);  

31.         blDiscover = (BottomLayout) findViewById(R.id.bottom_icon_discover);  

32.         blMyData = (BottomLayout) findViewById(R.id.bottom_icon_my_data);  

33.   

34.         blSituation.setNormalIcon(R.drawable.bottom_icon_situation_normal);  

35.         blSituation.setFocusIcon(R.drawable.bottom_icon_situation_focus);  

36.         blSituation.setIconText("Situation");  

37.         blSituation.setFocused(true);  

38.         blSituation.setOnClickListener(this);  

39.   

40.         blMap.setNormalIcon(R.drawable.bottom_icon_map_normal);  

41.         blMap.setFocusIcon(R.drawable.bottom_icon_map_focus);  

42.         blMap.setIconText("Map");  

43.         blMap.setFocused(false);  

44.         blMap.setOnClickListener(this);  

45.   

46.         blDiscover.setNormalIcon(R.drawable.bottom_icon_discover_normal);  

47.         blDiscover.setFocusIcon(R.drawable.bottom_icon_discover_focus);  

48.         blDiscover.setIconText("Discover");  

49.         blDiscover.setFocused(false);  

50.         blDiscover.setOnClickListener(this);  

51.   

52.         blMyData.setNormalIcon(R.drawable.bottom_icon_my_data_normal);  

53.         blMyData.setFocusIcon(R.drawable.bottom_icon_my_data_focus);  

54.         blMyData.setIconText("MyData");  

55.         blMyData.setFocused(false);  

56.         blMyData.setOnClickListener(this);  

57.     }  

58.   

59.     @Override  

60.     public void onClick(View v) {  

61.         switch (v.getId()) {  

62.             case R.id.bottom_icon_situation:  

63.                 blSituation.setFocused(true);  

64.                 blMap.setFocused(false);  

65.                 blDiscover.setFocused(false);  

66.                 blMyData.setFocused(false);  

67.                 break;  

68.             case R.id.bottom_icon_map:  

69.                 blSituation.setFocused(false);  

70.                 blMap.setFocused(true);  

71.                 blDiscover.setFocused(false);  

72.                 blMyData.setFocused(false);  

73.                 break;  

74.             case R.id.bottom_icon_discover:  

75.                 blSituation.setFocused(false);  

76.                 blMap.setFocused(false);  

77.                 blDiscover.setFocused(true);  

78.                 blMyData.setFocused(false);  

79.                 break;  

80.             case R.id.bottom_icon_my_data:  

81.                 blSituation.setFocused(false);  

82.                 blMap.setFocused(false);  

83.                 blDiscover.setFocused(false);  

84.                 blMyData.setFocused(true);  

85.                 break;  

86.         }  

87.     }  

88. }  

BottomLayout:

[java] view plain

1. package com.example.double2.mybottomlayout;  

2.   

3. import android.content.Context;  

4. import android.graphics.Typeface;  

5. import android.util.AttributeSet;  

6. import android.view.LayoutInflater;  

7. import android.widget.ImageView;  

8. import android.widget.LinearLayout;  

9. import android.widget.TextView;  

10.   

11. /** 

12.  * Created by Double2号 on 2016/4/8. 

13.  */  

14. public class BottomLayout extends LinearLayout {  

15.   

16.     private int normalIcon;  

17.     private int focusIcon;  

18.     private boolean isFocused=false;  

19.     private ImageView ivIcon;  

20.     private TextView tvText;  

21.   

22.     public BottomLayout(Context context, AttributeSet attrs) {  

23.         super(context, attrs);  

24.         //加载布局文件，与setContentView()效果一样  

25.         LayoutInflater.from(context).inflate(R.layout.act_main_bottom_layout, this);  

26.         ivIcon = (ImageView) findViewById(R.id.iv_main_bottom_icon);  

27.         tvText = (TextView) findViewById(R.id.tv_main_bottom_text);  

28.     }  

29.   

30.     public void setNormalIcon(int normalIcon) {  

31.         this.normalIcon = normalIcon;  

32.         ivIcon.setImageResource(normalIcon);  

33.     }  

34.   

35.     public void setFocusIcon(int focusIcon) {  

36.         this.focusIcon = focusIcon;  

37.     }  

38.   

39.     public void setIconText(String text) {  

40.         tvText.setText(text);  

41.     }  

42.   

43.     public void setFocused(boolean isFocused) {  

44.         //如果已经处在设置的状态中，就不进行操作  

45.         if (this.isFocused != isFocused) {  

46.             this.isFocused = isFocused;  

47.             if (isFocused) {  

48.                 //设置获得焦点后的图片  

49.                 //文字加粗  

50.                 ivIcon.setImageResource(focusIcon);  

51.                 tvText.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));  

52.             } else {  

53.                 //设置获得普通状态的图片  

54.                 //文字不加粗  

55.                 ivIcon.setImageResource(normalIcon);  

56.                 tvText.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));  

57.             }  

58.         }  

59.     }  

60.   

61. }  

act_main:

[html] view plain

1. <?xml version="1.0" encoding="utf-8"?>  

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

3.     android:layout_width="match_parent"  

4.     android:layout_height="match_parent"  

5.     android:orientation="vertical">  

6.   

7.     <LinearLayout  

8.         android:layout_width="wrap_content"  

9.         android:layout_height="0dp"  

10.         android:layout_weight="9" />  

11.   

12.     <LinearLayout  

13.         android:layout_width="match_parent"  

14.         android:layout_height="0dp"  

15.         android:layout_weight="1"  

16.         android:orientation="horizontal">  

17.   

18.         <com.example.double2.mybottomlayout.BottomLayout  

19.             android:id="@+id/bottom_icon_situation"  

20.             android:layout_width="0dp"  

21.             android:layout_height="match_parent"  

22.             android:layout_weight="1"></com.example.double2.mybottomlayout.BottomLayout>  

23.   

24.   

25.         <com.example.double2.mybottomlayout.BottomLayout  

26.             android:id="@+id/bottom_icon_map"  

27.             android:layout_width="0dp"  

28.             android:layout_height="match_parent"  

29.             android:layout_weight="1">  

30.   

31.         </com.example.double2.mybottomlayout.BottomLayout>>  

32.   

33.         <com.example.double2.mybottomlayout.BottomLayout  

34.             android:id="@+id/bottom_icon_discover"  

35.             android:layout_width="0dp"  

36.             android:layout_height="match_parent"  

37.             android:layout_weight="1">  

38.   

39.         </com.example.double2.mybottomlayout.BottomLayout>>  

40.   

41.         <com.example.double2.mybottomlayout.BottomLayout  

42.             android:id="@+id/bottom_icon_my_data"  

43.             android:layout_width="0dp"  

44.             android:layout_height="match_parent"  

45.             android:layout_weight="1">  

46.   

47.         </com.example.double2.mybottomlayout.BottomLayout>  

48.     </LinearLayout>  

49.   

50. </LinearLayout>  

act_main_bottom_layout:

[html] view plain

1. <?xml version="1.0" encoding="utf-8"?>  

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

3.     xmlns:tools="http://schemas.android.com/tools"  

4.     android:layout_width="match_parent"  

5.     android:layout_height="match_parent"  

6.     android:orientation="vertical"  

7.     android:gravity="center_horizontal"  

8.     android:padding="5dp"  

9.     android:background="#eae17b">  

10.   

11.     <ImageView  

12.         android:id="@+id/iv_main_bottom_icon"  

13.         android:layout_width="wrap_content"  

14.         android:layout_height="0dp"  

15.         android:layout_weight="1"  

16.         tools:src="@mipmap/ic_launcher"/>  

17.     <TextView  

18.         android:id="@+id/tv_main_bottom_text"  

19.         android:layout_width="wrap_content"  

20.         android:layout_height="wrap_content"  

21.         android:textColor="@android:color/holo_blue_dark"  

22.         android:textSize="10sp"  

23.         tools:text="icon"/>  

24. </LinearLayout>  

源码地址：http://download.csdn.net/detail/double2hao/9484652