Giter Site home page Giter Site logo

xyzinfo's Introduction

XyzInfo

  自定义Switch 和 Ruler控件

UI

Download Demo

1

###介绍

  xSwitch | xRuler
  --- | ---
  支持背与滑块颜色自定义          | 支持两种显示模式
  支持颜色过渡动画               | 支持上下两种刻度
  支持自定义圆角弧度             | 支持自定义指示器颜色大小
  支持自定义宽高比               |支持自定义刻度之间像素数目(间距)
  支持自定义滑块与背景大小比例     |支持自定义刻度线宽度
  支持自定义图片(建议灰色)以及大小 |支持自定义刻度基本单位(最小刻度单位)
  支持自定义滑动时间             |支持自定义起止范围
                              |支持自定义字体颜色大小
                              |支持自定义最小滑动速率
                              |支持自定义刻度与文字之间距离
                              |支持边界回弹动画
                              |支持Fling滑动
                              |支持设置默认值
                              |支持自定义设置回弹动画基本时间

xswitch使用

  因为使用ColorMatrix使灰色图片变成白色,所以icon需要为灰色图片
Gradle
   compile 'com.xyz.xswitch:xswitch:1.0.1'
属性介绍
属性 | 介绍 | 类型 | 默认 | 是否必须
--- | --- | --- | --- | ---
xRadian | 圆角弧度 | dimension | 45 |否
xASPECTRATIO | 宽高比 | float | 0.37f | 否
xASPEERRATIO | 滑块与背景宽度比 | float | 0.56f | 否
xIconWidth | 图片宽度 |dimension | 80 | 否
xIconHeight | 图片高度 | dimension | 80 | 否
xBackgroundFromColor | 背景起始颜色 | color |0xff443c6f | 否
xBackgroundToColor |背景终止颜色 | color | 0xffff5a73 | 否
xSliderFromColor | 滑块起始颜色 | color | 0xffff5a73 | 否
xSliderToColor |滑块终止颜色 | color | 0xff443c6f | 否
xChangedTime | 滑块滑动时间 | int | 300 | 否
xLeftIcon | 左侧图片 | reference | null | 是
xRightIcon | 右侧图片 | reference | null |是
代码
 ```
 XyzSwitch xSwitch =  (XyzSwitch) findViewById(R.id.xswitch);
 xSwitch.setOnXyzSwitchChangeListener(new XyzSwitch.XyzSwitchChange() {
        @Override
        public void changed(boolean isRight) {
            Toast.makeText(MainActivity.this,isRight?"男":"女",Toast.LENGTH_SHORT).show();
        }
    });
 
 ```
layout
  ```
  <com.xyz.xswitch.XyzSwitch
    android:id="@+id/xswitch"
    android:layout_width="200dp"
    android:layout_height="80dp"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="35dp"
    app:xIconHeight="40dp"
    app:xIconWidth="40dp"
    app:xLeftIcon="@mipmap/lady"
    app:xRadian="40dp"
    app:xChangedTime="100"
    app:xRightIcon="@mipmap/man" />
  ```

xRuler使用

Gradle
     compile 'com.xyz.xruler:xruler:1.0.3' 
属性介绍
属性 | 介绍 | 类型 | 默认 | 是否必须
--- | --- | --- | --- | ---
rBorderWidth | 边框宽度(指针模式下为指针宽度)| dimension | 8 | 否
rBorderColor | 边框颜色(指针模式下为指针颜色)| color | Color.BLUE | 否
rLineColor | 刻度线的颜色 | color | Color.WHITE | 否
rTrigonSize | 边框模式下三角形大小 | dimension | 20 | 否
rPixel | 最小刻度像素大小 | integer | 15 | 否
rStep | 刻度最小单位 | integer | 1 | 否
rLineWidth | 刻度线宽度 | dimension | 2 | 否
rTextSize | 刻度文字大小 | dimension | 30 | 否
rTextColor | 刻度文字颜色 | color | Color.WHITE | 否
rLineHeight | 刻度线高度 | dimension | 25 | 否
rLineToText | 刻度文字与刻度线距离 | dimension | 35 | 否
rBegin | 刻度尺范围开始值 | integer | 0 | 否
rEnd | 刻度尺范围结束值 | integer | 1000 | 否
rMinVelocity | 触发惯性滑动的最小速率 | integer | 500 | 否
rAnimTime | 回弹动画时间基准值 | integer | 300 | 否
rIndicateHeight | 指针高度差值(数值越大高度越小) | dimension | 0 | 否
rIsRect | 是否是边框模式 | boolean | true | 否
rIsTop | 刻度线是否在顶部 | boolean | true | 否
代码
  ```
   /**
     * 设置选中的条目
     */
    ruler1.setOnSelectItem(new XyzRuler.SelectItem() {
        @Override
        public int setSelectItem() {
            return 60;
        }
    });
    /**
     * 监听拖动时值得变化
     */
    ruler1.setOnRulerValueChangeListener(new XyzRuler.RulerValue() {
        @Override
        public void value(int value) {
            tv1.setText("体重\n"+value+"\nkg");
        }
    });
  ```
layout
  ```
  <com.xyz.xruler.XyzRuler
        android:id="@+id/ruler1"
        android:layout_width="242dp"
        android:layout_height="56dp"
        app:rAnimTime="100"
        app:rBegin="40"
        app:rBorderColor="#acF1ff"
        app:rBorderWidth="5dp"
        app:rEnd="300"
        app:rLineHeight="10dp"
        app:rLineWidth="3dp"
        app:rTextSize="10dp"
        app:rTrigonSize="20dp" />
  
  ```

LICENSE 开源协议

Apache License Version 2.0

xyzinfo's People

Contributors

zhangxuyang321 avatar

Watchers

James Cloos avatar  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.