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

该博客已经停止更新,新博客点击此处:DevWiki的博客

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

先上图:



导航栏包括:

* 返回按钮

* 标题

* 右侧按钮(功能不确定)

首先是布局文件,如下:

[code]<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_chat_title"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/land_navigation"
    android:layout_alignParentTop="true">
    <ImageView 
        android:id="@+id/iv_nav_back"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="13dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/icon_back"/>
    <TextView 
        android:id="@+id/tv_nav_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/app_name"/>
    <ImageView 
        android:id="@+id/iv_nav_right"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="13dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/icon_setting1"/>
</RelativeLayout>

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

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

[code]/**
 * 导航栏组件,目前包括返回键,标题,右侧按钮.其中:
 * </br>返回键已经实现按键监听
 * </br>右侧按钮已实现按键监听
 * </br>标题默认不可点击
 * @author Asia
 *
 */
public class NavigationView extends RelativeLayout implements OnClickListener{

    public NavigationView(Context context){
        this(context, null);
    }

    private ImageView backView;
    private TextView titleView;
    private ImageView rightView;
    public NavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.navigation_view, this, true);
        backView = (ImageView) view.findViewById(R.id.iv_nav_back);
        backView.setOnClickListener(this);
        titleView = (TextView) view.findViewById(R.id.tv_nav_title);
        rightView = (ImageView) view.findViewById(R.id.iv_nav_right);
        rightView.setOnClickListener(this);
    }

    /**
     * 获取返回按钮
     * @return
     */
    public ImageView getBackView() {
        return backView;
    }

    /**
     * 获取标题控件
     * @return
     */
    public TextView getTitleView() {
        return titleView;
    }

    /**
     * 设置标题
     * @param title
     */
    public void setTitle(String title){
        titleView.setText(title);
    }

    /**
     * 获取右侧按钮,默认不显示
     * @return
     */
    public ImageView getRightView() {
        return rightView;
    }

    private ClickCallback callback;
    /**
     * 设置按钮点击回调接口
     * @param callback
     */
    public void setClickCallback(ClickCallback callback) {
        this.callback = callback;
    }

    /**
     * 导航栏点击回调接口
     * </br>如若需要标题可点击,可再添加
     * @author Asia
     *
     */
    public static interface ClickCallback{
        /**
         * 点击返回按钮回调
         */
        void onBackClick();

        void onRightClick();
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (id == R.id.iv_nav_back) {
            callback.onBackClick();
            return;
        }
        if (id == R.id.iv_nav_right) {
            callback.onRightClick();
            return;
        }
    }
}

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

[code]/**
 * 导航栏点击回调接口
 * </br>如若需要标题可点击,可再添加
 * @author Asia
 *
 */
public static interface ClickCallback{
    /**
     * 点击返回按钮回调
     */
    void onBackClick();

    void onRightClick();
}

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

主界面布局

[code]<LinearLayout 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:orientation="vertical">

    <com.asi.customview.view.NavigationView 
        android:id="@+id/nav_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
</LinearLayout>

主界面Java代码

[code]public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }

    private NavigationView navigationView;
    private void initView() {
        navigationView = (NavigationView) super.findViewById(R.id.nav_main);
        navigationView.setTitle("Title");
        navigationView.setClickCallback(new ClickCallback() {

            @Override
            public void onRightClick() {
                DLog.d("点击了右侧按钮!");
                ToastUtil.showShort(MainActivity.this, "点击了右侧按钮!");
            }

            @Override
            public void onBackClick() {
                DLog.d("点击了返回按钮!");
                ToastUtil.showShort(MainActivity.this, "点击了返回按钮!");
                finish();
            }
        });
    }
}

注:主界面中的Dlog类为Android的Log打印输出类,参见此处:Android的Log包装

这样就完成了简单的自定义导航栏.完成的项目代码在我的GitHub中的

自定义组件.此项目后期会不定期更新.