android--------自定义控件 之 组合控件篇

上篇介绍了自定义控件的自定义属性篇,地址:https://my.oschina.net/zhangqie/blog/1805970

这篇博文主要来说说 自定义控件的组合控件来提高布局的复用

使用自定义组合控件的好处?

我们在项目开发中经常会遇见很多相似或者相同的布局,比如APP的标题栏,我们就可以用自定义组合控件来实现,以提高开发效率,降低开发成本为导向的,也便于扩展。

当然也可以有其他方式,如 include 标签

1:标题栏布局文件

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:id="@+id/title_tab_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="@null"
        android:minHeight="45dp"
        android:textSize="14sp"
        />

    <TextView
        android:id="@+id/title_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:maxLines="1"
        android:textSize="17sp" />

    <Button
        android:id="@+id/title_tab_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="7dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp" />
</merge>

2:属性文件

 <declare-styleable name="TopTabToolView">
        <attr name="tab_background_color" format="color"/>
        <attr name="left_tab_visible" format="boolean"/>
        <attr name="left_tab_drawable" format="reference|integer"/>
        <attr name="title_text" format="string"/>
        <attr name="title_color" format="color"/>
        <attr name="right_tab_visible" format="boolean"/>
        <attr name="right_tab_text" format="string"/>
        <attr name="right_tab_text_color" format="color"/>
        <attr name="right_tab_drawable" format="reference|integer"/>
</declare-styleable>

3:自定义控件

public class TopTabToolView extends RelativeLayout {

    private ImageView titleBarLeftImg;
    private Button titleBarRightBtn;
    private TextView titleBarTitle;

    public TopTabToolView(Context context) {
        super(context);
    }

    public TopTabToolView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.tab_tool_layout,this,true);
        titleBarLeftImg = (ImageView)findViewById(R.id.title_tab_left);
        titleBarTitle = (TextView)findViewById(R.id.title_tab_title);
        titleBarRightBtn = (Button)findViewById(R.id.title_tab_right);

        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TopTabToolView);
        if (typedArray != null){

            //背景设置
            int titleBarBackGround = typedArray.getColor(R.styleable.TopTabToolView_tab_background_color, Color.WHITE);
            setBackgroundColor(titleBarBackGround);

            //-------------------------标题栏左边----------------------
            boolean leftImgVisible = typedArray.getBoolean(R.styleable.TopTabToolView_left_tab_visible,true);
            if (leftImgVisible){
                titleBarLeftImg.setVisibility(VISIBLE);
            }else {
                titleBarLeftImg.setVisibility(GONE);
            }
            //设置图标
            int leftTabDrawble = typedArray.getResourceId(R.styleable.TopTabToolView_left_tab_drawable,-1);
            if (leftTabDrawble != -1){
                titleBarLeftImg.setImageResource(leftTabDrawble);
            }


            //--------------------------中间标题-----------------------
            String titleText = typedArray.getString(R.styleable.TopTabToolView_title_text);
            if (!TextUtils.isEmpty(titleText)){
                titleBarTitle.setText(titleText);
                //设置字体颜色
                int titleTextColor = typedArray.getColor(R.styleable.TopTabToolView_title_color,Color.WHITE);
                titleBarTitle.setTextColor(titleTextColor);
            }



            //------------------------标题栏右边-------------------------
            boolean rightButtonVisible = typedArray.getBoolean(R.styleable.TopTabToolView_right_tab_visible,true);
            if (rightButtonVisible){
                titleBarRightBtn.setVisibility(VISIBLE);
            }else {
                titleBarRightBtn.setVisibility(INVISIBLE);
            }

            //设置文字
            String rightBtnText = typedArray.getString(R.styleable.TopTabToolView_right_tab_text);
            if (!TextUtils.isEmpty(rightBtnText)){
                titleBarRightBtn.setText(rightBtnText);
                int rightBtnTextColor = typedArray.getColor(R.styleable.TopTabToolView_right_tab_text_color,Color.WHITE);
                titleBarRightBtn.setTextColor(rightBtnTextColor);
            }

            //设置图标
            int rightBtnDrawable = typedArray.getResourceId(R.styleable.TopTabToolView_right_tab_drawable,-1);
            if (rightBtnDrawable != -1){
                titleBarRightBtn.setCompoundDrawablesWithIntrinsicBounds(0,0,rightBtnDrawable,0);
            }

            typedArray.recycle();
        }
    }

    public TopTabToolView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * 设置标题
     * @param title
     */
    public void setTitle(String title){
        if (!TextUtils.isEmpty(title)){
            titleBarTitle.setText(title);
        }
    }

    /***
     * 左边点击
     * @param onClickListener
     */
    public void setLeftOnClickListener(OnClickListener onClickListener){
        if (onClickListener != null){
            titleBarLeftImg.setOnClickListener(onClickListener);
        }
    }


    /***
     * 右边点击
     * @param onClickListener
     */
    public void setRightOnClickListener(OnClickListener onClickListener){
        if (onClickListener != null){
            titleBarRightBtn.setOnClickListener(onClickListener);
        }
    }
}

属性文件的设置也可以通过Java代码修改, 如: Title标题

4:Activity代码

public class Demo3Activity extends AppCompatActivity {

    TopTabToolView topTabToolView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo3);
        initView();
    }

    private void initView(){
        topTabToolView = (TopTabToolView) findViewById(R.id.tab1);
        topTabToolView.setTitle("代码设置标题");
        topTabToolView.setLeftOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        topTabToolView.setRightOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(Demo3Activity.this,"关闭",Toast.LENGTH_LONG).show();
            }
        });
    }
}

效果图:

源码地址:https://github.com/DickyQie/android-custom-control

猜你喜欢

转载自my.oschina.net/zhangqie/blog/1806507