Android之自定义标题--使用自定义Layout

Android之定义标题（使用Layout）

开发中一般最常用的标题栏分为左、中、右三部分，前段时间，在项目开发中要用到标题栏，为了实现一个自定义的标题栏，查阅了很多demo，想在将他们总结一下：

1.使用layout实现一个基本的标题布局

效果图：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                android:layout_width="match_parent"                android:layout_height="50dp"                android:background="#545454">    <LinearLayout        android:id="@+id/title_llLeft"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:gravity="center"        android:orientation="horizontal">        <ImageButton            android:id="@+id/title_ibLeft"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:gravity="center"            android:paddingBottom="5dip"            android:paddingLeft="10dip"            android:paddingRight="10dip"            android:paddingTop="5dip"            android:visibility="gone"/>        <TextView            android:id="@+id/title_tvLeft"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:drawablePadding="10dp"            android:paddingBottom="5dp"            android:paddingLeft="10dp"            android:paddingRight="10dp"            android:paddingTop="5dp"            android:text="    "            android:textColor="#ffffffff"            android:textSize="18sp"            android:visibility="gone"/>    </LinearLayout>    <LinearLayout        android:id="@+id/title_llCenterContainer"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_centerInParent="true"        android:gravity="center"        android:orientation="vertical">        <ImageView            android:id="@+id/title_ivCenter"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:gravity="center"            android:visibility="gone"/>        <TextView            android:id="@+id/title_tvCenter"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text=" "            android:textColor="#ffffffff"            android:textSize="20sp"            android:visibility="gone"/>    </LinearLayout>    <LinearLayout        android:id="@+id/title_llRight"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_marginRight="10dp"        android:gravity="center"        android:orientation="horizontal">        <ImageButton            android:id="@+id/title_ibRight"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:gravity="center"            android:paddingBottom="5dip"            android:paddingLeft="10dip"            android:paddingRight="10dip"            android:paddingTop="5dip"            android:visibility="gone"/>        <TextView            android:id="@+id/title_tvRight"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="    "            android:textColor="#ffffffff"            android:textSize="18sp"            android:visibility="gone"/>    </LinearLayout></RelativeLayout>

2.自定义一个ViewGroup继承Relativelayout（也可以是LinearLayout...）

public class CustomTitle extends RelativeLayout {    @Bind(R.id.title_ibLeft)    ImageButton titleIbLeft;    @Bind(R.id.title_tvLeft)    TextView titleTvLeft;    @Bind(R.id.title_llLeft)    LinearLayout titleLlLeft;    @Bind(R.id.title_ivCenter)    ImageView titleIvCenter;    @Bind(R.id.title_tvCenter)    TextView titleTvCenter;    @Bind(R.id.title_llCenterContainer)    LinearLayout titleLlCenterContainer;    @Bind(R.id.title_ibRight)    ImageButton titleIbRight;    @Bind(R.id.title_tvRight)    TextView titleTvRight;    @Bind(R.id.title_llRight)    LinearLayout titleLlRight;    private Handler mHandler = new Handler();    private final int CLICK_DELAY_TIME_MILLISECONDS = 200; // 点击延迟时间    public CustomTitle(Context context) {        super(context);        init(context);    }    public CustomTitle(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    public CustomTitle(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private void init(final Context context) {        LayoutInflater.from(context).inflate(R.layout.view_title, this, true);        ButterKnife.bind(this);        setTextLeftIcon(R.drawable.left_back_arrow);        setTitle("标题");    }    /**     * 设置标题背景     *     * @param resId     */    public void setBackground(int resId) {        setBackground(resId);    }    /**     * 设置中间的控件     *     * @param centerView     */    public void setCenterView(View centerView) {        if (null == centerView) {            return;        }        titleLlCenterContainer.addView(centerView);        LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        centerView.setLayoutParams(lp);    }    /**     * 设置标题     *     * @param title     */    public void setTitle(String title) {        getTextCenter().setText(title);    }    /**     * 控件添加的方向     */    public enum ViewAddDirection {        left, right    }    /**     * 向左部区域添加控件     *     * @param view      添加的控件     * @param direction 添加的方向，{@link ViewAddDirection#left}表示添加的总是在最左边，{@link ViewAddDirection#right}表示添加的总是在最右边     * @param listener  点击监听事件，如不设置，请置null     */    public void addLeftView(View view, ViewAddDirection direction, OnClickListener listener) {        switch (direction) {            case left:                titleLlLeft.addView(view, 0);                break;            case right:                titleLlLeft.addView(view);                break;        }        if (null != listener) {            view.setOnClickListener(listener);        }    }    /**     * 向右部区域添加控件     *     * @param view      添加的控件     * @param direction 添加的方向,{@link ViewAddDirection#left}表示添加的总是在最左边,{@link ViewAddDirection#right}表示添加的总是在最右边     * @param listener  点击监听事件，若不设置，请置null     */    public void addRightView(View view, ViewAddDirection direction,                             OnClickListener listener) {        switch (direction) {            case left:                titleLlRight.addView(view, 0);                break;            case right:                titleLlRight.addView(view);                break;        }        if (null != listener)            view.setOnClickListener(listener);    }    /**     * 设置左边的TextView的图标     *     * @param iconId     */    public void setTextLeftIcon(int iconId) {        if (iconId == 0) {            getTextLeft().setCompoundDrawables(null, null, null, null);            getTextLeft().setOnClickListener(null);            return;        }        Drawable arrowLeft = getResources().getDrawable(iconId);        // 指定drawable的边界        arrowLeft.setBounds(0, 0, arrowLeft.getMinimumWidth(), arrowLeft.getMinimumHeight());        getTextLeft().setText("");        getTextLeft().setCompoundDrawables(arrowLeft, null, null, null);    }    /**     * 设置右边的TextView的图标     *     * @param iconId     */    public void setTextRightIcon(int iconId) {        if (iconId == 0) {            getTextRight().setCompoundDrawables(null, null, null, null);            getTextRight().setOnClickListener(null);            return;        }        Drawable arrowRight = getResources().getDrawable(iconId);        arrowRight.setBounds(0, 0, arrowRight.getIntrinsicWidth(), arrowRight.getMinimumHeight());        getTextRight().setText("");        getTextRight().setCompoundDrawables(null, null, arrowRight, null);    }    /**     * 设置左边的TextView的文字     *     * @param str     */    public void setTextLeftContent(String str) {        getTextLeft().setText(str);    }    /**     * 设置右边的TextView的文字     *     * @param str     */    public void setTextRightContent(String str) {        getTextRight().setText(str);    }    /**     * 设置左边textview的点击事件     *     * @param listener     */    public void setTextLeftClickListener(final OnClickListener listener) {        // 防止快速点击        getTextLeft().setOnClickListener(new OnClickListener() {            @Override            public void onClick(final View v) {                if (listener != null) {                    mHandler.postDelayed(new Runnable() {                        @Override                        public void run() {                            listener.onClick(v);                        }                    }, CLICK_DELAY_TIME_MILLISECONDS);                }            }        });    }    /**     * 设置右边textview的点击事件     *     * @param listener     */    public void setTextRightClickListener(final OnClickListener listener) {        getTextRight().setOnClickListener(listener);    }    public TextView getTextLeft() {        titleTvLeft.setVisibility(View.VISIBLE);        return titleTvLeft;    }    public TextView getTextRight() {        titleTvRight.setVisibility(View.VISIBLE);        return titleTvRight;    }    public TextView getTextCenter() {        titleTvCenter.setVisibility(View.VISIBLE);        return titleTvCenter;    }    public ImageButton getImageBtLeft() {        titleIbLeft.setVisibility(View.VISIBLE);        return titleIbLeft;    }    public ImageButton getImageBtRight() {        titleIbRight.setVisibility(View.VISIBLE);        return titleIbRight;    }    public ImageView getImageCenter() {        titleIvCenter.setVisibility(View.VISIBLE);        return titleIvCenter;    }}

3.在需要标题的布局中添加标题

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical">    <XXX.cn.customtitle.CustomTitle        android:layout_width="match_parent"        android:layout_height="wrap_content"></XXX.cn.customtitle.CustomTitle></LinearLayout>

4.在activity、fragment、popupWindow..中关联控件ID，使用控件对象就可以设置标题的各种属性了。