GithubHelp home page GithubHelp logo

stacklabel's Introduction

Kongzue StackLabel

Kongzue StackLabel 是堆叠标签组件,适合快速完成需要堆叠标签的场景,例如“搜索历史”、“猜你喜欢”等功能。

Kongzue StackLabel Maven License Homepage

Demo预览图如下:

StackLabel

从 1.1.2 版本起,亦可实现多选效果:

StackLabel

Demo下载地址:https://fir.im/stacklabel

优势

  • 轻松易使用,快速创建,满足绝大多数堆叠标签使用场景。

使用方法

  1. 从 Maven 仓库或 jCenter 引入: Maven仓库:
<dependency>
  <groupId>com.kongzue.stacklabel</groupId>
  <artifactId>stacklabelview</artifactId>
  <version>1.1.2</version>
  <type>pom</type>
</dependency>

Gradle: 在dependencies{}中添加引用:

implementation 'com.kongzue.stacklabel:stacklabelview:1.1.2'
  1. 从XML布局文件创建:
<com.kongzue.stacklabelview.StackLabel xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/stackLabelView"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    app:textColor="#e6000000"
    app:itemMargin="4dp"
    app:paddingHorizontal="12dp"
    app:paddingVertical="8dp"
    app:deleteButton="false"
    app:textSize="12dp"
    />

其中支持的自定义属性解释如下:

字段 含义 类型
app:textColor 标签文本颜色 ColorInt
app:itemMargin 标签外边距 int(像素)
app:paddingHorizontal 标签内左右间距 int(像素)
app:paddingVertical 标签内上下间距 int(像素)
app:deleteButton 默认是否显示删除按钮 boolean
app:textSize 标签文本字号 int(像素)
app:deleteButtonImage 删除图标 resId(资源id,例如@mipmap/img_delete)
app:labelBackground Label背景图 resId(资源id,例如@mipmap/img_delete)
app:selectMode 选择模式开关 boolean
app:selectBackground 选中的Label背景图 resId(资源id,例如@drawable/rect_label_bkg_select_normal)
app:maxSelectNum 最大选择数量 int
  1. 添加内容:

StackLabel 目前仅支持纯文本标签表现,您可以将要显示的 String 字符串文本添加为 List 集合设置给 StackLabel,就会呈现想要的内容,范例如下:

labels = new ArrayList<>();
labels.add("花哪儿记账");
labels.add("给未来写封信");
labels.add("密码键盘");
labels.add("抬手唤醒");
labels.add("Cutisan");
labels.add("记-专注创作");
labels.add("我也不知道我是谁");
labels.add("崩崩崩");
labels.add("Android");
labels.add("开发");
stackLabelView.setLabels(labels);

要实现标签点击,则需要设置点击监听器:

stackLabelView.setOnLabelClickListener(new OnLabelClickListener() {
    @Override
    public void onClick(int index, View v, String s) {
        Toast.makeText(MainActivity.this, "点击了:" + s, Toast.LENGTH_SHORT).show();
    }
});

删除模式

您可以在代码中使用 setDeleteButton(boolean) 控制 StackLabel 删除模式的开关:

stackLabelView.setDeleteButton(ture);

当 DeleteButton 开启时,点击任何标签即应删除该标签:

stackLabelView.setOnLabelClickListener(new OnLabelClickListener() {
    @Override
    public void onClick(int index, View v, String s) {
        if (stackLabelView.isDeleteButton()) {
            //删除并重新设置标签
            labels.remove(index);
            stackLabelView.setLabels(labels);
        } else {
            Toast.makeText(MainActivity.this, "点击了:" + s, Toast.LENGTH_SHORT).show();
        }
    }
});

选择模式

从 1.1.2 版本起,新增了选择模式。

开启选择模式可以从 XML 布局中加入属性设置:

app:selectMode="true"

也可以从代码中开启:

stackLabelView.setSelectMode(true);

通过属性 maxSelectNum 可以设置最大可选数量,当值为 <=0 时不生效。

当属性 maxSelectNum = 1 时为单选模式,选择其他 Label 会自动取消之前选中的 Label。

当属性 maxSelectNum > 1 时为多选模式,选择数量大于 maxSelectNum 值时则无法选中更多的 Label。

重复点击已选中的 Label 则会取消选中状态。

选中的角标集合可以通过以下方式获取:

stackLabelView.setOnLabelClickListener(new OnLabelClickListener() {
    @Override
    public void onClick(int index, View v, String s) {
        if (stackLabelView.isSelectMode()) {
            for (int i : stackLabelView.getSelectIndexList()) {     //获取已选定集合的角标,也可通过stackLabelView.getSelectIndexArray()获取数组形式
                Log.i(">>>", "select: " + i);
            }
        }
    }
});

以上,即 StackLabel 的基本使用流程。

开源协议

Copyright Kongzue StackLabel

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

更新日志

v1.1.2:

  • 新增了选择模式;

v1.1.1:

  • 增加了判空避免空指针问题;

v1.1.0:

  • 新增属性 deleteButtonImage 和 labelBackground 设置属性;

v1.0:

  • 全新发布;

stacklabel's People

Contributors

kongzue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.