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

一、问题概述

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

　　样式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>
时间： 2024-10-09 18:59:12

自定义控件系列之应用篇——自定义标题栏控件的相关文章

Android自定义控件之自定义组合控件（三）

前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发成本,以及维护成本. 使用自定义组合控件的好处? 我们在项目开发中经常会遇见很多相似或者相同的布局,比如APP的标题栏,我们从三种方式实现标题栏来对比自定义组件带来的好处,毕竟好的东西还是以提高开发效率,降低开发成本为导向的. 1.)第一种方式:直接在每个xml布局中写相同的标题栏布局代码 <?xm

Android自定义控件系列之应用篇——圆形进度条

一.概述 在上一篇博文中,我们给大家介绍了Android自定义控件系列的基础篇.链接:http://www.cnblogs.com/jerehedu/p/4360066.html 这一篇博文中,我们将在基础篇的基础上,再通过重写ondraw()方法和自定义属性实现圆形进度条,效果如图所示: 二.实现步骤   1.  编写自定义组件MyCircleProgress扩展View public class MyCircleProgress extends View { - } 2.  在MyCircl

android开源系列：CircleImageView自定义圆形控件的使用

1.自定义圆形控件github地址:https://github.com/hdodenhof/CircleImageView 主要的类: package de.hdodenhof.circleimageview; import edu.njupt.zhb.main.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import andr

Android自定义控件——自定义组合控件

转载请注明出处http://blog.csdn.net/allen315410/article/details/39581055  前面几篇博文介绍了Android如何自定义控件,其实就是讲一下如何"从无到有"的自定义一个全新的控件,继承View或者继承ViewGroup,复写其相关方法,这种自定义控件的方式相对来说难度较大,而且并不是所有需要新控件的情况下,都要这样进行.有很多情况下,我们只要运用好Android给我提供好的控件,经过布局巧妙的结合在一起,就是一个新的控件,我称之为&

自定义组合控件和在自定义控件中使用自定义属性

今天,整理了一下我平时的笔记,写一个比较简单的自定义组合控件,仅供小白参考,大神请绕道,希望能够对大家有一些帮助 首先,得明白为什么我们需要自定义组合控件,它是因为原有控件并不能满足开发的需求,或者说并不能达到我们想要的一种效果,这个时候,就需要我们自己定义一些控件,以达到目的 ![先来看一下效果](http://img.blog.csdn.net/20160716224219109) 个人总结自定义控件的步骤: 1.先写一个布局,这里我用的是一个相对布局,我这里的相对布局就是根布局了 <?xm

第十六天 自定义控件和自定义组合控件

1.  setContentView() 一旦调用,layout 会立即显示UI 2. inflate 只会将layout 形成一个以view类 实现 的对象 ,需要显示的时候还需要调用 setContentView() . ---------------------------------------------------------------------------------------------- 自定义控件组合 第一步 :先写要组合的一些需要的控件,将其封装到一个布局xml布局文

iOS开发UI篇—Quartz2D(自定义UIImageView控件)

一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View. 使用Quartz2D自定义View,可以从模仿系统的ImageView的使用开始. 需求驱动开发:模仿系统的imageview的使用过程 1.创建 2.设置图片 3.设置frame 4.把创建的自定义的view添加到界面上(在自定义的View中,需要一个image属性接收image图片参数->5). 5.添加一个image属性(接下来,拿到image之后,应

Android自定义UI控件（简单方便版，但不灵活）

这种方法的优点就是简单,容易理解,适合开发一些不经常用到的自定义UI控件 缺点就是比较不灵活,如果其他应用想使用这个控件的话得改很多 简单来说,这个方法是用来做成品的,下一篇的方法是用来做模板的. 先看成品,这是一个标题栏控件: 由左右两个按钮和中一个TextView组成: 实现方法: 第一步:定义一个xml文件,用来设计你自定义控件的雏形 示例代码:文件名为title 1 <?xml version="1.0" encoding="utf-8"?> 2

(八)ASP.NET自定义用户控件（1）

http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控件不是那么的高深,当初我开始学的时候还有点恐惧,但是慢慢就好了.学习控件的开发技术,并不一定说以后要从事控件的开发,而是让我们深入的理解掌握ASP.NET内部的机理.你会发觉,当学习完控件开发技术后,你以后开发网站时有种得心应手的感觉.我不希望一上来就讲控件开始多么多么难啊,我会用一个演化的方法来讲