自定义控件系列之应用篇——自定义标题栏控件

一、问题概述

　　通过之前的应用练习其实我们已经对自定义控件有了一定的掌握(查看自定义控件系列其余文章：基础篇、应用篇之圆形进度条），但还是要不断做一些应用锻炼思维和熟练度，接下来我们再运用自定义控件编写一个新闻列表的标题栏，该标题栏控件有三种样式，效果如图所示：

　　样式1：

 

　　样式2：

 

　　样式3：

 

　　并且标题文字、左右图标可自由变换。实现步骤如下：

二、实现步骤

1、编写自定义组件HeaderView扩展LinearLayout

public class HeaderView extends LinearLayout {

private LayoutInflater mInflater;

    private View mHeader;

    private LinearLayout mLayoutLeftContainer;//HeaderView控件左侧容器

    private LinearLayout mLayoutRightContainer;//HeaderView控件右侧容器

    private TextView mTitle;//标题

    private LinearLayout mLayoutRightImageButtonLayout;//右侧按钮布局

    private ImageButton mRightImageButton;//右侧按钮

//右侧按钮监听接口

    private onRightImageButtonClickListener mRightImageButtonClickListener;

//左侧按钮布局

    private LinearLayout mLayoutLeftImageButtonLayout;

//左侧按钮

    private ImageButton mLeftImageButton;

//左侧按钮监听接口

    private onLeftImageButtonClickListener mLeftImageButtonClickListener;

    public enum HeaderStyle {// 头部整体样式

        DEFAULT_TITLE,TITLE_LIFT_IMAGEBUTTON,TITLE_RIGHT_IMAGEBUTTON, TITLE_DOUBLE_IMAGEBUTTON;

    }

    public HeaderLayout(Context context) {

        super(context);

        init(context);

    }



    public HeaderLayout(Context context, AttributeSet attrs) {

        super(context, attrs);

        init(context);

    }

//实现初始化，加载布局文件

    public void init(Context context) {

        mInflater = LayoutInflater.from(context);

        mHeader = mInflater.inflate(R.layout.common_headerbar, null);

        addView(mHeader);

        initViews();

    }

//初始化控件

public void initViews(){

mLayoutLeftContainer 

= (LinearLayout) findViewByHeaderId(R.id.header_layout_leftview_container);

mLayoutRightContainer

=(LinearLayout)findViewByHeaderId(R.id.header_layout_rightview_container);

mHtvSubTitle = (TextView) findViewByHeaderId(R.id.header_htv_subtitle);

    }

public View findViewByHeaderId(int id) {

        return mHeader.findViewById(id);    }

            //设置控件样式

public void initStyle(HeaderStyle hStyle) {

        switch (hStyle) {

        case DEFAULT_TITLE:

            defaultTitle();

            break;

        case TITLE_LIFT_IMAGEBUTTON:

            defaultTitle();

            titleLeftImageButton();

            break;



        case TITLE_RIGHT_IMAGEBUTTON:

            defaultTitle();

            titleRightImageButton();

            break;



        case TITLE_DOUBLE_IMAGEBUTTON:

            defaultTitle();

            titleLeftImageButton();

            titleRightImageButton();

            break;

        }

    }



    // 默认文字标题

    private void defaultTitle() {

        mLayoutLeftContainer.removeAllViews();

        mLayoutRightContainer.removeAllViews();

    }



    // 左侧自定义按钮

         private void titleLeftImageButton() {

            View mleftImageButtonView=

                    mInflater.inflate(R.layout.include_header_imagebutton, null);

mLayoutLeftContainer.addView(mleftImageButtonView);

mLayoutLeftImageButtonLayout =

(LinearLayout)mleftImageButtonView.findViewById(R.id.header_layout_imagebuttonlayout);

mLeftImageButton =

(ImageButton)mleftImageButtonView.findViewById(R.id.header_ib_imagebutton);

mLayoutLeftImageButtonLayout.setOnClickListener(new OnClickListener() {

            @Override

    public void onClick(View arg0) {

        if (mLeftImageButtonClickListener != null) {

        //回调方法，调用onLeftImageButtonClickListener接口实现类的方法

                mLeftImageButtonClickListener.onClick();

            }

        }

    });

}



    // 右侧自定义按钮

private void titleRightImageButton() {

View mRightImageButtonView

 = mInflater.inflate(R.layout.include_header_imagebutton, null);

mLayoutRightContainer.addView(mRightImageButtonView);

mLayoutRightImageButtonLayout =

 (LinearLayout)mRightImageButtonView.findViewById(R.id.header_layout_imagebuttonlayout);

             mRightImageButton =

 (ImageButton)mRightImageButtonView.findViewById(R.id.header_ib_imagebutton);

mLayoutRightImageButtonLayout.setOnClickListener(new OnClickListener() {

            @Override

public void onClick(View arg0) {

                if (mRightImageButtonClickListener != null) {

//回调方法，调用onRightImageButtonClickListener接口实现类的方法



                    mRightImageButtonClickListener.onClick();

                }

}

    });



    }

    

    public void setDefaultTitle(CharSequence title) {

        if (title != null) {

            mHtvSubTitle.setText(title);

        } else {

            mHtvSubTitle.setVisibility(View.GONE);

        }

    }

//重要目的是设置右侧按钮侦听接的实现类，还包括了标题文本、按钮图片

    public void setTitleAndRightImageButton(CharSequence title, int id,

            onRightImageButtonClickListener onRightImageButtonClickListener) {

        setDefaultTitle(title);

        if (mRightImageButton != null && id > 0) {

            mRightImageButton.setImageResource(id);

        setOnRightImageButtonClickListener(onRightImageButtonClickListener);

        }

    }

//重要目的是左侧按钮设置侦听接的实现类还包，括了标题文本、按钮图片

    public void setTitleAndLeftImageButton(CharSequence title, int id,

            onLeftImageButtonClickListener listener) {

        setDefaultTitle(title);

        if (mLeftImageButton != null && id > 0) {

            mLeftImageButton.setImageResource(id);

            setOnLeftImageButtonClickListener(listener);

        }

    }

    

    public void setOnRightImageButtonClickListener(

            onRightImageButtonClickListener listener) {

        mRightImageButtonClickListener = listener;

    }

    //设置右侧按钮监听接口

    public interface onRightImageButtonClickListener {

        void onClick();

    }

    

    public void setOnLeftImageButtonClickListener(

            onLeftImageButtonClickListener  listener) {

        mLeftImageButtonClickListener = listener;

    }

    //设置左侧按钮监听接口

    public interface onLeftImageButtonClickListener {

        void onClick();

    }

}

2、HeaderView控件布局文件 

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

    android:layout_width="match_parent"

    android:layout_height="54dip"

    android:background="#ff0000"

    android:baselineAligned="false"

    android:focusable="true"

    android:gravity="center_vertical"

    android:orientation="horizontal" >

    <LinearLayout

        android:id="@+id/header_layout_leftview_container"

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:layout_alignParentLeft="true"

        android:gravity="center_vertical|left"

        android:orientation="horizontal" >

    </LinearLayout>

    <LinearLayout

        android:id="@+id/header_layout_middleview_container"

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:gravity="center"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:orientation="horizontal" >



        <TextView

            android:id="@+id/header_htv_subtitle"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/app_name"

            android:textColor="#FCFCFC"

            android:textSize="22sp" />

    </LinearLayout>



    <LinearLayout

        android:id="@+id/header_layout_rightview_container"

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:layout_alignParentRight="true"

        android:gravity="center_vertical|right"

        android:orientation="horizontal" >

    </LinearLayout>



</RelativeLayout>

3、include_head_imagebutton.xml，左右按钮的布局文件

 　　通过 LayoutInflater的inflate方法，如：View  mRightImageButtonView =mInflater.inflate(R.layout.include_header_imagebutton, null)获得布局

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

    android:id="@+id/header_layout_imagebuttonlayout"

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:background="@drawable/bg_header_defaul"

    android:clickable="true"

    android:focusable="true"

    android:gravity="center"

    android:minWidth="54dip"

    android:padding="6dip" >

    <ImageButton

        android:id="@+id/header_ib_imagebutton"

        android:layout_width="35dip"

        android:layout_height="35dip"

        android:background="#00000000"

        android:clickable="false"

        android:focusable="false"

        android:contentDescription="@string/app_name"

        android:scaleType="centerInside" />

</LinearLayout>

4、编写MainActivity测试自定义组件

public class MainActivity extends Activity  {

    private HeaderView  mHeaderView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initViews();

    }

    protected void initViews(){

        mHeaderView = (HeaderView )findViewById(R.id.otherfeedlist_header);

        mHeaderView.initStyle(HeaderStyle.TITLE_DOUBLE_IMAGEBUTTON);

//设置左侧按钮，参数依次为标题文本、图片、左侧按钮侦听类

mHeaderView.setTitleAndLeftImageButton("新闻头条", 

R.drawable.comm_new_home_index_user_normal, leftButtonClickListener);

//设置右侧按钮，参数依次为标题文本、图片、右侧按钮侦听类

        mHeaderView.setTitleAndRightImageButton("新闻头条", 

R.drawable.comm_new_home_index_home_normal, rightButtonClickListener);

}

//实现HeadView组件的左侧按钮侦听接口

private onLeftImageButtonClickListener leftButtonClickListener=

new onLeftImageButtonClickListener() {        

        public void onClick() {

            Toast.makeText(getApplicationContext(), "您点击了左侧按钮！", 

Toast.LENGTH_SHORT).show();

        }

    };

//实现HeadView组件的右侧右侧侦听接口

    private onRightImageButtonClickListener rightButtonClickListener=

new onRightImageButtonClickListener() {

        public void onClick() {

            Toast.makeText(getApplicationContext(), "您点击了右侧按钮！", 

Toast.LENGTH_SHORT).show();

        }

    };

}

5、MainActivity布局文件

<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.jereh.view.HeaderLayout

     android:id="@+id/otherfeedlist_header"

    android:layout_width="fill_parent"

    android:layout_height="54dip" >

</com.jereh.view.HeaderLayout>

</LinearLayout>

 

作者： 杰瑞教育
出处： http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。