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<String> 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<String> 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<LiuShiActivityPresenter> {

    @Override
    public Class<LiuShiActivityPresenter> 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<String> 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 );
    }
}

//布局的总界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".LiuShiActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/ed_sousuo"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:hint="搜你想要的" />

        <Button
            android:id="@+id/but_sousuo"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="搜索" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="历史记录" />

        <TextView
            android:id="@+id/clearlsjl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="清空历史记录" />
    </LinearLayout>

    <soexample.umeng.com.shopcarweekthree.MyLiuShiView
        android:visibility="gone"
        android:id="@+id/myLiushiView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

</LinearLayout>

//文字的布局

//这里要涉及到两点

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

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:gravity="center"
        android:textSize="20dp"
        android:id="@+id/text_name"
        android:text="AAA"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape" />
</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="#e3e3e3"/>
    <stroke android:width="1dp"
        android:color="#FFFFFF"/>
</shape>

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

android自定义View实现流式布局

猜你喜欢