Android,自定义ViewGroup实现titleBar

大体思路。

    onMearSure()里测量出所有子View大小。onLayout（）中指定位置。定义attrs文件，最终目的为了方便管理。

attr文件定义。

<declare-styleable name="TopBar">
        <attr name="titleText" format="string"></attr>
        <attr name="titlesize" format="dimension"></attr>
        <attr name="titlecolor" format="color"></attr>
        <attr name="leftTextcolor" format="color"></attr>
        <attr name="leftBackground" format="reference|color"></attr>
        <attr name="leftText" format="string"></attr>
        <attr name="rightTextcolor" format="color"></attr>
        <attr name="rightBackground" format="reference|color"></attr>
        <attr name="rightText" format="string"></attr>
        <attr name="topmode" format="integer"></attr>//0代表左右两边是Button,1两边为Imageview 默认0
    </declare-styleable>

当前主要考虑到两种情况，一种左右都是图片，另一种左右均为Button.

代码片段

public CustomTopBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.TopBar);
        mode = a.getInteger(R.styleable.TopBar_topmode,0);
        mLeftBackGround = a.getDrawable(R.styleable.TopBar_leftBackground);
        mRightBackGround = a.getDrawable(R.styleable.TopBar_rightBackground);
        if(mode==0) {
            mLeftTextColor = a.getColor(R.styleable.TopBar_leftTextcolor, Color.BLACK);
            mLeftText = a.getString(R.styleable.TopBar_leftText);

            mRightTextColor = a.getColor(R.styleable.TopBar_rightTextcolor, Color.BLACK);
            mRightText = a.getString(R.styleable.TopBar_rightText);

        }

        mTitleText = a.getString(R.styleable.TopBar_titleText);
        mTitleSize =a.getDimension(R.styleable.TopBar_titlesize, 10f);
        mTitleTextColor = a.getColor(R.styleable.TopBar_titlecolor, Color.BLACK);

        a.recycle();


        initViews();

    获取xml中对应的值。a.recycle();及时释放资源。主要进行制空操作。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec,heightMeasureSpec);
    }

measureChildren（）计算出所有子View的宽高，没有这一步骤在onLayout中childView 获取到的宽高都是0。

接下来是initViews中的方法。

private void initViews() {
        mLeftParmas = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        mRightParmas = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        mTitleParmas = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        if(mode==0){
            mLeftButton = new Button(mContext);
            mRightButton = new Button(mContext);
            mLeftButton.setText(mLeftText);
            mLeftButton.setTextColor(mLeftTextColor);
            mLeftButton.setBackground(mLeftBackGround);

            mLeftButton.setLayoutParams(mLeftParmas);
            mLeftButton.setGravity(Gravity.CENTER);
            addView(mLeftButton);
            mRightButton.setText(mRightText);
            mRightButton.setTextColor(mRightTextColor);
            mRightButton.setBackground(mRightBackGround);

            mRightButton.setLayoutParams(mRightParmas);
            mRightButton.setGravity(Gravity.CENTER);
            addView(mRightButton);
        }else {
            mLeftImage = new ImageView(mContext);
            mRightImage = new ImageView(mContext);
            mLeftImage.setImageDrawable(mLeftBackGround);
            mLeftImage.setLayoutParams(mLeftParmas);
            addView(mLeftImage);
            mRightImage.setImageDrawable(mRightBackGround);
            mRightImage.setLayoutParams(mRightParmas);
            addView(mRightImage);
        }

        mTitleTextView = new TextView(mContext);


        mTitleTextView.setText(mTitleText);
        mTitleTextView.setTextColor(mTitleTextColor);
        mTitleTextView.setTextSize(mTitleSize);
        mTitleTextView.setGravity(Gravity.CENTER);

        mTitleTextView.setLayoutParams(mTitleParmas);
        addView(mTitleTextView);

        if(mode==0) {
            mLeftButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.leftClick();
                    }
                }
            });
            mRightButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.rightClick();
                    }
                }
            });
        }else{
            mLeftImage.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.leftClick();
                    }
                }
            });
            mRightImage.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.rightClick();
                    }
                }
            });
        }
    }

判断下采取用的是ImageView,Button。依次添加到ViewGroup中。如果继承的是RelativeLayout 不是ViewGroup, 只需要设置每个View 对应parmas 的位置信息，既addRule(，)即可。

onLayout方法

protected void onLayout(boolean changed, int l, int t, int r, int b) {

        int count = getChildCount();
        int cr,cb,cl,ct;
        cb = b;
        cl=0;
        ct=0;
        cr=r;
        for(int i=0;i<count;i++){
            View child = getChildAt(i);
            int width = child.getMeasuredWidth();
            switch (i){
                case 0://左
                    cl=ct=0;
                    break;
                case 1://右
                    cl = r-width;
                    break;
                case 2://中

                    cl= r/2-width/2;
                    break;
            }
            child.layout(cl,ct,cl+width,b);
        }
    }

如果是继承的RelativeLayout 直接写个super即可，因为父类的方法中已根据rule对其子View位置做了计算及分配。

xml方法

 <com.jalen.customproject.CustomTopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="50dip"
        topBar:titleText="测试"
        topBar:titlesize="10sp"
        topBar:leftText="LEFT"
        topBar:rightText="Right"
        topBar:titlecolor="@android:color/holo_blue_bright"
        topBar:leftBackground="@mipmap/lucky_item_show"
        topBar:rightBackground="@mipmap/me_feedback_advice_img"
        topBar:topmode="1"
        >

记得在根控件加上xmlns:topBar=”http://schemas.android.com/apk/res-auto”

个人建议

最好写两个style 分别是button模式跟ImgaeView模式的。或者写一个include都可以。

效果图：

Demo地址：CustomProject

有问题欢迎issue.