接下來將一步一步實現如下（熱搜詞）效果

效果圖

思路：通過觀察效果圖可以看出這個熱搜詞效果自定義View它是一個接一個的擺放的，而且每當一行的熱搜詞總寬度大于控件寬度的時候就會另起一行，因此我們可以考慮使用一個大的自定義的LinearLayout包裹一些小的LinearLayout從而實現分行的效果，至于熱搜詞可以使用TextView加自定義Shap進行顯示。

步驟：

一，繼承LinearLayout并設置為縱向排列

//繼承LinearLayout
public class MyResouView extends LinearLayout {
    public MyResouView(Context context) {
        this(context,null);
    }
    public MyResouView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public MyResouView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //設置縱向排列
        this.setOrientation(VERTICAL);
    }
}

二，測量控件的寬度用于計算何時換行

(這里我嘗試使用getMeasuredWidth()?發現獲取不到值，或者獲取到的為子控件寬度，使用getLayoutParams().width;照樣獲取不到，這里原因不清楚，（原諒我還是個菜逼O(∩_∩)O哈哈~）getWidth()可以獲取到控件寬度，但是必須得window獲取焦點后才可以，所以我在給熱搜控件添加數據的方法中延時了100毫秒。)

 public void setResouwords(String[] resouwords) {
    mResouwords = resouwords;
    new Handler().postDelayed(new Runnable(){
        public void run() {
            //獲取控件寬度
            mMWidth = getWidth();
            removeAllViews();
            lineWidth=0;
            initView();
        }
    }, 100);
}

三，開始向此控件中添加子控件

private void initView() {
    LinearLayout linearlayout;
    TextView textView;
    //創建每行LinearLayout的LayoutParams
    LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //創建TextView的LayoutParams
    LinearLayout.LayoutParams paramsTextView=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //設置每個熱詞間距10
    paramsTextView.setMargins(10,0,0,0);
    //設置每行間距2
    params.topMargin=2;
    params.bottomMargin=2;
    linearlayout=new LinearLayout(getContext());
    linearlayout.setLayoutParams(params);
    //設置每行LinearLayout排列方式為橫向排列
    linearlayout.setOrientation(HORIZONTAL);
    //當熱搜詞數據不為空時循環添加TextView
    if(mResouwords.length>0){
        for(int x=0;x<mResouwords.length;x++){
            textView = new TextView(getContext());
            textView.setLayoutParams(paramsTextView);
            textView.setText(mResouwords[x]);
            textView.setPadding(12, 6, 12, 6);
            textView.setTextSize(mTextSize);
            //計算每個TextView的寬度
            textView.measure(0,0);
            lineWidth+=textView.getMeasuredWidth()+10;
            //當寬度大于控件寬度的時候重新添加一行
            if(lineWidth>mMWidth){
                if(linearlayout!=null){
                    this.addView(linearlayout);
                }
                linearlayout=new LinearLayout(getContext());
                linearlayout.setLayoutParams(params);
                lineWidth=0;
            }
            linearlayout.addView(textView);
        }
        //添加最后一行
        this.addView(linearlayout);
    }
}

此時效果為這樣，初步換行功能已經實現，但是距離目標效果圖還差點感覺。

效果圖

四，接下來我們實現邊框的添加

首先在drawable中添加兩個shap文件（用來描繪邊框）

shap文件

接下來大家肯定會想再添加一個selector來實現點擊效果吧，這里思路是沒錯只不過為了實現靈活的設置背景及邊框顏色，這里我們采取另一種方法實現（代碼動態添加）。

這里我們采用：

StateListDrawable//實現背景的切換
ColorStateList//實現文字顏色的切換

StateListDrawable用法

 mBackgrounddrawable = new StateListDrawable();
 GradientDrawable myGrad_unpress = (GradientDrawable) getResources().getDrawable(R.drawable.resouback_unpress);
 GradientDrawable myGrad_press = (GradientDrawable) getResources().getDrawable(R.drawable.resouback_pressed);
 //設置背景
 myGrad_unpress.setColor(normalBackgroundColor);
 myGrad_press.setColor(pressBackgroundColor);
 //設置邊線
 myGrad_press.setStroke(mStrokeWidth,pressStrokeColor);
 myGrad_unpress.setStroke(mStrokeWidth,normalStrokeColor);
 //設置雙線性過濾
 myGrad_press.setDither(true);
 myGrad_unpress.setDither(true);
 //設置狀態加-的為不按的效果
 mBackgrounddrawable.addState(new int[]{-android.R.attr.state_pressed},myGrad_unpress);
 mBackgrounddrawable.addState(new int[]{android.R.attr.state_pressed},myGrad_press);

ColorStateList用法

int[] colors = new int[] { pressed, normal };
int[][] states = new int[2][];
//每一個二維數組都可以添加很多狀態
states[0] = new int[] { android.R.attr.state_pressed};
states[1] = new int[] { -android.R.attr.state_pressed};
ColorStateList colorList = new ColorStateList(states, colors);

最后給TextView添加上面寫的狀態

textView.setBackground(mBackgrounddrawable);
textView.setTextColor(colorList);

實現后效果圖如下，此時基本效果已經實現，再加入set和get方法便可以實現用戶自定義顏色了，接下來就差最后一步了那就是添加點擊事件。

效果圖

五，實現item點擊事件（這里我們使用接口的方式）

首先自定義一個接口

public interface ResouViewItemClickListener {
    /**
     *
     * @param view 返回點擊的TextView
     * @param index 返回點擊item的索引默認從0開始
     */
    void onItemClick(TextView view,int index);
}

接下來在MyResouView中將此接口添加為屬性并添加set和get方法

 private ResouViewItemClickListener mResouViewItemClickListener;
    public ResouViewItemClickListener getResouViewItemClickListener() {
        return mResouViewItemClickListener;
    }
    /**
     *
     * @param resouViewItemClickListener item點擊事件
     */
    public void setResouViewItemClickListener(ResouViewItemClickListener resouViewItemClickListener) {
        mResouViewItemClickListener = resouViewItemClickListener;
}

然后給TextView添加點擊事件（這里的x為每個條目的position）

final int finalX = x;
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
    if (mResouViewItemClickListener != null) {
     //返回textView
     mResouViewItemClickListener.onItemClick((TextView) v, finalX);
        }
     }
});

最后在Activity中添加點擊事件

mMyResouView = (MyResouView) findViewById(R.id.myview);
    mMyResouView.setNormalTextColor(Color.BLUE);
    mMyResouView.setPressTextColor(Color.GREEN);
    mMyResouView.setTextSize(20);
    mMyResouView.setStrokeWidth(1);
    mMyResouView.setResouViewItemClickListener(new ResouViewItemClickListener() {
        @Override
        public void onItemClick(TextView view, int index) {
            med.setText(view.getText());
            Toast.makeText(MainActivity.this, ""+index, Toast.LENGTH_SHORT).show();
        }
    });

最后上效果圖并附上源碼地址：（https://github.com/myml666/ResouView）

最終效果圖