我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Android自定义View实现标签流效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Android自定义View实现标签流效果

本文实例为大家分享了Android自定义View实现标签流效果的具体代码,供大家参考,具体内容如下

一、概述

Android自定义View实现标签流效果,一行放不下时会自动换行,用户可以自己定义单个标签的样式,可以选中和取消,可以监听单个标签的点击事件,功能还算强大,可以满足大部分开发需求,值得推荐,效果图如下:

二、实现代码

1.自定义View

定义属性文件

<declare-styleable name="FlowTagView">
        <attr name="lineSpacing" format="dimension" />
        <attr name="tagSpacing" format="dimension" />
        <!-- 是否是固定布局 -->
        <attr name="isFixed" format="boolean" />
        <attr name="columnSize" format="integer" />
</declare-styleable>

FlowTagConfig.java

package com.czhappy.effectdemo.flowtag;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;

import com.czhappy.effectdemo.R;


public class FlowTagConfig {

    private static final int DEFAULT_LINE_SPACING = 5;//默认行间距
    private static final int DEFAULT_TAG_SPACING = 10;//各个标签之间的默认距离
    private static final int DEFAULT_FIXED_COLUMN_SIZE = 3; //默认列数

    private int lineSpacing;
    private int tagSpacing;
    private int columnSize;
    private boolean isFixed;

    public FlowTagConfig(Context context,AttributeSet attrs){
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FlowTagView);
        try {
            lineSpacing = a.getDimensionPixelSize(R.styleable.FlowTagView_lineSpacing, DEFAULT_LINE_SPACING);
            tagSpacing = a.getDimensionPixelSize(R.styleable.FlowTagView_tagSpacing, DEFAULT_TAG_SPACING);
            columnSize = a.getInteger(R.styleable.FlowTagView_columnSize, DEFAULT_FIXED_COLUMN_SIZE);
            isFixed = a.getBoolean(R.styleable.FlowTagView_isFixed,false);
        } finally {
            a.recycle();
        }
    }

    public int getLineSpacing() {
        return lineSpacing;
    }

    public void setLineSpacing(int lineSpacing) {
        this.lineSpacing = lineSpacing;
    }

    public int getTagSpacing() {
        return tagSpacing;
    }

    public void setTagSpacing(int tagSpacing) {
        this.tagSpacing = tagSpacing;
    }

    public int getColumnSize() {
        return columnSize;
    }

    public void setColumnSize(int columnSize) {
        this.columnSize = columnSize;
    }

    public boolean isFixed() {
        return isFixed;
    }

    public void setIsFixed(boolean isFixed) {
        this.isFixed = isFixed;
    }
}

FlowTagView.java

package com.czhappy.effectdemo.flowtag;

import android.content.Context;
import android.database.DataSetObserver;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;


public class FlowTagView extends ViewGroup {

    private int mLineSpacing;//行间距
    private int mTagSpacing;//各个标签之间的距离
    private BaseAdapter mAdapter;
    private TagItemClickListener mListener;
    private DataChangeObserver mObserver;

    public FlowTagView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public FlowTagView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public FlowTagView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        //获取属性
        FlowTagConfig config = new FlowTagConfig(context, attrs);
        mLineSpacing = config.getLineSpacing();
        mTagSpacing = config.getTagSpacing();
    }

    private void drawLayout() {
        if (mAdapter == null || mAdapter.getCount() == 0) {
            return;
        }

        this.removeAllViews();

        for (int i = 0; i < mAdapter.getCount(); i++) {
            View view = mAdapter.getView(i,null,null);
            final int position = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.itemClick(position);
                    }
                }
            });
            this.addView(view);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wantHeight = 0;
        int wantWidth = resolveSize(0, widthMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        //固定列的数量所需要的代码
        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            LayoutParams params = childView.getLayoutParams();
            childView.measure(
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, params.width),
                    getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, params.height)
            );
            //获取单个tag的宽高
            int childHeight = childView.getMeasuredHeight();
            int childWidth = childView.getMeasuredWidth();
            lineHeight = Math.max(childHeight, lineHeight);

            //超过长度的新起一行
            if (childLeft + childWidth + paddingRight > wantWidth) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + childHeight;
                lineHeight = childHeight;
            }

            childLeft += childWidth + mTagSpacing;
        }
        wantHeight += childTop + lineHeight + paddingBottom;
        setMeasuredDimension(wantWidth, resolveSize(wantHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //固定列的数量所需要的代码

        int width = r - l;
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() == View.GONE) {
                continue;
            }
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > width) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + lineHeight;
                lineHeight = childHeight;
            }

            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
            childLeft += childWidth + mTagSpacing;
        }
    }

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

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(this.getContext(), attrs);
    }

    public void setAdapter(BaseAdapter adapter){
        if (mAdapter == null){
            mAdapter = adapter;
            if (mObserver == null){
                mObserver = new DataChangeObserver();
                mAdapter.registerDataSetObserver(mObserver);
            }
            drawLayout();
        }
    }

    public void setItemClickListener(TagItemClickListener mListener) {
        this.mListener = mListener;
    }

    
    public interface TagItemClickListener {
        void itemClick(int position);
    }

    class DataChangeObserver extends DataSetObserver {
        @Override
        public void onChanged() {
            FlowTagView.this.drawLayout();
        }

        @Override
        public void onInvalidated() {
            super.onInvalidated();
        }
    }
}

2.测试类

FlowTagActivity.java

package com.czhappy.effectdemo.activity;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.adapter.EvaluateAdapter;
import com.czhappy.effectdemo.flowtag.FlowTagView;
import com.czhappy.effectdemo.model.Evaluate;

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


public class FlowTagActivity extends AppCompatActivity {


    private FlowTagView mContainer;
    private EvaluateAdapter adapter;
    private List<Evaluate> chooseList = new ArrayList<Evaluate>();

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

        initView();
        initData();
    }

    private void initData() {
        List<Evaluate> list = new ArrayList();
        Evaluate e1 = new Evaluate("热情", "1");
        Evaluate e2 = new Evaluate("服务周到", "2");
        Evaluate e3 = new Evaluate("一般", "3");
        Evaluate e4 = new Evaluate("技术活杠杠的", "4");
        Evaluate e5 = new Evaluate("专业精通", "5");
        Evaluate e6 = new Evaluate("只会吹牛逼", "6");
        Evaluate e7 = new Evaluate("地下第一仅此一家", "7");
        list.add(e1);
        list.add(e2);
        list.add(e3);
        list.add(e4);
        list.add(e5);
        list.add(e6);
        list.add(e7);
        adapter.setItems(list);

    }

    private void initView() {
        mContainer = (FlowTagView) this.findViewById(R.id.container);
        adapter = new EvaluateAdapter(this);
        mContainer.setAdapter(adapter);
        mContainer.setItemClickListener(new FlowTagView.TagItemClickListener() {
            @Override
            public void itemClick(int position) {
                Evaluate e = (Evaluate) adapter.getItem(position);
                e.is_choosed = !e.is_choosed;
                if(e.is_choosed){
                    chooseList.add(e);
                }else{
                    chooseList.remove(e);
                }
                adapter.notifyDataSetChanged();
            }
        });
    }
}

EvaluateAdapter.java

package com.czhappy.effectdemo.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.model.Evaluate;

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



public class EvaluateAdapter extends BaseAdapter {

    private Context context;
    private LayoutInflater mInflater;
    private List<Evaluate> list;

    public EvaluateAdapter(Context context) {
        this.context = context;
        this.mInflater = LayoutInflater.from(context);
        this.list =  new ArrayList<Evaluate>();

    }

    public List<Evaluate> getList(){
        return list;
    }

    public void setItems(List<Evaluate> list){
        this.list = list;
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            holder = new ViewHolder();
            convertView = mInflater.inflate(
                    R.layout.evaluate_grid_item, null);
            holder.evaluate_tv = (TextView)convertView.findViewById(R.id.evaluate_tv);
            convertView.setTag(holder);

        } else {

            holder = (ViewHolder) convertView.getTag();
        }

        final Evaluate ee = (Evaluate) getItem(position);
        holder.evaluate_tv.setText(ee.getName());
        if(ee.is_choosed){
            holder.evaluate_tv.setBackgroundResource(R.drawable.bg_round_corner_line_orange);
        }else{
            holder.evaluate_tv.setBackgroundResource(R.drawable.bg_round_corner_line_gray);
        }
        return convertView;
    }

    private final class ViewHolder {
        private TextView evaluate_tv;
    }
}

布局文件

<?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"
    android:orientation="vertical">

    <com.czhappy.effectdemo.flowtag.FlowTagView
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:tagSpacing="10dp"
        app:lineSpacing="10dp"/>

</LinearLayout>

bg_round_corner_line_orange.xml

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

    <solid android:color="#ffffff" />

    <corners android:radius="5dp" />

    <stroke android:width="0.5dp"
        android:color="#FF6700"/>
</shape>

bg_round_corner_line_gray.xml

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

    <solid android:color="#ffffff" />

    <corners android:radius="5dp" />

    <stroke android:width="0.5dp"
        android:color="#cccccc"/>
</shape>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Android自定义View实现标签流效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Android中怎么自定义View实现标签流效果

本篇内容主要讲解“Android中怎么自定义View实现标签流效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Android中怎么自定义View实现标签流效果”吧!一、概述Android自定义
2023-06-29

Android自定义ViewGroup实现标签浮动效果

前面在学习鸿洋大神的一些自定义的View文章,看到了自定义ViewGroup实现浮动标签,初步看了下他的思路以及结合自己的思路完成了自己的浮动标签的自定义ViewGroup。目前实现的可以动态添加标签、可点击。效果图如下:1、思路 首先在
2022-06-06

android自定义view实现钟表效果

本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下 先看效果图:自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用canvas去绘制出一个钟表 当然绘制之前我们必须进行测量(重写on
2022-06-06

Android自定义View实现折线图效果

下面就是结果图(每种状态用一个表情图片表示):一、主页面的布局文件如下:
2022-06-06

Android自定义Animation实现View摇摆效果

使用自定义Animation,实现View的左右摇摆效果,如图所示:代码很简单,直接上源码 activity_maini.xml布局文件:
2022-06-06

Android自定义View实现水波纹效果

介绍:水波纹散开效果的控件在 App 里面还是比较常见的,例如 网易云音乐歌曲识别,附近搜索场景。看下实现的效果:实现思路: 先将最大圆半径与最小圆半径间距分成几等份,从内到外,Paint 透明度依次递减,绘制出同心圆,然后不断的改变这些同
2023-05-30

Android自定义View实现打字机效果

一、先来看看效果演示二、实现原理:这个其实不难实现,通过一个定时器不断调用TextView的setText就行了,在setText的时候播放打字的音效。 具体代码如下:import java.util.Timer; import java.
2022-06-06

Android中自定义view实现侧滑效果

效果图:看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来。但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高仿的。 知识点: 1、ViewDragHelper 的用法; 2、
2022-06-06

Android自定义View实现圆环交替效果

下面请先看效果图:看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制。 首先是我们的attrs文件:
2022-06-06

Android自定义View实现闪耀字体效果

本文实例为大家分享了闪耀字体效果的具体代码,供大家参考,具体内容如下import android.content.Context; import android.graphics.Canvas; import android.graphic
2022-06-06

Android自定义View实现动画效果详解

这篇文章主要为大家详细介绍了Android如何通过自定义View实现动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-02

Android自定义View控件实现刷新效果

三种得到LinearInflater的方法 a. LayoutInflater inflater = getLayoutInflater(); b. LayoutInflater localinflater = (LayoutInflate
2022-06-06

Android自定义View实现水面上涨效果

实现效果如下:实现思路:1、如何实现圆中水面上涨效果:利用Paint的setXfermode属性为PorterDuff.Mode.SRC_IN画出进度所在的矩形与圆的交集实现 2、如何水波纹效果:利用贝塞尔曲线,动态改变波峰值,实现“随着进
2022-06-06

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录