自定义ActionBar 显示规则简析

我们的APP做了做到风格统一和简化代码

通常会统一做一个titleBar

类似这种

这种


总的来说 是这个统一模式


我们可以首先创建一个titleBar 的xml布局，可供我们调试UI
毕竟这个比较于画更简单方便一点

view_action_bar.xml

<?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="@dimen/space_45">

    <TextView
        android:id="@+id/left_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"/>

    <ImageView
        android:id="@+id/left_image"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_centerVertical="true"
        android:padding="10dp"
        android:scaleType="fitStart"
        android:src="@drawable/icon_arrow_left_green"/>


    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:ellipsize="end"
        android:maxEms="8"
        android:singleLine="true"
        android:text="主页"
        android:textColor="@color/black"
        android:textSize="@dimen/text_size_17"/>

    <ImageView
        android:id="@+id/title_image"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_centerVertical="true"
        android:padding="15dp"
        android:scaleType="fitStart"/>

    <RelativeLayout
        android:id="@+id/right_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="导航"
            android:textColor="@color/green01"
            android:textSize="@dimen/text_size_16"/>

        <ImageView
            android:id="@+id/right_image"
            android:layout_width="42dp"
            android:layout_height="42dp"
            android:padding="10dp"
            android:scaleType="fitEnd"/>
    </RelativeLayout>

    <TextView
        android:id="@+id/subtitle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/space_px_20"
        android:text="副标题"
        android:layout_toLeftOf="@id/right_container"
        android:textColor="@color/green01"
        android:textSize="@dimen/text_size_16"/>

    <View
        android:id="@+id/bottom_line"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:background="@color/gray_line"/>
</RelativeLayout>

下面开始准备自定义的属性了 attrs 下

<declare-styleable name="MyActionBar">
        <attr name="title_text" format="string" />
        <attr name="subtitle_text" format="string" />
        <attr name="title_text_size" format="dimension" />
        <attr name="title_text_color" format="color" />
        <attr name="title_image" format="reference" />
        <attr name="title_image_width" format="dimension" />
        <attr name="title_image_height" format="dimension" />
        <attr name="right_text" format="string" />
        <attr name="right_text_size" format="dimension" />
        <attr name="right_text_color" format="color" />
        <attr name="right_image" format="reference" />
        <attr name="right_image_width" format="dimension" />
        <attr name="right_image_height" format="dimension" />
        <attr name="left_text" format="string" />
        <attr name="left_text_size" format="dimension" />
        <attr name="left_text_color" format="color" />
        <attr name="left_image" format="reference" />
        <attr name="left_image_width" format="dimension" />
        <attr name="left_image_height" format="dimension" />
        <attr name="line_visible" format="boolean" />
        <attr name="child_visible">
            <flag name="LT" value="0x01" />
            <flag name="LI" value="0x02" />
            <flag name="TT" value="0x04" />
            <flag name="TI" value="0x08" />
            <flag name="RT" value="0x10" />
            <flag name="RI" value="0x20" />
            <flag name="ST" value="0x40" />
            <flag name="NULL" value="0x00" />
        </attr>
    </declare-styleable>

当然重点就是child_visible 这个枚举属性的定义了


这里给出我们自定义的控件
MyActionBar.class

public class MyActionBar extends RelativeLayout implements View.OnClickListener {
    private static final int LEFT_TEXT_VISIBLE = 0x01;
    private static final int LEFT_IMAGE_VISIBLE = 0x02;
    private static final int TITLE_TEXT_VISIBLE = 0x04;
    private static final int TITLE_IMAGE_VISIBLE = 0x08;
    private static final int RIGHT_TEXT_VISIBLE = 0x10;
    private static final int RIGHT_IMAGE_VISIBLE = 0x20;
    private static final int SUBTITLE_TEXT_VISIBLE = 0x40;
    private TextView mLeftTextView;
    private ImageView mLeftImageView;
    private TextView mTitleTextView;
    private TextView mSbutitleTextView;
    private ImageView mTitleImageView;
    private TextView mRightTextView;
    private ImageView mRightImageView;
    private View mBottomLine;

    private Drawable background = null;
    private int mChildVisible = 0x06;
    private String mTitleText;
    private String mSubTitleText;
    private int mTitleTextSize = -1;
    private int mTitleTextColor = -1;
    private int mTitleImage;
    private int mTitleImageWidth;
    private int mTitleImageHeight;

    private String mLeftText;
    private int mLeftTextSize;
    private int mLeftTextColor;
    private Drawable mLeftDrawable;
    private int mLeftDrawableWidth;
    private int mLeftDrawableHeight;

    private boolean isLineVisible = true;
    private String mRightText;
    private int mRightTextSize;
    private ColorStateList mRightTextColor;
    private Drawable mRightDrawable;
    private int mRightDrawableWidth;
    private int mDRightrawableHeight;
    private OnActionBarClickListener listener;

    public MyActionBar(Context context) {
        super(context);
        initActionBarView();
    }

    public MyActionBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyActionBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (getBackground() == null) {
            setBackgroundColor(getResources().getColor(R.color.gray_title));
        }
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyActionBar, defStyle, 0);
        for (int i = 0; i < typedArray.getIndexCount(); i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.MyActionBar_child_visible:
                    mChildVisible = typedArray.getInt(attr, mChildVisible);
                    break;
                case R.styleable.MyActionBar_title_text:
                    mTitleText = typedArray.getString(attr);
                    break;
                case R.styleable.MyActionBar_subtitle_text:
                    mSubTitleText = typedArray.getString(attr);
                    break;
                case R.styleable.MyActionBar_title_text_size:
                    mTitleTextSize = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.MyActionBar_title_text_color:
                    mTitleTextColor = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.MyActionBar_title_image:
                    break;
                case R.styleable.MyActionBar_title_image_width:
                    break;
                case R.styleable.MyActionBar_title_image_height:
                    break;
                case R.styleable.MyActionBar_left_text:
                    break;
                case R.styleable.MyActionBar_left_text_size:
                    break;
                case R.styleable.MyActionBar_left_text_color:
                    break;
                case R.styleable.MyActionBar_left_image:
                    mLeftDrawable = typedArray.getDrawable(attr);
                    break;
                case R.styleable.MyActionBar_left_image_width:
                    break;
                case R.styleable.MyActionBar_left_image_height:
                    break;
                case R.styleable.MyActionBar_right_text:
                    mRightText = typedArray.getString(attr);
                    break;
                case R.styleable.MyActionBar_right_text_size:
                    break;
                case R.styleable.MyActionBar_right_text_color:
                    mRightTextColor = typedArray.getColorStateList(attr);
                    break;
                case R.styleable.MyActionBar_right_image:
                    mRightDrawable = typedArray.getDrawable(attr);
                    break;
                case R.styleable.MyActionBar_right_image_width:
                    break;
                case R.styleable.MyActionBar_right_image_height:
                    break;
                case R.styleable.MyActionBar_line_visible:
                    isLineVisible = typedArray.getBoolean(attr, true);
                    break;
            }
        }
        typedArray.recycle();
        initActionBarView();
        initActionBarData();
        initActionBarVisible();
    }


    private void initActionBarView() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            setPadding(getPaddingLeft(), getPaddingTop() + DensityUtils.getStatusBarHeight(getContext()),
                    getPaddingRight(), getPaddingBottom());
        }
        View view = View.inflate(getContext(), R.layout.view_action_bar, null);
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT, DensityUtils.dip2px(getContext(), 45));
        view.setLayoutParams(layoutParams);
        mLeftTextView = (TextView) view.findViewById(R.id.left_text);
        mLeftTextView.setOnClickListener(this);
        mLeftImageView = (ImageView) view.findViewById(R.id.left_image);
        mLeftImageView.setOnClickListener(this);
        mTitleTextView = (TextView) view.findViewById(R.id.title_text);
        mTitleTextView.setOnClickListener(this);
        mTitleImageView = (ImageView) view.findViewById(R.id.title_image);
        mTitleImageView.setOnClickListener(this);
        mSbutitleTextView = (TextView) view.findViewById(R.id.subtitle_text);
        mSbutitleTextView.setOnClickListener(this);
        mRightTextView = (TextView) view.findViewById(R.id.right_text);
        mRightTextView.setOnClickListener(this);
        mRightImageView = (ImageView) view.findViewById(R.id.right_image);
        mRightImageView.setOnClickListener(this);
        mBottomLine = view.findViewById(R.id.bottom_line);
        addView(view);
    }

    private void initActionBarData() {
        if (!TextUtils.isEmpty(mTitleText)) {
            mTitleTextView.setText(mTitleText);
        }
        if (!TextUtils.isEmpty(mSubTitleText)) {
            mSbutitleTextView.setText(mSubTitleText);
        }
        if (mTitleTextSize != -1) {
            mTitleTextView.setTextSize(DensityUtils.sp2px(getContext(), mTitleTextSize));
        }
        if (mTitleTextColor != -1) {
            mTitleTextView.setTextColor(mTitleTextColor);
        }

        if (mLeftDrawable != null) {
            mLeftImageView.setImageDrawable(mLeftDrawable);
        }

        if (!TextUtils.isEmpty(mRightText)) {
            mRightTextView.setText(mRightText);
        }

        if (mRightDrawable != null) {
            mRightImageView.setImageDrawable(mRightDrawable);
        }

        mRightTextView.setTextColor(mRightTextColor != null ? mRightTextColor : ColorStateList.valueOf(0xFF32A238));
    }

    private void initActionBarVisible() {
        if ((LEFT_TEXT_VISIBLE & mChildVisible) == 0) {
            mLeftTextView.setVisibility(View.GONE);
        } else {
            mLeftTextView.setVisibility(View.VISIBLE);
        }
        if ((LEFT_IMAGE_VISIBLE & mChildVisible) == 0) {
            mLeftImageView.setVisibility(View.GONE);
        } else {
            mLeftImageView.setVisibility(View.VISIBLE);
        }
        if ((TITLE_TEXT_VISIBLE & mChildVisible) == 0) {
            mTitleTextView.setVisibility(View.GONE);
        } else {
            mTitleTextView.setVisibility(View.VISIBLE);
        }
        if ((TITLE_IMAGE_VISIBLE & mChildVisible) == 0) {
            mTitleImageView.setVisibility(View.GONE);
        } else {
            mTitleImageView.setVisibility(View.VISIBLE);
        }
        if ((RIGHT_TEXT_VISIBLE & mChildVisible) == 0) {
            mRightTextView.setVisibility(View.GONE);
        } else {
            mRightTextView.setVisibility(View.VISIBLE);
        }
        if ((RIGHT_IMAGE_VISIBLE & mChildVisible) == 0) {
            mRightImageView.setVisibility(View.GONE);
        } else {
            mRightImageView.setVisibility(View.VISIBLE);
        }
        if ((SUBTITLE_TEXT_VISIBLE & mChildVisible) == 0) {
            mSbutitleTextView.setVisibility(View.GONE);
        } else {
            mSbutitleTextView.setVisibility(View.VISIBLE);
        }
        if (isLineVisible) {
            mBottomLine.setVisibility(View.VISIBLE);
        } else {
            mBottomLine.setVisibility(View.GONE);
        }
    }

    @Override
    public void onClick(View v) {
        if (listener == null) {
            return;
        }
        switch (v.getId()) {
            case R.id.left_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_LEFT_TEXT);
                break;
            case R.id.left_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_LEFT_IMAGE);
                break;
            case R.id.title_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_TITLE_TEXT);
                break;
            case R.id.title_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_TITLE_IMAGE);
                break;
            case R.id.right_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_RIGHT_TEXT);
                break;
            case R.id.right_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_RIGHT_IMAGE);
                break;
            case R.id.subtitle_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_SUBTITLE_TEXT);
                break;
        }
    }


    public void setTitleText(String text) {
        mTitleTextView.setText(text);
    }

    public TextView getRightTextView() {
        return mRightTextView;
    }

    public void setRightText(String text) {
        mRightTextView.setText(text);
    }

    public void setRightTextColor(int color) {
        mRightTextView.setTextColor(color);
    }

    public void setRightVisibility(int visibility) {
        mRightTextView.setVisibility(visibility);
    }

    public void setRightTextClickable(boolean clickable) {
        mRightTextView.setClickable(clickable);
    }

    public interface OnActionBarClickListener {
        int POS_LEFT_TEXT = 0;
        int POS_LEFT_IMAGE = 1;
        int POS_TITLE_TEXT = 2;
        int POS_TITLE_IMAGE = 3;
        int POS_RIGHT_TEXT = 4;
        int POS_RIGHT_IMAGE = 5;
        int POS_SUBTITLE_TEXT = 6;

        void onActionBarClick(View view, int postion);
    }

    public void setOnActionBarClickListener(OnActionBarClickListener listener) {
        this.listener = listener;
    }
}

下面具体解释下
1.首先我们在2个参数的构造方法中初始化我们子控件的显示属性


2. 在 initActionBarView()方法中建立各个子控件的引用
3. 在 initActionBarData()方法中的到子控件显示值
4. 在 initActionBarVisible()方法中的初始化子控件的显示问题。

下面重点来了，我贴一下控件的使用，在仔细讲解

 <com.ruiyi.view.ui.MyActionBar
        android:id="@+id/action_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:child_visible="LI|TT|RI"
        app:right_image="@drawable/icon_help_info"
        app:title_text="@string/apply_card_car_step3_title" />

我们对属性child_visible 指定为 LI | TT | RI 采取的是 | 运算
我简单解释一下或运算
   参加运算的两个对象，按二进制位进行“或”运算。
   运算规则：0|0=0；   0|1=1；   1|0=1；    1|1=1；
   即 ：参加运算的两个对象只要有一个为1，其值为1。
   例如:3|5　即 0000 0011 | 0000 0101 = 0000 0111   因此，3|5的值得7。

这里我们的定义为
 LI = 0x02 = 0000 0010
 TT = 0x04  0000 0100
 RI = 0x20  0001 0100
LI|TT|RI = 0001 0110 = Ox21
在自定义控件中得到的mChildVisivible = 0x21

在判断显示的时候，我们采取的是& 运算
我简单解释一下与运算
运算规则：0&0=0;   0&1=0;    1&0=0;     1&1=1;
即：两位同时为“1”，结果才为“1”，否则为0
例如：3&5  即 0000 0011 & 0000 0101 = 0000 0001   因此，3&5的值得1。

我们的判断规则是

 if ((LEFT_TEXT_VISIBLE & mChildVisible) == 0) {
            mLeftTextView.setVisibility(View.GONE);
        } else {
            mLeftTextView.setVisibility(View.VISIBLE);
        }
        if ((LEFT_IMAGE_VISIBLE & mChildVisible) == 0) {
            mLeftImageView.setVisibility(View.GONE);
        } else {
            mLeftImageView.setVisibility(View.VISIBLE);
        }
        if ((TITLE_TEXT_VISIBLE & mChildVisible) == 0) {
            mTitleTextView.setVisibility(View.GONE);
        } else {
            mTitleTextView.setVisibility(View.VISIBLE);
        }

当运算结果为0 ，子控件隐藏，反之就显示

这里我简单验证下

left text : 0000 0001 & 0001 0110 = 0000 0000 = 0 不显示
left image : 0000 0010 & 0001 0110 = 0000 0010 = 2 显示
title text : 0000 0100 & 0001 0110 = 0000 0100 = 8 显示
title image: 0000 1000 & 0001 0110 = 0000 0000 = 0 不显示

这就是显示规则的原理了。

最后 我们可以将各个子控件的点击事件抽离处理，运用回调处理
我们创建一个接口,包括View 和标记

  public interface OnActionBarClickListener {
        int POS_LEFT_TEXT = 0;
        int POS_LEFT_IMAGE = 1;
        int POS_TITLE_TEXT = 2;
        int POS_TITLE_IMAGE = 3;
        int POS_RIGHT_TEXT = 4;
        int POS_RIGHT_IMAGE = 5;
        int POS_SUBTITLE_TEXT = 6;

        void onActionBarClick(View view, int postion);
    }

拿到listener

  public void setOnActionBarClickListener(OnActionBarClickListener listener) {
        this.listener = listener;
    }

给每个子控件设置点击事件，统一处理

     mLeftTextView.setOnClickListener(this);
        mLeftImageView = (ImageView) view.findViewById(R.id.left_image);
        mLeftImageView.setOnClickListener(this);
        mTitleTextView = (TextView) view.findViewById(R.id.title_text);
        mTitleTextView.setOnClickListener(this);
        mTitleImageView = (ImageView) view.findViewById(R.id.title_image);
        mTitleImageView.setOnClickListener(this);
        mSbutitleTextView = (TextView) view.findViewById(R.id.subtitle_text);
        mSbutitleTextView.setOnClickListener(this);
        mRightTextView = (TextView) view.findViewById(R.id.right_text);
        mRightTextView.setOnClickListener(this);
        mRightImageView = (ImageView) view.findViewById(R.id.right_image);
        mRightImageView.setOnClickListener(this);

统一处理回传

@Override
    public void onClick(View v) {
        if (listener == null) {
            return;
        }
        switch (v.getId()) {
            case R.id.left_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_LEFT_TEXT);
                break;
            case R.id.left_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_LEFT_IMAGE);
                break;
            case R.id.title_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_TITLE_TEXT);
                break;
            case R.id.title_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_TITLE_IMAGE);
                break;
            case R.id.right_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_RIGHT_TEXT);
                break;
            case R.id.right_image:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_RIGHT_IMAGE);
                break;
            case R.id.subtitle_text:
                listener.onActionBarClick(v, OnActionBarClickListener.POS_SUBTITLE_TEXT);
                break;
        }
    }

在收到事件，我们自己处理

  @Override
    public void onActionBarClick(View v, int postion) {
        super.onActionBarClick(v, postion);
        if (postion == POS_RIGHT_TEXT) {
          。。。。
        }
    }

嗯，就这样！