Android中怎么實現一個瀑布流控件

本篇文章給大家分享的是有關Android中怎么實現一個瀑布流控件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

具體如下：

public class FlowLayout extends ViewGroup {
  /**行里子view之間的行距離*/
  public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding);
  /**行里子view之間的垂直距離*/
  public int mVerticalSpace = Util.getDimen(R.dimen.top_padding);
  /**創建行的集合*/
  private List<Line> mLines = new ArrayList<Line>();
  /**當前行*/
  private Line mCurrentLine;
  /**當前行使用的寬度*/
  private int mCurrentUseWidth = 0;
  /**父容器的寬高*/
  private int parentWidthSize;
  private int parentHeightSize;
  public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }
  public FlowLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
  }
  public FlowLayout(Context context) {
    super(context);
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //0.先清空行集合里的數據
    clear();
    //1.得到父viewGroup的模式與大小
    int parentWidthMode = MeasureSpec.getMode(widthMeasureSpec);//
    parentWidthSize = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
    int parentHeightMode = MeasureSpec.getMode(heightMeasureSpec);
    parentHeightSize = MeasureSpec.getSize(heightMeasureSpec) - getPaddingBottom() - getPaddingTop();
    /* 每個子view都是包裹內容
     * layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT
     * 得到每個孩子的測量規則
     */
    //2.得到每個孩子的模式
    int childWidthMode = parentWidthMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentWidthMode;
    int childHeightMode = parentHeightMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentHeightMode;
    //3.根據模式得到子控件的大小
    int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthMode, parentWidthSize);
    int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeightMode, parentHeightSize);
    //得到子view的個數
    int count = getChildCount();
    //創建新的行
    mCurrentLine = new Line();
    for (int i = 0; i < count; i++) {
      View childView = getChildAt(i);
      //4.測量每個孩子
      childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
      //5.得到測量后的孩子的寬高
      int childMeasureWidth = MeasureSpec.getSize(childWidthMeasureSpec);
      //int childMeasureHeight = MeasureSpec.getSize(childHeightMeasureSpec);
      //6.得到此行使用的寬度
      mCurrentUseWidth += childMeasureWidth;
      //7.判斷此行的寬度是否大于父控件的寬度，如果大于則換行
      if (mCurrentUseWidth > parentWidthSize) {
        //8.如果當前的子view的寬度大于父容器的寬度，強行把這個view添加的集合里
        if (mCurrentLine.getChildCount()<1) {
          mLines.add(mCurrentLine); 
        }
        //9.換行
        newLine();
      }else {
        //8.把當前子view添加到行里
        mCurrentLine.addChild(childView);
        //9.添加間隔
        mCurrentUseWidth += mHorizontolSpace;
        if (mCurrentUseWidth > parentWidthSize) {
          //10.換行
          newLine();
        }
      }
    }
    //11.如果集合里沒有添加當前行，則把當前添加到集合
    if (!mLines.contains(mCurrentLine)) {
      mLines.add(mCurrentLine);
    }
    //12.設置富容器的總寬高
    int parentWidth = parentWidthSize + getPaddingLeft() + getPaddingRight();
    int parentHeight = (mLines.size()-1) * mVerticalSpace + getPaddingBottom() + getPaddingTop();
    for(Line line : mLines){
      //得到所以line的高度
      parentHeight += line.getHeight();
    }
    //13.resolveSize表示哪個高度合適，就用哪個
    setMeasuredDimension(parentWidth, resolveSize(parentHeightSize, parentHeight));
    /*setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
        getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));*/
  }
  /**
   * 換行
   */
  private void newLine() {
    //a.先把當前的行添加到集合
    mLines.add(mCurrentLine);
    //b.創建新的一行
    mCurrentLine = new Line();
    //c.新行里的使用的行必須設置為0
    mCurrentUseWidth = 0;
  }
  public void clear() {
    mLines.clear();
    mCurrentLine = null;
    mCurrentUseWidth = 0;
  }
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    //15.得到每個line孩子的左上角的坐標
    int left = l + getPaddingLeft();
    int top = t + getPaddingTop();
    //現在容器里只有line是子孩子
    for (int i = 0; i < mLines.size(); i++) {
      Line line = mLines.get(i);
      //16.把分配位置給line去處理
      line.layout(left, top);
      //17.設置第一行后的其它行的top數值
      top += line.getHeight() + mVerticalSpace;
    }
  }
  /**
   * 行類，用來封裝一行的view
   */
  private class Line{
    /**當前行的寬度*/
    private int mWidth = 0;
    /**當前行的高度*/
    private int mHeight = 0;
    /**每個孩子得到的剩余空間*/
    int mChildPdding = 0;
    private List<View> children = new ArrayList<View>();
    public void addChild(View childView) {
      children.add(childView);
      //取得之view里最高的高度
      if (childView.getMeasuredHeight() > mHeight) {
        mHeight = childView.getMeasuredHeight();
      }
      //18.得到行寬度
      mWidth += childView.getMeasuredWidth();
    }
    /**
     * 定位每個line在富容器里的額位置
     * @param left
     * @param top
     */
    public void layout(int left, int top) {
      //18.得到行寬度
      mWidth += mHorizontolSpace * (children.size() -1);
      //19.得到剩余的寬度大小
      //int padding = getMeasuredWidth() - mWidth;
      int padding = parentWidthSize - mWidth;
      if (padding > 0) {
        mChildPdding = padding / children.size();
      }
      // getWidth()view顯示的時候大小,如果view沒顯示,這個值就為0,步包括隱藏的部分, getMeasuredWidth()控件實際大小,包括隱藏的部分
      //一般來說 getMeasuredWidth() > getWidth();
      for (int i = 0; i < children.size(); i++) {
        View child = children.get(i);
        //第一種：有間隔的flow
        int bottom = child.getMeasuredHeight() + top;
        //20.把剩余的空間分配給每個view
        int right = child.getMeasuredWidth() + left + mChildPdding;
        //第二種：無間隔的flow
//       int bottom = getMeasuredHeight() + top;
//       int right = getMeasuredWidth() + left;
        //第一個child的位置
        child.layout(left, top, right, bottom);
        //第二個及后面child的right
        right += child.getMeasuredWidth() + mHorizontolSpace + mChildPdding;
      }
    }
    /**
     * 得到子view的大小
     * @return
     */
    public int getChildCount() {
      if (children != null) {
        return children.size();
      }
      return 0;
    }
    public int getHeight() {
      return mHeight;
    }
  }
}

使用方法：

public class TopFragment extends Fragment{
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ScrollView scrollView = new ScrollView(getActivity());
    FlowLayout layout = new FlowLayout(getActivity());
    layout.setBackgroundDrawable(Util.getDrawable(R.drawable.list_item_bg));
    int padding = Util.getDimen(R.dimen.top_padding);
    layout.setPadding(padding, padding, padding, padding);
    GradientDrawable pressDrawable = DrawableUtil.createDrawable(0xffcecece);
    for (int i = 0; i < mDatas.size(); i++) {
      mTextView = new TextView(getActivity());
      mTextView.setText(mDatas.get(i));
      GradientDrawable randomDrawable = DrawableUtil.createRandomDrawable();
      StateListDrawable stateListDrawable = DrawableUtil.createStateDrawable(pressDrawable, randomDrawable);
      mTextView.setBackgroundDrawable(stateListDrawable);
      mTextView.setTextColor(Color.WHITE);
      int left = Util.px2dip(7);
      int top = Util.px2dip(4);
      int right = Util.px2dip(7);
      int bottom = Util.px2dip(4);
      mTextView.setPadding(left, top, right, bottom);
      mTextView.setTag(mDatas.get(i));
      mTextView.setOnClickListener(this);
      layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, - 2));
    }
    scrollView.addView(layout);
    }
    return scrollView;
}

工具類:

public class DrawableUtil {
  /**
   * 創建隨機背景的drawable
   * @return
   */
  public static GradientDrawable createRandomDrawable(){
    GradientDrawable drawable = new GradientDrawable();
    drawable.setCornerRadius(Util.px2dip(5));
    Random random = new Random();
    int red = random.nextInt(200) + 20;
    int green = random.nextInt(200) + 20;
    int blue = random.nextInt(200) + 20;
    int color = Color.rgb(red, green, blue);
    drawable.setColor(color);
    return drawable;
  }
    /**
     * 創建帶有背景的drawable
     * @return
     */
    public static GradientDrawable createDrawable(int color){
      GradientDrawable drawable = new GradientDrawable();
      drawable.setCornerRadius(Util.px2dip(5));
      drawable.setColor(color);
      return drawable;
  }
  /**
   * 狀態選擇器
   * @param press
   * @param normal
   * @return
   */
  public static StateListDrawable createStateDrawable(Drawable press, Drawable normal){
    StateListDrawable drawable = new StateListDrawable();
    //按下
    drawable.addState(new int[]{android.R.attr.state_pressed}, press);
    //正常
    drawable.addState(new int[]{}, normal);
    return drawable;
  }
}

以上就是Android中怎么實現一個瀑布流控件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。