你的位置:首页 > 操作系统

[操作系统]自定义控件系列之应用篇——自定义标题栏控件


一、问题概述

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

  样式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() {      @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>

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 ="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>