通过之前的应用练习其实我们已经对自定义控件有了一定的掌握(查看自定义控件系列其余文章：基础篇、应用篇之圆形进度条），但还是要不断做一些应用锻炼思维和熟练度，接下来我们再运用自定义控件编写一个新闻列表的标题栏，该标题栏控件有三种样式，效果如图所示：
样式1：
images/loading.gif' data-original="http://images.cnitblog.com/blog2015/708076/201504/081131412745425.png" />
样式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() { @Overridepublic 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 ="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.
通过 LayoutInflater的inflate方法，如：View mRightImageButtonView =mInflater.inflate(R.layout.include_header_imagebutton, null)获得布局
<LinearLayout ="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>
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 ="http://schemas.android.com/apk/res/android" ="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>
原标题：自定义控件系列之应用篇——自定义标题栏控件
关键词：
我知道了 