自定义View 流式布局（历史搜索，热门搜索）

最新推荐文章于 2023-02-03 17:32:08 发布
最新推荐文章于 2023-02-03 17:32:08 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： 自定义View 文章标签： 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43575489/article/details/84727698
版权

xml布局

<?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="wrap_content"
    tools:context=".activity.SearchActivity"
    android:orientation="vertical"
    >
    <bawei.com.week2.customview.HeadView
        android:id="@+id/head_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></bawei.com.week2.customview.HeadView>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <bawei.com.week2.customview.TitleView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="30dp"
            app:textColor="@color/colorBlack"
            android:text="搜索历史"
            android:textSize="25sp"
            />
        <ImageView
            android:id="@+id/image_del"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/del"
            android:layout_alignParentRight="true"
            android:layout_marginTop="30dp"
            />
    </RelativeLayout>
    <bawei.com.week2.customview.CustonFlowView
        android:id="@+id/flow_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        ></bawei.com.week2.customview.CustonFlowView>
    <bawei.com.week2.customview.TitleView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        app:textColor="@color/colorRed"
        android:text="热门搜索"
        android:textSize="25sp"
        />
    <bawei.com.week2.customview.CustonFlowView
        android:id="@+id/hot_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        ></bawei.com.week2.customview.CustonFlowView>


</LinearLayout>

HeadView的布局（headitem）

<?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"
    >
   <ImageView
       android:id="@+id/imageview"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:background="@drawable/search"
       android:layout_marginLeft="10dp"
       android:layout_marginTop="15dp"
       />
    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="10dp"
        android:ems="20"
        android:hint="请输入想要输入的内容"
        />

</LinearLayout>

HeadView代码

public class HeadView extends LinearLayout {
    private Context mContext;
    private ImageView imageView;
    private EditText editText;

    public HeadView(Context context) {
        super(context);
        mContext=context;
        initView();
    }

    public HeadView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext=context;
        initView();
    }

    public void initView(){
        //添加布局
        View view=View.inflate(mContext,R.layout.headitem,null);
        //获取资源ID
        imageView = view.findViewById(R.id.imageview);
        editText = view.findViewById(R.id.edit_text);
        imageView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //6.在将要判断的地方，判断是否为空
                if(mCallBack!=null){
                    //7.执行回调方法，传入参数
                    mCallBack.getData(editText.getText().toString());
                }
            }
        });
        addView(view);
    }
    //3.定义成员变量
    CallBack mCallBack;
    //4.传入，并且给成员变量赋值
    //5.在想要的地方进行回调
    public void setOnCallBack(CallBack callBack){
        mCallBack=callBack;
    }
    //1.定义接口
    public interface CallBack{
        //2.定义方法，传入参数
        void getData(String edit);
    }
}

自定义属性在values下建一个attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleView">
        <attr name="textColor" format="color"></attr>
    </declare-styleable>
</resources>

TitleView代码（自定义属性）

@SuppressLint("AppCompatCustomView")
public class TitleView extends TextView {

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

    public TitleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleView);
        int color = typedArray.getColor(R.styleable.TitleView_textColor, Color.BLACK);
        setTextColor(color);
        //属性回收
        typedArray.recycle();

    }
}

CustonFlowView中的代码

public class CustonFlowView extends LinearLayout {
    private int mChildHeight;//最高的孩子
    private int mLeft=20;//左边距
    private int mTop=20; //上边距
    public CustonFlowView(Context context) {
        super(context);
    }

    public CustonFlowView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //定义父窗口的宽高
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //测量孩子的大小
        measureChildren(widthMeasureSpec,heightMeasureSpec);
        //找到最高的孩子
        findMaxHeight();
        //初始化
        int left=0,top=0;

        int childCount = getChildCount();
        for (int i=0;i<childCount;i++){
            View view = getChildAt(i);
            if(left!=0){
               if((left+view.getMeasuredWidth())>widthSize){
                   top+=mChildHeight+mTop;
                   left=0;
               }
            }
            left+=view.getMeasuredWidth()+mLeft;
        }
        setMeasuredDimension(widthSize,(top+mChildHeight)>heightSize?heightSize:top+mChildHeight);


    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        findMaxHeight();
        //初始化
        int left=0,top=0;

        int childCount = getChildCount();
        for (int i=0;i<childCount;i++){
            View view = getChildAt(i);
            if(left!=0){
                if((left+view.getMeasuredWidth())>getWidth()){
                    top+=mChildHeight+mTop;
                    left=0;
                }
            }
            view.layout(left,top,view.getMeasuredWidth()+left,top+mChildHeight);
            left+=view.getMeasuredWidth()+mLeft;
        }

    }

    private void findMaxHeight() {
        mChildHeight=0;
        int childCount = getChildCount();
        for(int i=0;i<childCount;i++){
            View view = getChildAt(i);
            if(view.getMeasuredHeight()>mChildHeight){
                mChildHeight=view.getMeasuredHeight();
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

数据库
SqlieHelper

public class SqliteHelper extends SQLiteOpenHelper {
    public SqliteHelper(@Nullable Context context) {
        super(context, "Search.db", null, 1);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        db.execSQL("create table search(id integer primary key autoincrement," +
                "name text," +
                "mTag text)");

    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

    }
}

数据库中查询用到的bean类

public class NameBean {
    public String name;
    public String mTag;

    public NameBean(String name, String mTag) {
        this.name = name;
        this.mTag = mTag;
    }

    public String getName() {
        return name;
    }

    public String getmTag() {
        return mTag;
    }
}

Dao层

public class Dao {
    private SqliteHelper helper;
    private SQLiteDatabase database;
    public Dao(Context context){
        helper=new SqliteHelper(context);
        database=helper.getReadableDatabase();
    }
    //添加
    public void add(String name,String mTag){
        ContentValues values=new ContentValues();
        values.put("name",name);
        values.put("mTag",mTag);
        database.insert("search",null,values);
    }
    //查询
    public List<NameBean> select(){
        List<NameBean> list=new ArrayList<>();
        Cursor query = database.query("search", null, null, null, null, null, null);
        while (query.moveToNext()){
            String name = query.getString(query.getColumnIndex("name"));
            String mTag = query.getString(query.getColumnIndex("mTag"));
            NameBean bean=new NameBean(name,mTag);
            list.add(bean);

        }
        return list;
    }
    //删除
    public void delAll(){
        database.delete("search",null,null);
    }
    public void del(String tj){
        database.delete("search","mTag=?",new String[]{tj});
    }

}

Activity中的代码

public class SearchActivity extends AppCompatActivity {

    private HeadView headView;
    private CustonFlowView custonFlowView;
    private CustonFlowView hot_view;
    private String str[]=new String[]{"辣条","薯片","火腿肠","酸辣粉","米线","奶茶嫁给粉","麻辣烫","黄焖鸡","大虾","酸菜鱼"};
    private Dao dao;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search);
        initView(savedInstanceState);
        initData();
    }

   private void initData() {
        dao=new Dao(this);
        //查询
       final List<NameBean> list = dao.select();
       for(int i=0;i<list.size();i++){
           TextView textView=new TextView(SearchActivity.this);
           textView.setText(list.get(i).getName());
           textView.setTextSize(20);
           textView.setTextColor(Color.BLACK);
           textView.setPadding(10,10,10,10);
           textView.setBackgroundResource(R.drawable.shape_text);
           custonFlowView.addView(textView);
           //删除
           final int index=i;
           textView.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   dao.del(list.get(index).getmTag());
                   custonFlowView.removeView(v);
               }
           });
       }

       headView.setOnCallBack(new HeadView.CallBack() {
            @Override
            public void getData(String edit) {
                String uuid = UUID.randomUUID().toString();

                final TextView textView=new TextView(SearchActivity.this);
                textView.setTag(uuid);
                textView.setText(edit);
                textView.setTextSize(20);
                textView.setTextColor(Color.BLACK);
                textView.setPadding(10,10,10,10);
                textView.setBackgroundResource(R.drawable.shape_text);
                dao.add(edit,uuid);
                custonFlowView.addView(textView);
                //删除
                textView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dao.del(v.getTag().toString());
                        custonFlowView.removeView(v);
                    }
                });


            }
        });
    //全部删除
       imageView.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               dao.delAll();
               custonFlowView.removeAllViews();
           }
       });

       //热门搜索
        for (int i=0;i<str.length;i++){
            TextView textView=new TextView(SearchActivity.this);
            textView.setText(str[i]);
            textView.setTextSize(20);
            textView.setTextColor(Color.BLACK);
            textView.setPadding(10,10,10,10);
            textView.setBackgroundResource(R.drawable.shape_text);
            hot_view.addView(textView);
        }

    }

    private void initView(Bundle savedInstanceState) {
        headView = findViewById(R.id.head_view);
        custonFlowView = findViewById(R.id.flow_view);
        hot_view = findViewById(R.id.hot_view);
        imageView = findViewById(R.id.image_del);

    }
}

shape

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

</shape>
AH..
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除
chenchuang0128的博客
07-06 2386
搜索
GTButtonTagsView:历史搜索，按钮流式布局
05-25
《GTButtonTagsView：构建历史搜索与按钮流式布局》 在iOS开发中，我们经常需要展示用户的历史搜索记录，并且这些记录通常以按钮的形式排列，以便用户可以快速点击进行再次搜索。`GTButtonTagsView`就是这样一个...
自定义ViewGroup实现搜索栏历史记录流式布局
java521666的博客
07-26 410
自定义view和viewGroup是Android中重要的组成部分，自定义view只要在方法中实现，需要判断大小是会用到方法，而自定义viewGroup主要用到方法和方法UI绘制流程中：1、onMeasure()measure()方法被final修饰不可重写，onMeasure()可重写父view重写onMeasure()方法，调用子view的measure()方法，子view的measure()方法调用子view的onMeasure()方法，以此递归每个view的onMeasure()方法最终调用setM
Android练手完整项目app（三）商品分类+流式布局Tag
m0_51282960的博客
02-03 823
Android 练手完整项目app(三) 流式布局分类多个标签
Android流式布局（搜索历史）
qq_43040588的博客
01-05 550
1.导依赖 implementation 'com.hyman:flowlayout-lib:1.1.2' 2.布局 &amp;amp;amp;lt;?xml version=&amp;amp;quot;1.0&amp;amp;quot; encoding=&amp;amp;quot;utf-8&amp;amp;quot;?&amp;amp;amp;gt; &amp;amp;amp;lt;LinearLayout xmlns:android
android 历史搜索布局,GitHub - Brookeryang/MultiFlowLayout: Android 流式布局FlowLayout(搜索历史),可多布局、点击删除、添加等操作，暂无...
weixin_42567752的博客
05-26 161
微信公众号使用方法将libray模块复制到项目中,或者直接在build.gradle中依赖:allprojects {repositories {maven { url 'https://jitpack.io' }}}dependencies {compile 'com.github.AnJiaoDe:MultiFlowLayout:V1.1.2'}注意：如果sync报错，是因为和com.andr...
FlowLableSearchHistory-master.zip
06-01
在Android开发中，瀑布流布局（也称为流式布局或者瀑布墙）是一种常见的视图展示方式，它通常用于展示图片、商品或者文章等信息，让用户在有限的屏幕空间内看到更多的内容。这种布局方式模拟了瀑布自上而下流动的...
Android模仿网易新闻页面源码(异步加载).rar
最新发布
06-11
此项目可能包含了多种布局，如线性布局（LinearLayout）、相对布局（RelativeLayout）和帧布局（FrameLayout），以及网格布局（GridLayout）或流式布局（FlowLayout）来模拟网易新闻的多列展示。此外，自定义视图...
玩乐族音乐播放器项目.zip
04-24
此外，自定义View和动画也是提升应用交互性的重要手段。 媒体播放技术是音乐播放器的核心。Android提供了MediaPlayer类和ExoPlayer库来处理音频流。MediaPlayer适合简单的播放需求，而ExoPlayer更加强大且灵活，...
E006550响应式美食甜品蛋糕网站模板.zip
12-12
响应式设计通常通过使用媒体查询、流式布局和弹性图片等技术实现，确保内容在不同设备上都能正确显示。 甜品蛋糕网站模板的核心特性可能包括： 1. **首页展示**：精心设计的首页通常会包含滑动图片轮播，展示店铺...
ios 搜索历史记录 不规则布局
07-20
前阵子做项目的时候，偶然用到不规则的历史记录列表，之前的处理方式一个是通过固定搜索文字大小，一行固定2个或三个，另一种则是类似百度搜索记录的方式那样，一行一行罗列显示，苦苦思索后从网上找到一个demo,优化了下效果，希望对大家有所帮助。
流式布局、热门标签搜索实现Demo
09-27
自定义流式布局，实现搜索历史及热门标签效果，参考鸿洋大神的讲解**************************************************************
Android流式布局实现历史搜索记录功能
08-30
最近在开发项目的时候，有一个需求是展示历史搜索记录 ，展示的样式是流式布局（就是根据内容自动换行）。接下来通过本文给大家分享android流式布局实现历史搜索记录功能，感兴趣的的小伙伴参考下
Android开发丶一个较为完善的搜索界面，包含了热门标签，清除输入框，搜索结果列表等功能
02-24
一个功能比较完善的搜索模块demo，在常规搜索的基础上，包含了热门标签，清除输入框，recyclerview+cardview列表等人性化的功能，欢迎下载
一个带有历史搜索记录的Demo
05-10
一个带有历史搜索记录的Demo
Android自定义View实现流式布局TextView
12-30
Android自定义View来实现一个流式布局效果的TextView。
自定义SearchView+关键字搜索
12-15
SearchView（可以进行关键字搜索，代码已设置为展开，解决部分机型展开后有两个搜索图标的问题，可以自定义编辑框内文字颜色，去掉底部下划线，去掉焦点，编辑框内容为空时不显示delete键，不为空时显示，delete键的图片可以自定义）
自定义View实现复杂的搜索控件~
lmy_xback的博客
01-02 530
xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:Myattr="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="ma
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值