熱搜View效果

時間 2019-12-06

標籤 view 效果简体版

原文原文鏈接

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

思路：經過觀察效果圖能夠看出這個熱搜詞效果自定義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毫秒。)android

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文件（用來描繪邊框）數組

接下來你們確定會想再添加一個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();
        }
    });