文章目錄

• 1葡幸、功能描述
• 2、效果圖
• 3朗恳、如何使用
  • 3.1湿颅、 Android Studio導(dǎo)入方法
  • 3.2、 項(xiàng)目中如何使用
    • 3.2.1粥诫、布局中使用
    • 3.2.2油航、在代碼中使用
    • 3.2.3、屬性介紹
• 4怀浆、 實(shí)現(xiàn)原理
  • 4.1谊囚、需求分析
  • 4.2、代碼封裝
  • 4.3执赡、總結(jié)

1镰踏、功能描述

你還在為類(lèi)似設(shè)置頁(yè)面的樣式(圖+文字+圖)每次寫(xiě)一大堆布局文件而煩惱嗎？快來(lái)看看SuperTextView吧沙合，這里有你想要實(shí)現(xiàn)的任何樣式奠伪，而你要做的僅僅是引入幾行代碼。SuperTextView是一個(gè)功能強(qiáng)大的布局View，可以滿足日常大部分布局樣式绊率，開(kāi)發(fā)者可以自行組合屬性配置出屬于自己風(fēng)格的樣式!可能描述起來(lái)沒(méi)有概念谨敛，還是直接看效果圖吧！

2滤否、 效果圖

Paste_Image.png

3脸狸、如何使用

Android Studio導(dǎo)入方法，添加Gradle依賴

先在項(xiàng)目根目錄的 build.gradle 的 repositories 添加:

     allprojects {
         repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }

然后在dependencies添加:

        dependencies {
        ...
        compile 'com.github.lygttpod:SuperTextView:2.0.1'
        }

3.2藐俺、項(xiàng)目中如何使用

3.2.1肥惭、布局中如何使用（示例中只列出部分屬性，開(kāi)發(fā)者可根據(jù)具體需求使用其他屬性）

        <com.allen.supertextviewlibrary.SuperTextView
                android:id="@+id/super_tv"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                stv:sLeftBottomTextColor2="@color/colorAccent"
                stv:sLeftBottomTextString="招商銀行（8888）"
                stv:sLeftBottomTextString2="限額說(shuō)明>>"
                stv:sLeftIconRes="@drawable/bank_zhao_shang"
                stv:sLeftTopTextString="銀行卡支付"
                stv:sRightCheckBoxRes="@drawable/circular_check_bg"
                stv:sRightCheckBoxShow="true"
                stv:sLineShow="bottom"
                 />
        注意：
                1紊搪、上下的線可以通過(guò)   sLineShow 設(shè)置  有四種顯示方式 none蜜葱，top，bottom耀石，both
                2牵囤、通過(guò)設(shè)置 sUseRipple=true 開(kāi)啟水波效果

3.2.2、代碼中如何使用

       /**
     * 可以通過(guò)鏈?zhǔn)皆O(shè)置大部分常用的屬性值
     */
        superTextView.setLeftIcon(drawable)
                .setLeftString("")
                .setLeftTVColor(0)
                .setLeftTopString("")
                .setLeftTopTVColor(0)
                .setLeftBottomString("")
                .setLeftBottomTVColor(0)
                .setLeftBottomString2("")
                .setLeftBottomTVColor2(0)
                .setRightString("")
                .setRightTVColor(0)
                .setCbChecked(true)
                .setCbBackground(drawable)
                .setRightIcon(drawable)
                .setRightString("")
                .setRightTVColor(0)
                .setLeftString("")

點(diǎn)擊事件（可根據(jù)需求選擇實(shí)現(xiàn)單個(gè)或者多個(gè)點(diǎn)擊事件滞伟，需要配合x(chóng)ml添加是否允許點(diǎn)擊的屬性揭鳞，詳情見(jiàn)屬性參數(shù)的意義）

        superTextView.setOnSuperTextViewClickListener(new SuperTextView.OnSuperTextViewClickListener() {
                    @Override
                    public void onSuperTextViewClick() {
                        super.onSuperTextViewClick();
                        //do something
                    }

                    @Override
                    public void onLeftTopClick() {
                        super.onLeftTopClick();
                        //do something
                    }

                    @Override
                    public void onLeftBottomClick() {
                        super.onLeftBottomClick();
                        //do something
                    }

                    @Override
                    public void onLeftBottomClick2() {
                        super.onLeftBottomClick2();
                        //do something
                    }
                });

                注意：點(diǎn)擊事件需要配合屬性值使用
                sLeftTopViewIsClickable= true
                sLeftBottomViewIsClickable= true
                sLeftBottomView2IsClickable= true

使用第三方庫(kù)(Picasso或者Glide)加載網(wǎng)絡(luò)圖片

         Picasso.with(this)
         .load(url)
         .placeholder(R.drawable.head_default)
         .into((ImageView) superTextView.getView(SuperTextView.leftImageViewId));

3.2.3、屬性說(shuō)明(以下屬性全部可以通過(guò)xml文件配置和代碼進(jìn)行設(shè)置)

4亩钟、實(shí)現(xiàn)原理

4.1乓梨、需求分析

黑格爾曾說(shuō)過(guò)：存在即合理。SuperTextView的出現(xiàn)應(yīng)該就是某種需求下的產(chǎn)物清酥。

在開(kāi)發(fā)項(xiàng)目的過(guò)程中你會(huì)發(fā)現(xiàn)有很多頁(yè)面的布局都是類(lèi)似的扶镀，就比如說(shuō)常見(jiàn)的設(shè)置頁(yè)面，基本上都是圖標(biāo)+文字+圖標(biāo)的格式焰轻，而且出現(xiàn)的頻率都很高臭觉，如果不做處理勢(shì)必會(huì)寫(xiě)很多無(wú)用的代碼降低開(kāi)發(fā)效率，正因?yàn)槿绱宋覀優(yōu)槭裁床话堰@一類(lèi)view統(tǒng)一封裝起來(lái)吶（其實(shí)就是程序猿的懶惰辱志，哈哈）蝠筑，有了這個(gè)想法就開(kāi)始調(diào)研市場(chǎng)上主流應(yīng)用的顯示樣式，經(jīng)過(guò)調(diào)研總結(jié)出一套顯示方案涵蓋了市面上90%以上的布局樣式揩懒，目的是在以后的使用中快速高效的開(kāi)發(fā)什乙。

4.2、代碼封裝

在介紹封裝之前先說(shuō)一句題外話旭从，其實(shí)任何功能的封裝并不難稳强，還是看你愿不愿意花時(shí)間去做场仲，及時(shí)是簡(jiǎn)單的功能真正實(shí)現(xiàn)起來(lái)的時(shí)候還是會(huì)或多或少的遇到一些問(wèn)題，發(fā)現(xiàn)問(wèn)題解決問(wèn)題的過(guò)程其實(shí)就是進(jìn)步的過(guò)程退疫。好了渠缕，廢話不多說(shuō)，下邊看代碼褒繁。

首先SuperTextView 是繼承自 RelativeLayout實(shí)現(xiàn)亦鳞，里邊所有布局的添加都是通過(guò)Java代碼實(shí)現(xiàn)的，事先定義好需要的參數(shù)名及類(lèi)型

下邊只列出部分參數(shù)

    private int backgroundColor;//背景顏色
    private int leftTVColor;//左邊文字顏色
    private int leftTopTVColor;//左上文字顏色
    private int leftBottomTVColor;//左下文字顏色
    private int leftBottomTVColor2;//左下第二個(gè)文字顏色
    private int rightTVColor;//右邊文字顏色
    private int centerTVColor;//中間文字顏色

    private boolean isSingLines = true;//是否單行顯示   默認(rèn)單行
    private int maxLines = 1;//最多幾行    默認(rèn)顯示一行
    private int maxEms = 10;//最多幾個(gè)字    默認(rèn)顯示10個(gè)漢子

    private static final int NONE = 0;
    private static final int TOP = 1;
    private static final int BOTTOM = 2;
    private static final int BOTH = 3;
    private static final int DEFAULT = BOTTOM;

然后就是在構(gòu)造方法里邊去實(shí)現(xiàn)各個(gè)方法

 public SuperTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        getAttr(attrs);
        initLayout();
    }

我們知道系統(tǒng)控件可以從XML中拿到定義好的屬性值棒坏，那么我們其實(shí)也是可以的燕差，首先在attr中定義好相關(guān)屬性名及字段類(lèi)型然后通過(guò)AttributeSet去拿到相關(guān)屬性值在進(jìn)行設(shè)置

private void getAttr(AttributeSet attrs) {
        //獲取我們?cè)赼ttr中定義的SuperTextView相關(guān)屬性
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.SuperTextView);

        //下邊展示的各個(gè)類(lèi)型參數(shù)的獲取方法，drawable坝冕、string徒探、boolean、int喂窟、px
        leftIconRes = typedArray.getDrawable(R.styleable.SuperTextView_sLeftIconRes);
        leftTextString = typedArray.getString(R.styleable.SuperTextView_sLeftTextString);
        showCheckBox = typedArray.getBoolean(R.styleable.SuperTextView_sRightCheckBoxShow, false);
        lineType = typedArray.getInt(R.styleable.SuperTextView_sLineShow, DEFAULT);
        topLineMargin = typedArray.getDimensionPixelSize(R.styleable.SuperTextView_sTopLineMargin, defaultLinePadding);

        //獲取完之后記得recycle()釋放掉資源
        typedArray.recycle();
      }

接下來(lái)就拿一個(gè)view為例進(jìn)行說(shuō)明如何動(dòng)態(tài)添加view及設(shè)置相關(guān)屬性

/**
     * 初始化左邊文字
     */
    private void initLeftText() {
        leftTV = new TextView(mContext);
        leftTextParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftTextParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        leftTextParams.addRule(RelativeLayout.RIGHT_OF, R.id.sLeftIconId);
        setMargin(leftTextParams, leftTVMarginLeft, 0, dip2px(mContext, 10), 0);
        leftTV.setId(R.id.sLeftTextId);
        leftTV.setLayoutParams(leftTextParams);
        leftTV.setText(leftTextString);
        //設(shè)置Params的方法抽離出來(lái)便于以后統(tǒng)一調(diào)用
        setTextViewParams(leftTV, isSingLines, maxLines, maxEms);
        //設(shè)置字體顏色的方法抽離出來(lái)便于以后統(tǒng)一調(diào)用
        setTextColor(leftTV, leftTVColor);
        //設(shè)置字體大小的方法抽離出來(lái)便于以后統(tǒng)一調(diào)用
        setTextSize(leftTV, leftTVSize);
        //調(diào)用addView方法把我們動(dòng)態(tài)創(chuàng)建的view添加到布局中
        addView(leftTV);
    }

初始化完view之后就是要暴露一些方法供外部人員使用了（部分代碼示例）
在這里我們返回SuperTextView對(duì)象是為了實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

    /**
     * 獲取checkbox狀態(tài)
     *
     * @return 返回選擇框當(dāng)前選中狀態(tài)
     */
    public boolean getCbisChecked() {
        boolean isChecked = false;
        if (rightCheckBox != null) {
            isChecked = rightCheckBox.isChecked();
        }
        return isChecked;
    }

    /**
     * 設(shè)置左邊文字的顏色
     *
     * @param textColor 文字顏色值
     * @return 返回對(duì)象
     */
    public SuperTextView setLeftTVColor(int textColor) {
        leftTVColor = textColor;
        if (leftTV == null) {
            initLeftText();
        } else {
            leftTV.setTextColor(textColor);
        }
        return this;
    }

最后就是一些回調(diào)方法的使用测暗，以點(diǎn)擊事件為例

/**
     * 點(diǎn)擊事件接口
     * 這里沒(méi)有使用interface是因?yàn)橛行┓椒ㄎ覀儾皇且欢ㄒ獙?shí)現(xiàn)的
     * 用到哪個(gè)方法再去重寫(xiě)方法就可以了
     */
    public static class OnSuperTextViewClickListener {
        public void onSuperTextViewClick() {
        }

        public void onLeftTopClick() {
        }

        public void onLeftBottomClick() {
        }

        public void onLeftBottomClick2() {
        }

    }

相關(guān)的set方法拿到OnSuperTextViewClickListener對(duì)象

   public SuperTextView setOnSuperTextViewClickListener(OnSuperTextViewClickListener listener) {
        onSuperTextViewClickListener = listener;
        return this;
    }

初始化view的時(shí)候在各個(gè)view的點(diǎn)擊事件中添加相應(yīng)的回調(diào)方法就行了

       if (mLeftTopViewIsClickable) {
            leftTopTV.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (onSuperTextViewClickListener != null) {
                        onSuperTextViewClickListener.onLeftTopClick();
                    }
                }
            });
        }

以上只是源碼中的部分方法拿出來(lái)供分析使用，看了之后是不是感覺(jué)實(shí)現(xiàn)其實(shí)很簡(jiǎn)單磨澡，趕緊自己著手實(shí)現(xiàn)一個(gè)吧碗啄！

4.3、總結(jié)

想必看到這里的小伙伴已經(jīng)對(duì)這個(gè)庫(kù)的源碼實(shí)現(xiàn)方式了解了稳摄，這里只是把實(shí)現(xiàn)的流程給大家介紹了一下稚字，我又對(duì)這個(gè)庫(kù)做了一個(gè)簡(jiǎn)化版的處理，有興趣的小伙伴可以去讀讀源碼哦厦酬，發(fā)現(xiàn)哪里寫(xiě)的不妥的地方還請(qǐng)指正胆描。

意見(jiàn)反饋

如果遇到問(wèn)題或者好的建議，請(qǐng)反饋到我的郵箱：lygttpod@163.com 或者lygttpod@gmail.com

如果覺(jué)得對(duì)你有用的話弃锐，點(diǎn)一下右上的星星贊一下吧!

傳送門(mén)