android自定义View实现流式布局

//先来一张效果图

 

//自定义的控件

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;

public class MyLiuShiView extends RelativeLayout {
    private Context context;
    private LinearLayout view_v;
    private ArrayList list = new ArrayList<>();
    private LinearLayout view_h;
    private int position = 0;
    private RelativeLayout view_text;
    private TextView textView;
    private String data;

    public MyLiuShiView(Context context) {
        super( context );
        initView( context );
    }

    public MyLiuShiView(Context context, AttributeSet attrs) {
        super( context, attrs );
        initView( context );
    }

    public MyLiuShiView(Context context, AttributeSet attrs, int defStyleAttr) {
        super( context, attrs, defStyleAttr );
        initView( context );
    }

    private void initView(Context context) {
        this.context = context;
        view_v = (LinearLayout) View.inflate( context, R.layout.liushi_v, null );
        addView( view_v );
    }


    public void setlistData(ArrayList list) {
        this.list = list;
            setList();
    }

    private void setList() {
        view_v.removeAllViews();
        view_h = (LinearLayout) View.inflate( context, R.layout.liushi_h, null );
        view_v.addView( view_h );
        view_h.removeAllViews();
        int len = 0;
        for (int i = 0; i < this.list.size(); i++) {
            position = i;
            data = this.list.get( i );
            len += data.length();
            Log.i( "tag", "length" + len );
            if (len > 10) {
                view_h = (LinearLayout) View.inflate( context, R.layout.liushi_h, null );
                view_v.addView( view_h );
                len = 0;
            }

            view_text = (RelativeLayout) View.inflate( context, R.layout.liushi_text, null );
            textView = view_text.findViewById( R.id.text_name );
            textView.setText( data );
            view_h.addView( view_text );
//在文字这里设置样式 不然的话到最后面如果路文字太长在页面会发生堆积的问题
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view_text.getLayoutParams();
            layoutParams.weight=1;
            view_text.setLayoutParams( layoutParams );
        }
    }
}

 

//在MVP中使用ButterKnife 要在父类的BaseActivity里面加入一个initViewF方法 方便在presenter层调用控件

import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import soexample.umeng.com.shopcarweekthree.mvp.presenter.BaseActivityPresenter;

public class LiuShiActivity extends BaseActivityPresenter {

    @Override
    public Class getClassPresenterActivity() {
        return LiuShiActivityPresenter.class;
    }

    @BindView(R.id.but_sousuo)
    Button button;
    @BindView(R.id.ed_sousuo)
    EditText editText;

    @BindView(R.id.myLiushiView)
    MyLiuShiView myLiuShiView;

    @BindView(R.id.clearlsjl)
    TextView textView;

    @OnClick({R.id.but_sousuo,R.id.clearlsjl})
    public void setClick(View view) {
        switch (view.getId()) {
            case R.id.but_sousuo:
                delegate.ButtonClick();
                break;
            case R.id.clearlsjl:
                delegate.TextViewClick();
                break;
        }
    }
//父类的方法
    @Override
    public void initView() {
        super.initView();
        ButterKnife.bind( this );
        delegate.initView( button, editText, myLiuShiView );
    }
}

//presenter层

import android.content.Context;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import java.util.ArrayList;

import soexample.umeng.com.shopcarweekthree.mvp.view.AppIDelegate;

public class LiuShiActivityPresenter extends AppIDelegate {
    private Context context;
    private Button button;
    private EditText editText;
    private MyLiuShiView myLiuShiView;
    private ArrayList list = new ArrayList<>();

    @Override
    protected int getLayoutId() {
        return R.layout.activity_liu_shi;
    }

    @Override
    public void getContext(Context context) {
        this.context = context;
    }

    @Override
    public void initData() {

    }

    public void initView(Button button, EditText editText, MyLiuShiView myLiuShiView) {
        this.button = button;
        this.editText = editText;
        this.myLiuShiView = myLiuShiView;
    }

    public void ButtonClick() {
        myLiuShiView.setVisibility( View.VISIBLE );
        String trim = editText.getText().toString().trim();
        if (TextUtils.isEmpty( trim )) {
//额这里有个小bug
目前还没有修正
            myLiuShiView.setVisibility( View.GONE );
            list.clear();
            Toast.makeText( context, "输入内容不可为空", Toast.LENGTH_SHORT ).show();
        } else {
            list.add( trim );
            myLiuShiView.setlistData( list );
        }
    }

    public void TextViewClick() {
        list.clear();
        myLiuShiView.setVisibility( View.GONE );
    }
}

//布局的总界面

//横向滑动的布局   注意高度改成自适应

//纵向滑动的布局  注意高度改成自适应

//文字的布局

//这里要涉及到两点  

1.使用相对布局 不要使用线性布局 否者在加载之后会很丑

2.注意文字的高度 自适应

//差点忘记了 shape美观一下

简单的流式布局的实现效果就这样了