Android 自定义组合控件 简单导航栏

最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件.
先上图:

导航栏包括:

• 返回按钮
• 标题
• 右侧按钮(功能不确定)

首先是布局文件,如下:

1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout 
3	xmlns:android="http://schemas.android.com/apk/res/android"
4	android:id="@+id/rl_chat_title"
5	android:layout_width="match_parent"
6	android:layout_height="50dp"
7	android:background="@drawable/land_navigation"
8	android:layout_alignParentTop="true">
9    <ImageView 
10	    android:id="@+id/iv_nav_back"
11	    android:layout_width="50dp"
12	    android:layout_height="50dp"
13	    android:padding="13dp"
14	    android:layout_alignParentLeft="true"
15	    android:layout_centerVertical="true"
16	    android:src="@drawable/icon_back"/>
17		
18  	<TextView 
19    	android:id="@+id/tv_nav_title"
20     	android:layout_width="wrap_content"
21	  	android:layout_height="wrap_content"
22	  	android:gravity="center_vertical"
23	  	android:layout_centerHorizontal="true"
24	  	android:layout_centerVertical="true"
25	  	android:text="@string/app_name"/>
26      	
27  	<ImageView 
28	  	android:id="@+id/iv_nav_right"
29	  	android:layout_width="50dp"
30	  	android:layout_height="50dp"
31	  	android:padding="13dp"
32	  	android:layout_alignParentRight="true"
33	  	android:layout_centerVertical="true"
34	  	android:src="@drawable/icon_setting1"/>
35</RelativeLayout>

布局包含两个ImageView和一个TextView.

然后自定义类NavigationView继承RelativeLayout并实现OnClickListener接口.

1/**
2 * 导航栏组件,目前包括返回键,标题,右侧按钮.其中:
3 * </br>返回键已经实现按键监听
4 * </br>右侧按钮已实现按键监听
5 * </br>标题默认不可点击
6 * @author Asia
7 *
8 */
9public class NavigationView extends RelativeLayout implements OnClickListener{
10    
11    public NavigationView(Context context){
12        this(context, null);
13    }
14    
15    private ImageView backView;
16    private TextView titleView;
17    private ImageView rightView;
18    public NavigationView(Context context, AttributeSet attrs) {
19        super(context, attrs);
20        View view = LayoutInflater.from(context).inflate(R.layout.navigation_view, this, true);
21        backView = (ImageView) view.findViewById(R.id.iv_nav_back);
22        backView.setOnClickListener(this);
23        titleView = (TextView) view.findViewById(R.id.tv_nav_title);
24        rightView = (ImageView) view.findViewById(R.id.iv_nav_right);
25        rightView.setOnClickListener(this);
26    }
27    
28    /**
29     * 获取返回按钮
30     * @return
31     */
32    public ImageView getBackView() {
33        return backView;
34    }
35    
36    /**
37     * 获取标题控件
38     * @return
39     */
40    public TextView getTitleView() {
41        return titleView;
42    }
43    
44    /**
45     * 设置标题
46     * @param title
47     */
48    public void setTitle(String title){
49        titleView.setText(title);
50    }
51    
52    /**
53     * 获取右侧按钮,默认不显示
54     * @return
55     */
56    public ImageView getRightView() {
57        return rightView;
58    }
59    
60    private ClickCallback callback;
61    /**
62     * 设置按钮点击回调接口
63     * @param callback
64     */
65    public void setClickCallback(ClickCallback callback) {
66        this.callback = callback;
67    }
68    
69    /**
70     * 导航栏点击回调接口
71     * </br>如若需要标题可点击,可再添加
72     * @author Asia
73     *
74     */
75    public static interface ClickCallback{
76        /**
77         * 点击返回按钮回调
78         */
79        void onBackClick();
80        
81        void onRightClick();
82    }
83
84    @Override
85    public void onClick(View v) {
86        int id = v.getId();
87        if (id == R.id.iv_nav_back) {
88            callback.onBackClick();
89            return;
90        }
91        if (id == R.id.iv_nav_right) {
92            callback.onRightClick();
93            return;
94        }
95    }
96}

NavigationView中包含一个回调接口,在使用时设置一个此接口即可.

1/**
2 * 导航栏点击回调接口
3 * </br>如若需要标题可点击,可再添加
4 * @author Asia
5 *
6 */
7public static interface ClickCallback{
8    /**
9     * 点击返回按钮回调
10     */
11    void onBackClick();
12    
13    void onRightClick();
14}

如何使用呢?下面实际使用的过程.

主界面布局

1<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2    xmlns:tools="http://schemas.android.com/tools"
3    android:layout_width="match_parent"
4    android:layout_height="match_parent"
5    android:orientation="vertical">
6       
7    <com.asi.customview.view.NavigationView 
8        android:id="@+id/nav_main"
9        android:layout_width="match_parent"
10        android:layout_height="wrap_content"/>
11
12    <TextView
13        android:layout_width="wrap_content"
14        android:layout_height="wrap_content"
15        android:text="@string/hello_world" />
16</LinearLayout>

主界面Java代码

1public class MainActivity extends Activity {
2
3    @Override
4    protected void onCreate(Bundle savedInstanceState) {
5        super.onCreate(savedInstanceState);
6        requestWindowFeature(Window.FEATURE_NO_TITLE);
7        setContentView(R.layout.activity_main);
8        initView();
9    }
10
11    private NavigationView navigationView;
12    private void initView() {
13        navigationView = (NavigationView) super.findViewById(R.id.nav_main);
14        navigationView.setTitle("Title");
15        navigationView.setClickCallback(new ClickCallback() {
16            
17            @Override
18            public void onRightClick() {
19                DLog.d("点击了右侧按钮!");
20                ToastUtil.showShort(MainActivity.this, "点击了右侧按钮!");
21            }
22            
23            @Override
24            public void onBackClick() {
25                DLog.d("点击了返回按钮!");
26                ToastUtil.showShort(MainActivity.this, "点击了返回按钮!");
27                finish();
28            }
29        });
30    }
31}