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

来源：互联网发布：央视可视化呀数据编辑：程序博客网时间：2024/05/21 10:05

一、问题概述

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

　　样式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 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://blog.csdn.net/jerehedu
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

0 0