标签：
| 一、问题概述 |
通过之前的应用练习其实我们已经对自定义控件有了一定的掌握(查看自定义控件系列其余文章：基础篇、应用篇之圆形进度条），但还是要不断做一些应用锻炼思维和熟练度，接下来我们再运用自定义控件编写一个新闻列表的标题栏，该标题栏控件有三种样式，效果如图所示：
样式1：
样式2：
样式3：
并且标题文字、左右图标可自由变换。实现步骤如下：
| 二、实现步骤 |
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(); } }
<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>
通过 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>
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(); } }; }
<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/p/4401962.html
