Android流式布局(搜索历史)

流式布局这篇呢,主要是写搜索历史的时候用到了,所以,以下就是我用搜索历史举个例子,如有业务不同,仅供参考!

1.导入依赖

	implementation 'com.hyman:flowlayout-lib:1.1.2'

2.外层搜索样式

这里是搜索框及下方搜索历史的展示!

	<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/edit_Text"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:hint="请输入搜索的内容"/>
        <Button
            android:id="@+id/sousuo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="搜索"/>
    </LinearLayout>
    
    <com.zhy.view.flowlayout.TagFlowLayout
        android:id="@+id/id_flowlayout"
        //切记这里变成app
        app:max_select="-1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">>
    </com.zhy.view.flowlayout.TagFlowLayout>
	</LinearLayout>

3.Activity中实现流式布局

这里我没有请求接口,是自己写的一些假数据,而且数据有些🤢!哈哈哈~~

	public class MainActivity extends AppCompatActivity {
    private String[] data={"流感", "咳嗽", "过敏", "发烧", "感冒",
            "湿疹", "便秘", "痔疮", "协和", "鼻炎", "失眠", "痛风", "上火",
            "脚气", "抑郁症", "性欲", "乳腺增生", "头晕", "腰痛"};
    List<String> list=new ArrayList<>();



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TagFlowLayout mFlowLayout = findViewById(R.id.id_flowlayout);
        final EditText ed = findViewById(R.id.ed);
        Button ss = findViewById(R.id.ss);


        for(int i=0;i<data.length;i++)
        {
            list.add(data[i]);
        }

        setAdapter(mFlowLayout);


        ss.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String s = ed.getText().toString();
                list.add(s);
                setAdapter(mFlowLayout);
            }
        });


    }



    private void setAdapter(TagFlowLayout mFlowLayout) {
        mFlowLayout.setAdapter(new TagAdapter<String>(list)
        {
            @Override
            public View getView(FlowLayout parent, int position, String s)
            {
                //加入你的布局
                TextView tv = (TextView) View.inflate(MainActivity.this, R.layout.tv, null);
                tv.setText(s);
                return tv;
            }
        });
    }
	}

4.需要引入的样式

这是流式布局中每一块儿的样式,说白了就是搜索完之后下面每一个搜索历史!

	<?xml version="1.0" encoding="utf-8"?>
	<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@color/colorAccent"
    android:text="Helloworld"
    android:textColor="@color/colorPrimaryDark">
	</TextView>

上面这个是简单一点的,下面呢,是我用自定义view写的一套流式布局!有些乱~

1.New一个类

	public class ViewClass extends LinearLayout {

    private final DisplayMetrics metrics;
    private final int widthPixels;
    private final int heightPixels;

    public ViewClass(Context context, AttributeSet attrs) {
        super(context, attrs);
        metrics = context.getResources().getDisplayMetrics();
        widthPixels = metrics.widthPixels;
        heightPixels = metrics.heightPixels;
        setOrientation(VERTICAL);
    }

    public void setData(String[] data){

        LinearLayout lin = getLin();
        for (int i = 0; i <data.length ; i++) {
            String tmp=data[i];
            int numWidth=0;
            int childCount = lin.getChildCount();
            for (int j = 0; j <childCount ; j++) {
                TextView tv = (TextView) lin.getChildAt(j);
                LayoutParams params = (LayoutParams) tv.getLayoutParams();
                int leftMargin = params.leftMargin;
                tv.measure(getMeasuredWidth(),getMeasuredHeight());
                numWidth+= tv.getMeasuredWidth() + leftMargin + tv.getPaddingLeft() + tv.getPaddingRight();
            }
            TextView textView = setText();
            LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            layoutParams.leftMargin=10;
            layoutParams.topMargin=5;
            textView.setLayoutParams(layoutParams);
            textView.setText(tmp);
            textView.measure(getMeasuredWidth(),getMeasuredHeight());
            int textdataWidth = textView.getMeasuredWidth() + textView.getPaddingRight() + textView.getPaddingLeft();
            if (widthPixels>=numWidth+textdataWidth){
                lin.addView(textView);
            }
            else {
                lin = getLin();
                lin.addView(textView);
            }
        }
    }


    public LinearLayout getLin(){
        LinearLayout linearLayout = new LinearLayout(getContext());
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        linearLayout.setLayoutParams(params);
        this.addView(linearLayout);
        return linearLayout;
    }

    public TextView setText(){
        TextView textView = new TextView(getContext());
        textView.setTextColor(Color.RED);
        textView.setTextSize(20);
        textView.setPadding(10,10,10,10);
        textView.setBackgroundResource(R.drawable.style_s);
        return textView;
    }
	}

2.Activity中实现效果

下面还是有些恶心的数据😅

	public class MainActivity extends AppCompatActivity {

    private String[] data={"流感", "咳嗽", "过敏", "发烧", "感冒", "湿疹", "便秘", "痔疮", "协和", "鼻炎", "失眠", "痛风", "上火", "脚气", "抑郁症", "性欲", "乳腺增生", "头晕", "腰痛"};
    private ViewClass vc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vc = findViewById(R.id.vc);
        vc.setData(data);
    }
	}

3.导入样式

	<?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"
    tools:context=".MainActivity">

    <zjq.com.drainlayout.ViewClass
        android:id="@+id/vc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></zjq.com.drainlayout.ViewClass>

	</LinearLayout>

4.在drawable中创建shape调试自己的颜色,宽高,半径

	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/colorAccent" android:width="4dp"></stroke>
	<corners android:radius="10dp"></corners>
	</shape>

创作不易,仅供参考,如有问题,评论留言,如有雷同,纯属巧合!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值