流式布局自定义view

先建一个布局文件xml

<?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="match_parent"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_attr_tag"
        android:layout_margin="10dp"
        android:background="@drawable/shape"
        />
</LinearLayout>

里面的背景是自己用shape画图画的

shape代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#c0c0c0"/>
    <stroke android:width="1dip" android:color="#c0c0c0"/>
    <corners android:radius="80dp"/>
    <padding android:bottom="5dp"
        android:left="12dp"
        android:right="12dp"
        android:top="5dp"/>
</shape>

我们还需要建一个类,来完成初始化和测量

继承自viewGroup,第一次实现一个方法,第二次实现前3个方法,并且需要重写测量方法

package majunbao.bwie.com.demo_flowview.weiget;

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

public class MyViewFlow extends ViewGroup {
    private int mleftMargin=20;
    private int mtopMargin=20;

    public MyViewFlow(Context context) {
        this(context,null);
    }

    public MyViewFlow(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec,heightMeasureSpec);
        int leftMargin = mleftMargin;
        int topMargin = mtopMargin;

        int viewHeight=0;
        int viewWidth=0;

        //父控件传进来的宽度和高度以及对应的测量模式
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
        
        switch (modeHeight){
            case MeasureSpec.AT_MOST:
                int measuredHeight=0;
                for (int j = 0; j < getChildCount();j++) {
                    int measuredWidth = getChildAt(j).getMeasuredWidth();
                    measuredHeight = getChildAt(j).getMeasuredHeight();
                    if (leftMargin+measuredWidth+mleftMargin>getWidth()) {
                        leftMargin=mleftMargin;
                        topMargin+=measuredHeight+mtopMargin;
                    }
                    leftMargin+=measuredWidth+mleftMargin;
                }
                topMargin+=measuredHeight+mtopMargin;
                break;
        }
        setMeasuredDimension(sizeWidth,topMargin);

    }

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        int leftMargin=mleftMargin;
        int topMargin=mtopMargin;

        for (int j = 0; j <getChildCount(); j++) {
            int measuredWidth = getChildAt(j).getMeasuredWidth();
            int measuredHeight = getChildAt(j).getMeasuredHeight();
            if (leftMargin+measuredWidth+mleftMargin>getWidth()) {
                leftMargin=mleftMargin;
                topMargin+=measuredHeight+mtopMargin;
                getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
            }else {
                getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
            }
            leftMargin+=measuredWidth+mleftMargin;
        }
    }
}

写到这里自定义view就已经写完了

activity页面

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/edt"
                android:textColorHighlight="#ff44ff"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入搜索内容" />
        </FrameLayout>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:id="@+id/but"
            android:background="#808080"
            android:textSize="20dp"
            android:text="搜索" />

    </LinearLayout>

    <majunbao.bwie.com.demo_flowview.weiget.MyViewFlow
        android:id="@+id/afl_cotent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

MainActivity页面

package majunbao.bwie.com.demo_flowview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import majunbao.bwie.com.demo_flowview.weiget.MyViewFlow;

public class MainActivity extends AppCompatActivity {

    private EditText edt;
    private Button but;
    private MyViewFlow afl_cotent;
    private LayoutInflater layoutInflater;
    private TextView tvAttrTag;
    private List<String> list2 = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        edt = findViewById(R.id.edt);
        but = findViewById(R.id.but);
        afl_cotent = findViewById(R.id.afl_cotent);
        layoutInflater = LayoutInflater.from(this);
        but.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String s = edt.getText().toString();
                View item = layoutInflater.inflate(R.layout.sub_item, null);
                tvAttrTag = item.findViewById(R.id.tv_attr_tag);
                list2.add(s);
                for (int i = 0; i < list2.size(); i++) {
                    tvAttrTag.setText(list2.get(i));
                }
                afl_cotent.addView(item);
            }
        });
    }
}

以上功能只是实现一个流式布局的搜索页面,仅供参考

猜你喜欢

转载自blog.csdn.net/nideyida1/article/details/82011676