All Projects → kongpf8848 → ViewWorld

kongpf8848 / ViewWorld

Licence: other
自定义View合集,展示各种自定义View/控件。项目包含了自定义Banner轮播图控件,自定义验证码输入框,自定义TabLayout等控件,持续更新中😉😉😉

Programming Languages

java
68154 projects - #9 most used programming language
kotlin
9241 projects

Projects that are alternatives of or similar to ViewWorld

Bannerlayout
Support unlimited picture rotation BannerLayout, the minimum implementation of the code banner
Stars: ✭ 92 (-2.13%)
Mutual labels:  view, banner, viewpager
Banner
🔥🔥ViewPager,ViewPager2无限轮播功能。自定义Indicator,支持一屏三页,支持仿魅族banner效果。极其简单的使用方式
Stars: ✭ 393 (+318.09%)
Mutual labels:  view, banner, viewpager
Viewpagerhelper
这个一个 viewpager/viewpager2工具类,能够帮你快速实现导航栏轮播图,app引导页,viewpager/viewpager2 + fragment;内置多种tab指示器,让你告别 viewpager 的繁琐操作,专注逻辑功能
Stars: ✭ 957 (+918.09%)
Mutual labels:  banner, viewpager, tablayout
FastBanner
🔥快速轮播图,支持自定义布局和使用自有图片显示组件
Stars: ✭ 27 (-71.28%)
Mutual labels:  view, banner, viewpager
android-prefix-suffix-edit-text
EditText with support for non editable prefix and suffix.
Stars: ✭ 36 (-61.7%)
Mutual labels:  view, edittext
DynamicViewPagerDemo
ViewPager单屏显示多页面,动画效果
Stars: ✭ 49 (-47.87%)
Mutual labels:  view, viewpager
VerifyBlocksView
Android view for providing blocks (Edit Texts) to achieve verification process.
Stars: ✭ 28 (-70.21%)
Mutual labels:  view, edittext
Bladeone
The standalone version Blade Template Engine without Laravel in a single php file and without dependencies
Stars: ✭ 411 (+337.23%)
Mutual labels:  view, loop
Revealbanner
🚀🚀🚀 滑动特效banner
Stars: ✭ 209 (+122.34%)
Mutual labels:  view, banner
Discretescrollview
A scrollable list of items that centers the current element and provides easy-to-use APIs for cool item animations.
Stars: ✭ 5,533 (+5786.17%)
Mutual labels:  view, viewpager
Viewtooltip
A fluent tooltip for Android
Stars: ✭ 1,029 (+994.68%)
Mutual labels:  view, edittext
Androidanimationexercise
Android 动画各种实现,包括帧动画、补间动画和属性动画的总结分享
Stars: ✭ 1,254 (+1234.04%)
Mutual labels:  view, viewpager
Hyena
鬣狗快速开发库(2018年6月停止维护)
Stars: ✭ 21 (-77.66%)
Mutual labels:  view, edittext
IndicatorView
IndicatorView Library For Android
Stars: ✭ 41 (-56.38%)
Mutual labels:  view, viewpager
Bannerviewpager
🚀 An awesome banner view for Android,Based on ViewPager2. 这可能是全网最好用的ViewPager轮播图。简单、高效,一行代码实现循环轮播,一屏三页任意变,指示器样式任你挑。
Stars: ✭ 2,603 (+2669.15%)
Mutual labels:  banner, viewpager
Banner
🔥🔥🔥Banner 2.0 来了!Android广告图片轮播控件,内部基于ViewPager2实现,Indicator和UI都可以自定义。
Stars: ✭ 11,682 (+12327.66%)
Mutual labels:  banner, viewpager
Sharpview
安卓带有尖角气泡的控件(TextView,ImageView,EditText,Layout),支持渐变色,圆角等自定义属性
Stars: ✭ 137 (+45.74%)
Mutual labels:  view, edittext
Loopviewpagerlayout
☺无限轮播ViewPagerLayout 广告栏 banner 多种滑动的样式 使用API简单明了
Stars: ✭ 100 (+6.38%)
Mutual labels:  banner, viewpager
Xbanner
🔥【图片轮播】支持图片无限轮播,支持AndroidX、自定义指示点、显示提示文字、切换动画、自定义布局,一屏显示多个等功能
Stars: ✭ 1,734 (+1744.68%)
Mutual labels:  banner, viewpager
Adaptablebottomnavigation
A simpler way for implementing the Bottom Navigation View on Android
Stars: ✭ 844 (+797.87%)
Mutual labels:  view, viewpager

ViewWorld

自定义View合集,开启自定义View的神奇之旅.

TKBanner

自定义无限轮播滚动控件,可高度自定义,简单实用

亮点

  • 支持无限轮播,支持自定义UI和指示符,高度解耦
  • 默认支持圆点和数字指示符

截图

仿知乎日报APP轮播图 仿品玩APP轮播图 仿虎嗅APP轮播图
仿知乎日报APP轮播图 仿品玩APP轮播图 仿虎嗅APP轮播图

相关属性

属性名称 类型 说明
banner_autoPlayAble boolean 是否自动轮播,默认为true
banner_autoPlayInterval integer 轮播时间间隔,默认为3000毫秒
banner_showIndicator boolean 是否显示指示符,默认为true,如设置为false,则使用自定义的指示符
banner_pointContainerLeftRightPadding dimension 底部圆点指示符容器左右Padding
banner_pointContainerTopBottomPadding dimension 底部圆点指示符容器上下Padding
banner_pointLeftRightMargin dimension 圆点指示符左右Margin
banner_pointTopBottomMargin dimension 圆点指示符上下Margin
banner_pointDrawable reference 圆点指示符对应的drawable Id
banner_isNumberIndicator boolean 是否为数字指示符,默认为false
banner_numberIndicatorTextColor color 数字指示符文本颜色
banner_numberIndicatorTextSize dimension 数字指示符文本字体大小
banner_numberIndicatorBackground reference 数字指示符背景

VerificationCodeEditText

亮点

  • 支持自定义验证码背景,可根据需求自定义每个验证码背景,高度解耦
  • 支持自定义光标颜色和宽度,支持光标隐藏或闪烁

截图

直线形验证码 方形验证码
image image

相关属性

属性名称 类型 说明
codeLength integer 验证码总个数,默认为6
codeWidth dimension 每个验证码的宽度,默认为150px,高度和宽度相同,仅当android:layout_width="wrap_parent"时起作用,当 android:layout_width="match_parent"时每一个验证码的宽度由动态计算获取,其值为(控件总宽度-(验证码总个数-1)*验证码之间的间隔)/验证码总个数
codeMargin dimension 验证码之间的间隔,默认为20px
codeBackground reference 每个验证码的背景,必须项
codeCursorVisible boolean 是否显示光标,默认为false,即不显示光标
codeCursorDrawable reference 光标背景,仅当codeCursorVisible为true起作用,默认为颜色值为colorAccent,宽度为1dp的GradientDrawable

使用

  • 直线形验证码
<com.github.kongpf8848.viewworld.views.VerificationCodeEditText
    android:id="@+id/et_verification_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="40dp"
    android:cursorVisible="true"
    android:inputType="number"
    android:singleLine="true"
    android:textColor="@color/black"
    android:textSize="40sp"
    app:codeBackground="@drawable/bg_code_edit_line"
    app:codeCursorDrawable="@drawable/bg_code_edit_cursor"
    app:codeCursorVisible="true"
    app:codeLength="4"
    app:codeMargin="10dp" />

app:codeBackground定义每个验证码的背景,其中android:state_selected="true"为选中状态下的背景,如:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true">
      <layer-list>
          <item android:gravity="bottom">
              <shape>
                  <solid android:color="#FFDE00" />
                  <size android:height="2dp" />
              </shape>
          </item>
      </layer-list>
  </item>
  <item>
      <layer-list>
          <item android:gravity="bottom">
              <shape>
                  <solid android:color="#f4f4f4" />
                  <size android:height="2dp" />
              </shape>
          </item>
      </layer-list>
  </item>
</selector>

app:codeCursorDrawable定义光标颜色,如:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#FFDE00" />
  <size android:width="2dp" />
</shape>
  • 方形验证码
<com.github.kongpf8848.viewworld.views.VerificationCodeEditText
   android:id="@+id/et_verification_code"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginStart="40dp"
   android:layout_marginEnd="40dp"
   android:layout_marginTop="50dp"
   android:inputType="number"
   android:singleLine="true"
   android:textSize="20sp"
   android:textColor="@color/black"
   app:codeBackground="@drawable/bg_code_edit_square"
   app:codeLength="6"
   app:codeMargin="10dp"
   app:codeCursorVisible="true"
   app:codeCursorDrawable="@drawable/bg_code_edit_cursor"
   />

app:codeBackground定义每个验证码的背景,其中android:state_selected="true"为选中状态下的背景,如:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="true">
       <shape>
           <stroke android:width="2dp" android:color="#FFFB9C00" />
           <corners android:radius="4dp" />
       </shape>
   </item>
   <item>
       <shape>
           <stroke android:width="2dp" android:color="#EEEEEE" />
           <corners android:radius="4dp" />
       </shape>
   </item>
</selector>

app:codeCursorDrawable定义光标颜色,如:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#FFDE00" />
  <size android:width="2dp" />
</shape>

TabLayoutEx

亮点

  • 基于原生TabLayout源码修改而来,支持原TabLayout所有功能,用法也基本保持一致,坚定而固执的认为原生的往往是最好的😄
  • 取消原生TabLayout默认将文字转换为大写的属性
  • 添加选中字体变大和加粗效果
  • 添加Tab圆角背景动画,支持背景越界回弹效果
  • 添加指示符跳跃动画

截图

image

相关属性

TabLayout原有的属性基本都支持,此处仅列出新添加的属性

属性名称 类型 说明
tabUnSelectedTextSize dimension 未选中字体大小
tabSelectedTextSize dimension 选中字体大小
tabBoldWhenSelected boolean 选中字体是否加粗
tabBackgroundIsCorner boolean 是否使用圆角背景
tabSlideAnimType enum 跳跃动画样式,none表示不启用跳跃动画,half_glue表示启用跳跃动画1,glue表示启用跳跃动画2

TabLayoutEx和原生TabLayout功能相同但名字有修改的属性

  • tabMode改为tabModeEx
  • tabGravity改为tabGravityEx
  • tabIconTintMode改为tabIconTintModeEx
  • tabIndicatorGravity改为tabIndicatorGravityEx

用法

<com.github.kongpf8848.viewworld.views.TabLayoutEx
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="10dp"
    android:background="@color/white"
    <!--每个TabView的左边距-->
    app:tabPaddingStart="10dp"
    <!--每个TabView的右边距-->
    app:tabPaddingEnd="10dp"
    <!--SlidingTabIndicator的左边距,其值=app:tabPaddingStart+实际的左边距-->
    app:tabContentStart="25dp"
    <!--tab模式,scrollable或fixed-->
    app:tabModeEx="scrollable"
    <!--指示符和TabView宽度是否相同-->
    app:tabIndicatorFullWidth="true"
    <!--指示符高度-->
    app:tabIndicatorHeight="32dp"
    <!--未选中文字颜色-->
    app:tabTextColor="#999999"
    <!--选中文字颜色-->
    app:tabSelectedTextColor="@color/black"
    <!--点击波纹颜色,透明即去除波纹-->
    app:tabRippleColor="@color/transparent"
    <!--未选中文字大小-->
    app:tabUnSelectedTextSize="14sp"
    <!--选中文字大小-->
    app:tabSelectedTextSize="16sp"
    <!--是否为圆角背景-->
    app:tabBackgroundIsCorner="true"
    <!--选中字体是否加粗-->
    app:tabBoldWhenSelected="true"
    />
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].