流式布局

自定义流式布局

你好！ 这是自定义流式布局的一篇文章，根据本文章走下去。

我们先创建项目

MainActivity布局里面写

<?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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.bawei.lianxi_liushi.MyviewTop
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/TOP_id"
        ></com.bawei.lianxi_liushi.MyviewTop>

    <com.bawei.lianxi_liushi.FlowLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/flow_id"
        ></com.bawei.lianxi_liushi.FlowLayout>







</LinearLayout>

在创建第二个Layout布局里面写上

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


    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/top_image"
        android:src="@mipmap/ic_launcher"
        ></ImageView>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/edit_text"
        android:hint="nexjij"
        android:layout_toRightOf="@+id/top_image"
        android:layout_toLeftOf="@id/ss_id"
        ></EditText>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ss_id"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_alignParentRight="true"
        android:text="搜索"

        ></TextView>




</RelativeLayout>

准备好了吗下面我们正式的写代码了在写Java代码的地方创建一个FlowLayout“名字自己起，什么名字都行”。

---

> 在App java 里面创建FlowLayout。目的在于获取布局，设置布局

---

让我们看看FlowLayout里面的代码

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;


public class FlowLayout extends ViewGroup {



    public FlowLayout(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec,heightMeasureSpec);
    }

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

        //定义控件的左边的距离
        int left = 20;
        int row = 0;//行数
        //得到屏幕的宽
        int width = getWidth();
        //布局中内容的排版
        for (int i = 0; i <getChildCount() ; i++) {

            View childAt = getChildAt(i);
            //得到子条目的宽高
            int measuredWidth = childAt.getMeasuredWidth();
            int measuredHeight = childAt.getMeasuredHeight();
            //换行
            if(left+measuredWidth>width){
                row++;
                left = 20;
            }
            //绘制控件的值
            childAt.layout(left,measuredHeight*row+row,left+measuredWidth,measuredHeight*(row+1)+row*20);
            left+=measuredWidth+20;
        }


    }
}

*MyviewTop里面的代码__主要用于设置输入框加载MainActivity里面的布局

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class MyviewTop extends RelativeLayout implements View.OnClickListener {

    private EditText editText;
    private TextView textView;

    public MyviewTop(Context context) {
        super(context);
    }

    //加载布局
    public MyviewTop(Context context, AttributeSet attrs) {
        super(context, attrs);
        View inflate = LayoutInflater.from(context).inflate(R.layout.tou, this);
        editText=inflate.findViewById(R.id.edit_text);
        textView=inflate.findViewById(R.id.ss_id);
        textView.setOnClickListener(this);

    }

    //点击事件
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.ss_id:
                //获取输入框的值
                String string = editText.getText().toString();
                data.getdata(string);
                break;
        }


    }

    //接口回调
    public interface Data{
        void getdata(String name);
    }
    private Data data;

    public void setData(Data data) {
        this.data = data;
    }
}

现在我们就差临门一脚就可以实现瀑布流了

让我们看看MainActivity里面的代码主要用于获取MyviewTop和FlowLayout再把文本加入进去

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private MyviewTop myviewTop;
    private FlowLayout flowLayout;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myviewTop=findViewById(R.id.TOP_id);
        flowLayout=findViewById(R.id.flow_id);

        //得到监听
        myviewTop.setData(new MyviewTop.Data() {
            @Override
            public void getdata(String name) {
                //添加流式布局中
                TextView textView=new TextView(MainActivity.this);
                textView.setText(name);

                flowLayout.addView(textView);

            }
        });

    }
}

你学会了吗？是不是很简单，清单文件不用添加任何代码，build.gradle里面也不用添加任何代码。喜欢的话给个关注吧！嘎嘎！！！！