FlowLayout

Android中的FlowLayout~

相信大家在Java的图形化界面中，经常使用到FlowLayout，flowLayout即流式布局，就是说控件会按排分布，当一行装不下的时候自动换到下一行。在安卓中没有这种布局，所以我们可以自己写一个这种布局~

流式布局截图.png

这里面便是我们的流式布局了，下面我们可以一起看一下代码：

/**
 * Created by linSir on 16/7/30.流式布局
 */
public class FlowLayout extends ViewGroup {
    private float mVerticalSpacing; //每个item纵向间距
    private float mHorizontalSpacing; //每个item横向间距

    public FlowLayout(Context context) {
        super(context);
    }
    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public void setHorizontalSpacing(float pixelSize) {
        mHorizontalSpacing = pixelSize;
    }
    public void setVerticalSpacing(float pixelSize) {
        mVerticalSpacing = pixelSize;
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int selfWidth = resolveSize(0, widthMeasureSpec);

        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int paddingBottom = getPaddingBottom();

        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        //通过计算每一个子控件的高度，得到自己的高度
        for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
            View childView = getChildAt(i);
            LayoutParams childLayoutParams = childView.getLayoutParams();
            childView.measure(
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight,
                            childLayoutParams.width),
                    getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom,
                            childLayoutParams.height));
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();

            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > selfWidth) {
                childLeft = paddingLeft;
                childTop += mVerticalSpacing + lineHeight;
                lineHeight = childHeight;
            } else {
                childLeft += childWidth + mHorizontalSpacing;
            }
        }

        int wantedHeight = childTop + lineHeight + paddingBottom;
        setMeasuredDimension(selfWidth, resolveSize(wantedHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int myWidth = r - l;

        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();

        int childLeft = paddingLeft;
        int childTop = paddingTop;

        int lineHeight = 0;

        //根据子控件的宽高，计算子控件应该出现的位置。
        for (int i = 0, childCount = getChildCount(); i < childCount; ++i) {
            View childView = getChildAt(i);

            if (childView.getVisibility() == View.GONE) {
                continue;
            }

            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();

            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > myWidth) {
                childLeft = paddingLeft;
                childTop += mVerticalSpacing + lineHeight;
                lineHeight = childHeight;
            }
            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
            childLeft += childWidth + mHorizontalSpacing;
        }
    }
}

到这里，我们便已经创建好了流式布局，接下来我们可以在我们的代码中使用它，下面我展示一下如何使用它。

/**
 * Created by linSir on 16/7/30.买手行程详情界面
 */
public class AddressDetailsActivity extends AppCompatActivity {

    @BindView(R.id.rel_address_details) RelativeLayout rl;
    @BindView(R.id.customView) FlowLayout mFlowLayout;
    private String mNames[] = {
            "美容护肤", "美容护肤", "美容护肤",
            "美容护肤", "美容护肤", "美容护肤",
            "美容护肤", "美容护肤", "美容护肤",
            "美容护肤", "美容护肤", "美容护肤",
    };

    @Override protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_address_details);
        ButterKnife.bind(this);

        ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        lp.setMargins(5, 5, 5, 5);


        for (int i = 0; i < mNames.length; i++) {
            TextView view = new TextView(this);
            view.setText(mNames[i]);
            view.setTextSize(12);
            view.setBackgroundDrawable(getResources().getDrawable(R.drawable.text_bg));
            mFlowLayout.addView(view, lp);
            mFlowLayout.setHorizontalSpacing(10);
            mFlowLayout.setVerticalSpacing(10);
//            if (i >= 3) {
//                view.setId(R.id.release_price);
//                view.setVisibility(View.GONE);
//            }

        }

    }

//    @OnClick(R.id.down)
//    public void doew() {
//        TextView view = (TextView) findViewById(R.id.release_price);
//        view.setVisibility(View.VISIBLE);
//    }

}

我们在我们的activity中，可以很简单的使用它，使用的截图我在一开始有给出来了，我们只需要简单的设置layout_margin，也可以设置一下，两个textview左右的距离，和上下的距离，这样我们就已经设置好了，就已经完事了。

onMeasure 我们在这个方法里，需要加以判断，如果控件放在一行中可以放下，我们就放在一起，并且测量控件的长和宽，如果在里面装不下，便会自动换行，而且也会重新记录它的长和宽。

---

onLayout 在这个方法里面，我们做的事情是，计算子控件出现的位置，它具有5个参数，第一个是通知我们的控件是否发生了改变，还有四个参数描述了我们的控件的位置。我们会根据控件的显隐状态来判断这个控件是否要来加载，还要根据传过来的参数，来绘制这个控件。

---

好了，以上便是，我们通过自定义来实现的流式布局啦，大家可以把它应用在安卓中了~