Android自定義組合控件(標題欄+組合布局)非常強大

最近項目要開發一個新版本,發現項目中許多布局大致都相同改動不大,并且布局中代碼量非常之多不好閱讀,針對項目相關內容進行了封裝。

實現思路:

通過繼承RelativeLayout實現動態添加所需要的控件,TextView ImageView View 一共封裝了8個控件 leftImg reightImg leftTv rightTv centerTv leftTopTv leftBottomTv bottomLine 根據需要動態添加AddView(View) 通過LayoutParams.addRule()設置控件的位置,LayoutParams.setMargins()設置大小進行所需控件的控制實現以下效果:

customtextlayout.png

下面看看自定義控件中幾個主要方法

添加ImageView(通過判斷布局是是否設置了leftImg屬性進行添加圖片,增加圖片的點擊回調事件)

  //左邊圖片初始化
        if (leftImgRes != null) {
            initLeftImg();
        }

    private void initLeftImg() {
        leftIV = new ImageView(mContext);
        int width = leftImgWidht != 0 ? leftImgWidht : LayoutParams.WRAP_CONTENT;
        int height = leftImgHeight != 0 ? leftImgHeight : LayoutParams.WRAP_CONTENT;
        LayoutParams leftImgParams = new LayoutParams(width, height);
        leftImgParams.addRule(ALIGN_PARENT_LEFT, TRUE);
        leftImgParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        leftImgParams.setMargins(leftImgMarginleft, 0, 0, 0);
        leftIV.setScaleType(ImageView.ScaleType.FIT_XY);
        leftIV.setId(R.id.leftImg);
        leftIV.setLayoutParams(leftImgParams);
        leftIV.setImageDrawable(leftImgRes);
        leftIV.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (OnTextViewClickListener != null) {
                    OnTextViewClickListener.OnLeftImgClick();
                }
            }
        });
        addView(leftIV);
    }

添加TextView

   //左邊文字初始化
        if (!TextUtils.isEmpty(leftTvString)) {
            initLeftTv();
        }

 private void initLeftTv() {
        leftTv = new TextView(mContext);
        LayoutParams leftTvParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftTvParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        leftTvParams.addRule(RelativeLayout.RIGHT_OF, R.id.leftImg);
        leftTvParams.setMargins(leftTvMarginleft, 0, 0, 0);
        leftTv.setLayoutParams(leftTvParams);
        leftTv.setTextColor(leftTvColor);
        leftTv.setId(R.id.leftTv);
        leftTv.setTextSize(TypedValue.COMPLEX_UNIT_PX, leftTvSize);
        leftTv.setText(leftTvString);
        addView(leftTv);
    }

代碼中設置TextView的公共方法

  //代碼設置左邊文字
    public CustomTextView setLeftTv(String tvStr, String tvColor) {
        leftTvString = TextUtils.isEmpty(tvStr) ? leftTvString : tvStr;
        leftTvColor = TextUtils.isEmpty(tvColor) ? leftTvColor : Color.parseColor(tvColor);
        if (leftTv == null) {
            initLeftTv();
        } else {
            leftTv.setText(leftTvString);
            leftTv.setTextColor(leftTvColor);
        }
        return this;
    }

只需搞懂這三個方法,你也可以根據自己的項目需求定義自己需要的組合控件

使用方法

xml(根據自己需要的屬性自定義)
            <com.dengxiao.customtextlayout.CustomTextView
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:background="#ffffff"
                app:bottomLineHeight="1dp"
                app:bottomLineShow="true"
                app:bottomcolor="#eeeeee"
                app:centerTvColor="#000"
                app:centerTvSize="18sp"
                app:centerTvString="標題"
                app:leftImg="@drawable/btn_back_pressed"
                app:leftImgHeight="40dp"
                app:leftImgMarginleft="5dp"
                app:leftImgWight="40dp"
                app:leftTvColor="@color/colorAccent"
                app:leftTvMarginleft="5dp"
                app:leftTvSize="18sp"
                app:leftTvString="左邊"
                app:rightImg="@drawable/btn_forward_pressed"
                app:rightImgHeight="50dp"
                app:rightImgMarginright="10dp"
                app:rightImgWidht="50dp"
                app:rightTvColor="#52adff"
                app:rightTvMarginright="10dp"
                app:rightTvSize="19sp"
                app:rightTvString="右邊" />

activity.java

  customTextView1.setLeftImg(getResources().getDrawable(R.drawable.ic_search))
                .setRightImg(getResources().getDrawable(R.drawable.icon_portrait))
                .setLeftTv("代碼添加","#c95fdc")
                .setRightTv("代碼添加","#4be1c3")
                .setCenterTv("代碼",null)
                .setLeftTopTv("上",null)
                .setLeftBottomTv("下",null)
                .setBottomLine("#1587e7")
                .setCustomTvBackground("#4dacff");

        customTextView1.setOnTextViewClickListener(new CustomTextView.OnTextViewClickListener(){
            @Override
            public void OnLeftImgClick() {
                Toast.makeText(MainActivity.this,"左邊圖片",Toast.LENGTH_SHORT).show();
            }
            @Override
            public void OnRightImgClick() {
                Toast.makeText(MainActivity.this,"右邊圖片",Toast.LENGTH_SHORT).show();
            }
            @Override
            public void OnTextViewClick() {
                Toast.makeText(MainActivity.this,"布局",Toast.LENGTH_SHORT).show();
            }
        });

完整代碼就不貼了,,如果需要點擊https://github.com/ithedan/CustomTextLayout

如有什么問題,敬請提出,十分感謝!希望越來越好,謝謝!如果喜歡,還請點擊start,喜歡支持一下了,謝謝O(∩_∩)O~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容