├── app ├── .gitignore ├── src │ ├── main │ │ ├── res │ │ │ ├── values │ │ │ │ ├── strings.xml │ │ │ │ ├── colors.xml │ │ │ │ ├── dimens.xml │ │ │ │ ├── attrs.xml │ │ │ │ └── styles.xml │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ └── layout │ │ │ │ └── activity_main.xml │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── ch │ │ │ └── custom │ │ │ ├── MainActivity.java │ │ │ └── view │ │ │ └── RangeBarView.java │ ├── test │ │ └── java │ │ │ └── com │ │ │ └── ch │ │ │ └── custom │ │ │ └── ExampleUnitTest.java │ └── androidTest │ │ └── java │ │ └── com │ │ └── ch │ │ └── custom │ │ └── ExampleInstrumentedTest.java ├── proguard-rules.pro └── build.gradle ├── settings.gradle ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── .idea ├── caches │ └── build_file_checksums.ser ├── vcs.xml ├── modules.xml ├── runConfigurations.xml ├── gradle.xml ├── misc.xml └── codeStyles │ └── Project.xml ├── .gitignore ├── gradle.properties ├── gradlew.bat ├── gradlew └── README.md /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RangeBar 3 | 4 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /.idea/caches/build_file_checksums.ser: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/.idea/caches/build_file_checksums.ser -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smileCH/RangeBar/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | .externalNativeBuild 10 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Sep 17 10:52:41 CST 2018 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip 7 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/src/test/java/com/ch/custom/ExampleUnitTest.java: -------------------------------------------------------------------------------- 1 | package com.ch.custom; 2 | 3 | import org.junit.Test; 4 | 5 | import static org.junit.Assert.*; 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * @see Testing documentation 11 | */ 12 | public class ExampleUnitTest { 13 | @Test 14 | public void addition_isCorrect() throws Exception { 15 | assertEquals(4, 2 + 2); 16 | } 17 | } -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | #333333 8 | #275D9D 9 | #CDCDCD 10 | #ffffff 11 | #D10773 12 | #4499FF 13 | 14 | #99000000 15 | 16 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16sp 4 | 5dp 5 | 10dp 6 | 100dp 7 | 20dp 8 | 2dp 9 | 10dp 10 | 200dp 11 | 50dp 12 | 12sp 13 | 5dp 14 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | org.gradle.jvmargs=-Xmx1536m 13 | 14 | # When configured, Gradle will run in incubating parallel mode. 15 | # This option should only be used with decoupled projects. More details, visit 16 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 17 | # org.gradle.parallel=true 18 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/androidTest/java/com/ch/custom/ExampleInstrumentedTest.java: -------------------------------------------------------------------------------- 1 | package com.ch.custom; 2 | 3 | import android.content.Context; 4 | import android.support.test.InstrumentationRegistry; 5 | import android.support.test.runner.AndroidJUnit4; 6 | 7 | import org.junit.Test; 8 | import org.junit.runner.RunWith; 9 | 10 | import static org.junit.Assert.*; 11 | 12 | /** 13 | * Instrumentation test, which will execute on an Android device. 14 | * 15 | * @see Testing documentation 16 | */ 17 | @RunWith(AndroidJUnit4.class) 18 | public class ExampleInstrumentedTest { 19 | @Test 20 | public void useAppContext() throws Exception { 21 | // Context of the app under test. 22 | Context appContext = InstrumentationRegistry.getTargetContext(); 23 | 24 | assertEquals("com.ch.custom", appContext.getPackageName()); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in D:\sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Uncomment this to preserve the line number information for 20 | # debugging stack traces. 21 | #-keepattributes SourceFile,LineNumberTable 22 | 23 | # If you keep the line number information, uncomment this to 24 | # hide the original source file name. 25 | #-renamesourcefileattribute SourceFile 26 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 25 5 | buildToolsVersion "25.0.2" 6 | defaultConfig { 7 | applicationId "com.ch.custom" 8 | minSdkVersion 15 9 | targetSdkVersion 25 10 | versionCode 1 11 | versionName "1.0" 12 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { 25 | exclude group: 'com.android.support', module: 'support-annotations' 26 | }) 27 | compile 'com.android.support:appcompat-v7:25.3.1' 28 | compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' 29 | testCompile 'junit:junit:4.12' 30 | } 31 | -------------------------------------------------------------------------------- /app/src/main/res/values/attrs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 27 | 28 | 29 | 30 | 31 | 32 | 34 | -------------------------------------------------------------------------------- /app/src/main/java/com/ch/custom/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.ch.custom; 2 | 3 | import android.support.v7.app.AppCompatActivity; 4 | import android.os.Bundle; 5 | import android.view.View; 6 | import android.widget.TextView; 7 | 8 | import com.ch.custom.view.RangeBarView; 9 | 10 | public class MainActivity extends AppCompatActivity { 11 | 12 | private TextView tvLeftValue, tvRightValue, tvChangeValue; 13 | private RangeBarView rangeBarView; 14 | 15 | @Override 16 | protected void onCreate(Bundle savedInstanceState) { 17 | super.onCreate(savedInstanceState); 18 | setContentView(R.layout.activity_main); 19 | 20 | tvLeftValue = (TextView) findViewById(R.id.left_value_tv); 21 | tvRightValue = (TextView) findViewById(R.id.right_value_tv); 22 | tvChangeValue = (TextView) findViewById(R.id.change_coordinate_by_value_tv); 23 | rangeBarView = (RangeBarView) findViewById(R.id.view_range_bar); 24 | 25 | int minValue = 0; 26 | int maxValue = 7000; 27 | int sliceValue = 1000; 28 | tvLeftValue.setText(minValue+""); 29 | tvRightValue.setText(maxValue+""); 30 | rangeBarView.setDatas(minValue, maxValue, sliceValue, new RangeBarView.OnMoveValueListener() { 31 | @Override 32 | public void onMoveValue(int leftValue, int rightValue) { 33 | tvLeftValue.setText("左边值为：" + leftValue + "--> "+leftValue); 34 | tvRightValue.setText("右边值为：" + rightValue + "--> "+rightValue); 35 | } 36 | }); 37 | 38 | 39 | tvChangeValue.setOnClickListener(new View.OnClickListener() { 40 | @Override 41 | public void onClick(View v) { 42 | rangeBarView.setCircleMoveCoordinateByValue(3000, 6000); 43 | } 44 | }); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 17 | 25 | 32 | 33 | 34 | 35 | 52 | 53 | 54 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> $.*$$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 在下的简书地址：[https://www.jianshu.com/u/22e84d1967f4](https://www.jianshu.com/u/22e84d1967f4) 2 | 3 | 项目中的酒店模块有个双向滑动的价格选择器控件，感觉不是很满意，所以就趁着刚发完版本这段空闲时间自己重新自定义了一个，效果和瓜子二手车中的价格选择器有点相似，啰嗦了半天，客官消消气，小的这就上图：![range_price.gif](https://upload-images.jianshu.io/upload_images/11695905-19ef4b260650c2ea.gif?imageMogr2/auto-orient/strip)从效果图上可以大致发现，此控件的一些**特点** 4 | 1、可以灵活设置步长值，开发者只需要传入最小值、最大值以及每一步代表的数值即可 5 | 2、当滑动距离小于步长距离的一半时松开会自动回弹到上一个位置处，相反则会自动回弹到下一个位置处 6 | 3、当两圆不在两极端位置时（即：两圆在起始位置和终点位置之间），当滑动左边圆圈靠近到右边圆时，继续右滑则左边圆位于之前右边圆的位置不再动，而右边圆则会继续向右边滑动；滑动右边圆时同理 7 | 4、当滑动左边圆到达最右边圆的终点位置时再向左滑动，右边圆不动，左边圆继续向左滑动，右边圆情况同理 8 | 5、允许两圆相重合，重合时则代表的数值相同 9 | 这样说可能还是不太好理解，我们把每个圆用不同的颜色来区分开，如下图所示![range_bar.gif](https://upload-images.jianshu.io/upload_images/11695905-5b60363df770c543.gif?imageMogr2/auto-orient/strip)这样再看是不是很直观了 10 | 之前对于自定义View也写了很多文章了，如果有兴趣的话可以到我的[CSDN博客](https://blog.csdn.net/xiaxiazaizai01)中去了解下，其实一般的自定义控件都需要这几步，**首先**，对需求仔细研究思考并且在自己的本子上画画草图进行结构分析(很有用)，**然后**就是自定义属性了，假如你打算开源的话，那么自定义属性是必不可少的，这样便于使用者根据自己需要进行灵活设置，**接着**就是测量了，确定控件的宽高，**紧接着**就可以进行绘制了，当然了如果是继承ViewGroup的话则还需要去确定子View的位置，如果涉及到手势滑动等操作，**最后**还需要对手势滑动事件进行一系列的处理等等。当然了，这只是一个大致的步骤，因人而异吧，那么我们就按这个大致的步骤一点点的分析吧 11 | #### 自定义属性 12 | ``` 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ``` 37 | 属性有点多哈，具体的就不再详细说了，对着上面的效果图再加上在下这拙劣的英文相信大家都能见（委）文（屈）识（各）意（位）了。![淡淡的忧伤.png](https://upload-images.jianshu.io/upload_images/11695905-5987ecd9023205ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)接着我们看下如何去获取这些自定义的属性 38 | ``` 39 | public RangeBarView(Context context) { 40 | this(context, null); 41 | } 42 | 43 | public RangeBarView(Context context, @Nullable AttributeSet attrs) { 44 | this(context, attrs, 0); 45 | } 46 | 47 | public RangeBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 48 | super(context, attrs, defStyleAttr); 49 | //初始化属性值，同时将每一个属性的默认值设置在styles.xml文件中 50 | TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RangeBarView, 0, R.style.default_range_bar_value); 51 | int count = typedArray.getIndexCount(); 52 | for (int i = 0; i < count; i++) { 53 | int attr = typedArray.getIndex(i); 54 | switch (attr) { 55 | case R.styleable.RangeBarView_rect_line_default_color: 56 | rectLineDefaultColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 57 | break; 58 | case R.styleable.RangeBarView_rect_line_checked_color: 59 | rectLineCheckedColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_275D9D)); 60 | break; 61 | case R.styleable.RangeBarView_rect_line_height: 62 | rectLineHeight = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_line_height)); 63 | break; 64 | case R.styleable.RangeBarView_circle_radius: 65 | circleRadius = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.circle_radius)); 66 | break; 67 | case R.styleable.RangeBarView_circle_stroke_width: 68 | circleStrokeWidth = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.circle_stroke_width)); 69 | break; 70 | case R.styleable.RangeBarView_left_circle_solid_color: 71 | leftCircleSolidColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 72 | break; 73 | case R.styleable.RangeBarView_left_circle_stroke_color: 74 | leftCircleStrokeColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 75 | break; 76 | case R.styleable.RangeBarView_right_circle_solid_color: 77 | rightCircleSolidColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 78 | break; 79 | case R.styleable.RangeBarView_right_circle_stroke_color: 80 | rightCircleStrokeColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 81 | break; 82 | case R.styleable.RangeBarView_range_text_size: 83 | textSize = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.item_text_size)); 84 | break; 85 | case R.styleable.RangeBarView_range_text_color: 86 | textColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_333)); 87 | break; 88 | case R.styleable.RangeBarView_view_text_space: 89 | spaceDistance = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.view_and_text_space)); 90 | break; 91 | case R.styleable.RangeBarView_rect_price_desc_dialog_width: 92 | rectDialogWidth = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_width)); 93 | break; 94 | case R.styleable.RangeBarView_rect_price_desc_dialog_color: 95 | rectDialogColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_275D9D)); 96 | break; 97 | case R.styleable.RangeBarView_rect_price_desc_dialog_corner_radius: 98 | rectDialogCornerRadius = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_corner_radius)); 99 | break; 100 | case R.styleable.RangeBarView_rect_price_desc_text_size: 101 | rectDialogTextSize = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_text_size)); 102 | break; 103 | case R.styleable.RangeBarView_rect_price_desc_text_color: 104 | rectDialogTextColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 105 | break; 106 | case R.styleable.RangeBarView_rect_price_desc_space_to_progress: 107 | rectDialogSpaceToProgress = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_space_to_progress)); 108 | break; 109 | } 110 | } 111 | typedArray.recycle(); 112 | //初始化画笔 113 | initPaints(); 114 | } 115 | ``` 116 | 如果开发者忘记在布局文件中去设置这些自定义属性的话，我们需要给每个属性一个默认值，这里在styles.xml文件中进行统一配置各个属性默认值 117 | ``` 118 | 138 | ``` 139 | 如果没有在xml布局文件中设置自定义属性的话，代码是不会走到for循环中的，到此，自定义属性啰嗦完了，不过还是要提下注意点，首先获取完自定义属性后要记得将TypedArray对象回收，即typedArray.recycle();其次，我们可以在此构造方法中进行画笔等的初始化工作，所以，相信大家都知道为什么不能在onDraw方法中去实例化画笔等对象了(因为onDraw会被多次调用，这样就会new出来大量的对象) 140 | #### 测量 141 | ``` 142 | @Override 143 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 144 | int widthMode = MeasureSpec.getMode(widthMeasureSpec); 145 | int widthSize = MeasureSpec.getSize(widthMeasureSpec); 146 | int heightMode = MeasureSpec.getMode(heightMeasureSpec); 147 | int heightSize = MeasureSpec.getSize(heightMeasureSpec); 148 | 149 | int width, height; 150 | int wSize = getPaddingLeft() + circleRadius*2 + getPaddingRight() + circleStrokeWidth*2; 151 | int hSize = getPaddingTop() + rectDialogCornerRadius*2 + triangleHeight + rectDialogSpaceToProgress + circleRadius*2 + circleStrokeWidth*2 + spaceDistance + textSize + getPaddingBottom(); 152 | 153 | if (widthMode == MeasureSpec.EXACTLY) { 154 | width = widthSize; 155 | } else if (widthMode == MeasureSpec.AT_MOST) { 156 | width = Math.min(widthSize, wSize); 157 | }else { 158 | width = wSize; 159 | } 160 | 161 | if (heightMode == MeasureSpec.EXACTLY) { 162 | height = heightSize; 163 | } else if (heightMode == MeasureSpec.AT_MOST) { 164 | height = Math.min(heightSize, hSize); 165 | }else { 166 | height = hSize; 167 | } 168 | Log.e("TAG", "宽onMeasure----> "+width); 169 | setMeasuredDimension(width, height); 170 | } 171 | ``` 172 | 测量的时候需要对宽高的不同Mode进行不同的处理，主要有三种方式EXACTLY、AT_MOST和UNSPECIFIED这几种模式相信大家都很熟悉了，这里不再啰嗦了。 173 | #### onSizeChanged方法 174 | ``` 175 | @Override 176 | protected void onSizeChanged(int w, int h, int oldw, int oldh) { 177 | super.onSizeChanged(w, h, oldw, oldh); 178 | //控件实际宽度 = 宽度w(包含内边距的) - paddingLeft - paddingRight; 179 | Log.e("TAG", "宽----> "+w); 180 | 181 | realWidth = w - getPaddingLeft() - getPaddingRight(); 182 | strokeRadius = circleRadius + circleStrokeWidth; 183 | rectDialogHeightAndSpace = rectDialogCornerRadius*2 + rectDialogSpaceToProgress; 184 | //左边圆的圆心坐标 185 | leftCircleObj = new CirclePoint(); 186 | leftCircleObj.cx = getPaddingLeft() + strokeRadius; 187 | leftCircleObj.cy = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius; 188 | //右边圆的圆心坐标 189 | rightCircleObj = new CirclePoint(); 190 | rightCircleObj.cx = w - getPaddingRight() - strokeRadius; 191 | rightCircleObj.cy = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius; 192 | //默认圆角矩形进度条 193 | rectLineCornerRadius = rectLineHeight / 2;//圆角半径 194 | defaultCornerLineRect.left = getPaddingLeft() + strokeRadius; 195 | defaultCornerLineRect.top = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius - rectLineCornerRadius; 196 | defaultCornerLineRect.right = w - getPaddingRight() - strokeRadius; 197 | defaultCornerLineRect.bottom = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius + rectLineCornerRadius; 198 | //选中状态圆角矩形进度条 199 | selectedCornerLineRect.left = leftCircleObj.cx; 200 | selectedCornerLineRect.top = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius - rectLineCornerRadius; 201 | selectedCornerLineRect.right = rightCircleObj.cx; 202 | selectedCornerLineRect.bottom = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius + rectLineCornerRadius; 203 | //数值描述圆角矩形 204 | numberDescRect.left = w / 2 - rectDialogWidth/2; 205 | numberDescRect.top = getPaddingTop(); 206 | numberDescRect.right = w / 2 + rectDialogWidth/2; 207 | numberDescRect.bottom = getPaddingTop() + rectDialogCornerRadius*2; 208 | //每一份对应的距离 209 | perSlice = (realWidth - strokeRadius*2) / slice; 210 | } 211 | ``` 212 | 我们可以在onSizeChanged方法中配置控件的初始状态等，在这里我们可以看到我们实例化了两个对象leftCircleObj = new CirclePoint();和rightCircleObj = new CirclePoint();正所谓一切事物皆对象(**面向对象编程**)，按照我之前的写法会分别画左边圆和右边圆，这样无疑产生了很多重复代码，因为两个圆本质上是一样的。通过对象的方式便于管理，使用起来也很方便，当然了，也是从阅读很多优秀大牛写的自定义控件中学到的。此控件不是那么复杂，所以在设计圆对象的时候只声明了圆心坐标俩变量，不仅如此，比如我们也可以将滑动数据等统一放到一个对象中进行管理 213 | ``` 214 | private class CirclePoint{ 215 | //圆的圆心坐标 216 | public int cx; 217 | public int cy; 218 | } 219 | ``` 220 | #### 绘制 221 | ``` 222 | @Override 223 | protected void onDraw(Canvas canvas) { 224 | super.onDraw(canvas); 225 | 226 | //绘制中间圆角矩形线 227 | drawDefaultCornerRectLine(canvas); 228 | //绘制两圆之间的圆角矩形 229 | drawSelectedRectLine(canvas); 230 | //画左边圆以及圆的边框 231 | drawLeftCircle(canvas); 232 | //画右边圆以及圆的边框 233 | drawRightCircle(canvas); 234 | //绘制文字 235 | drawBottomText(canvas); 236 | //绘制描述信息圆角矩形弹窗 237 | drawRectDialog(canvas); 238 | //绘制描述信息弹窗中的文字 239 | drawTextOfRectDialog(canvas); 240 | //绘制小三角形 241 | drawSmallTriangle(canvas); 242 | } 243 | ``` 244 | 下面分别展示下这些组件的绘制，其实主要是坐标的确定，只要坐标知道了，那么绘制起来就一气呵成了。其中，绘制小三角形用的是path进行连线绘制 245 | ``` 246 | private void drawDefaultCornerRectLine(Canvas canvas) { 247 | canvas.drawRoundRect(defaultCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, defaultLinePaint); 248 | } 249 | 250 | private void drawSelectedRectLine(Canvas canvas) { 251 | canvas.drawRoundRect(selectedCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, selectedLinePaint); 252 | } 253 | 254 | private void drawLeftCircle(Canvas canvas) { 255 | canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCirclePaint); 256 | canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCircleStrokePaint); 257 | } 258 | 259 | private void drawRightCircle(Canvas canvas) { 260 | canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCirclePaint); 261 | canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCircleStrokePaint); 262 | } 263 | 264 | private void drawBottomText(Canvas canvas) { 265 | textPaint.setColor(textColor); 266 | textPaint.setTextSize(textSize); 267 | for (int i = 0; i <=slice; i++) { 268 | int value = i*sliceValue > maxValue ? maxValue : i*sliceValue + minValue; 269 | String text = String.valueOf(value); 270 | float textWidth = textPaint.measureText(text); 271 | canvas.drawText(text, i*perSlice - textWidth/2 + (getPaddingLeft() + strokeRadius), getPaddingTop()+rectDialogHeightAndSpace+strokeRadius*2+spaceDistance+textSize/2, textPaint); 272 | } 273 | } 274 | 275 | private void drawRectDialog(Canvas canvas) { 276 | if (isShowRectDialog) { 277 | canvas.drawRoundRect(numberDescRect, rectDialogCornerRadius, rectDialogCornerRadius, selectedLinePaint); 278 | } 279 | } 280 | 281 | private void drawTextOfRectDialog(Canvas canvas) { 282 | if (leftValue == minValue && (rightValue == maxValue || rightValue < maxValue)) { 283 | textDesc = rightValue+"万以下"; 284 | } else if (leftValue > minValue && rightValue == maxValue) { 285 | textDesc = leftValue+"万以上"; 286 | } else if (leftValue > minValue && rightValue < maxValue) { 287 | if (leftValue == rightValue) { 288 | textDesc = rightValue+"万以下"; 289 | }else 290 | textDesc = leftValue+"-"+rightValue+"万"; 291 | } 292 | 293 | if (isShowRectDialog) { 294 | textPaint.setColor(rectDialogTextColor); 295 | textPaint.setTextSize(rectDialogTextSize); 296 | float textWidth = textPaint.measureText(textDesc); 297 | float textLeft = numberDescRect.left + rectDialogWidth/2 - textWidth/2; 298 | canvas.drawText(textDesc, textLeft, getPaddingTop()+rectDialogCornerRadius+rectDialogTextSize/4, textPaint); 299 | } 300 | } 301 | 302 | private void drawSmallTriangle(Canvas canvas) { 303 | if (isShowRectDialog) { 304 | trianglePath.reset(); 305 | trianglePath.moveTo(numberDescRect.left + rectDialogWidth/2 - triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2); 306 | trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2 + triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2); 307 | trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2, getPaddingTop() + rectDialogCornerRadius*2+triangleHeight); 308 | trianglePath.close(); 309 | canvas.drawPath(trianglePath, selectedLinePaint); 310 | } 311 | } 312 | ``` 313 | #### 然后是对手势滑动的处理 314 | 对于手势滑动的处理还是比较麻烦和繁琐的，首先我们需要确定当前滑动的是左边圆还是右边圆，可以通过如下方式进行判断，为了方便大家理解，我在代码中写了详细的注释，一次无意间的机会看到[CodeCopyer](https://blog.csdn.net/givemeacondom/article/details/80991034)大牛的文章中关于点击属于哪个位置用到了**Region**（Region表示多个图形组成的区域范围，一般判断某一点(按下的坐标)是否在某一个区域范围内），又get到了一项技能，在这里表示感谢，感兴趣的小伙伴可以用此方式实现下 315 | ``` 316 | private boolean checkIsLeftOrRight(float downX) { 317 | //如果按下的区域位于左边区域，则按下坐标downX的值就会比较小(即按下坐标点在左边)，那么leftCircleObj.cx - downX的绝对值也会比较小 318 | //rightCircleObj.cx - downX绝对值肯定是大于leftCircleObj.cx - downX绝对值的，两者相减肯定是小于0的 319 | if (Math.abs(leftCircleObj.cx - downX) - Math.abs(rightCircleObj.cx - downX) > 0) {//表示按下的区域位于右边 320 | return false; 321 | } 322 | return true; 323 | } 324 | ``` 325 | 接着需要对起始位置以及终点位置的**边界进行处理，防止越界**，两圆总不能滑出起始位置或者终点位置吧，其实对边界的处理还是很简单的，比如左边圆滑动坐标小于起始点的坐标时，我们就把起始点的坐标重新赋值给这个圆的圆心坐标，右边临界点的判断也是类似 326 | ``` 327 | //防止越界处理 328 | if (touchLeftCircle) { 329 | if (leftCircleObj.cx > rightCircleObj.cx) { 330 | leftCircleObj.cx = rightCircleObj.cx; 331 | }else { 332 | if (leftCircleObj.cx < getPaddingLeft() + strokeRadius) { 333 | leftCircleObj.cx = getPaddingLeft() + strokeRadius; 334 | } 335 | if (leftCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) { 336 | leftCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius; 337 | } 338 | } 339 | }else { 340 | if (leftCircleObj.cx > rightCircleObj.cx) { 341 | rightCircleObj.cx = leftCircleObj.cx; 342 | }else { 343 | if (rightCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) { 344 | rightCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius; 345 | } 346 | 347 | if (rightCircleObj.cx < getPaddingLeft() + strokeRadius) { 348 | rightCircleObj.cx = getPaddingLeft() + strokeRadius; 349 | } 350 | } 351 | } 352 | ``` 353 | 354 | 以及两圆相遇时的处理，总不能确认过眼神就是对的人吧，这块处理需要特别的注意，就像文章开头对控件的分析中说到的几种情况，①两圆在起始位置处相遇②两圆在终点位置处相遇③两圆在中间某一处相遇。对于情况①和②情况比较相似，这里就统一啰嗦下，滑动右边圆在起始位置处和左边圆相遇后，再次向右滑动，那么要保证左边圆不动，右边圆继续向右滑动；当左边圆在终点处与右边圆相遇时也是同样道理。对于情况③当滑动左边圆在中间某一处与右边圆相遇时，继续向右滑动，注意此时左边圆停留在之前右边圆的位置处不动，而右边圆则继续向右滑动（根据图二可以很清晰的观察出滑动的规律），用代码表示就是在move时进行判断处理 355 | ``` 356 | case MotionEvent.ACTION_MOVE: 357 | float moveX = event.getX(); 358 | isShowRectDialog = true; 359 | if (leftCircleObj.cx == rightCircleObj.cx) {//两圆圈重合的情况 360 | if (touchLeftCircle) { 361 | //极端情况的优化处理，滑动左边圆到达最右边时，再次滑动时设置为左滑，即：继续让左边圆向左滑动 362 | if (leftCircleObj.cx == getWidth() - getPaddingRight() - strokeRadius) { 363 | touchLeftCircle = true; 364 | leftCircleObj.cx = (int) moveX; 365 | }else { 366 | //当滑动左边圆在中间某处与右边圆重合时，此时再次继续滑动则左边圆处于右边圆位置处不动，右边圆改为向右滑动 367 | touchLeftCircle = false; 368 | rightCircleObj.cx = (int) moveX; 369 | } 370 | }else { 371 | if (rightCircleObj.cx == getPaddingLeft() + strokeRadius) { 372 | touchLeftCircle = false; 373 | rightCircleObj.cx = (int) moveX; 374 | }else { 375 | touchLeftCircle = true; 376 | leftCircleObj.cx = (int) moveX; 377 | } 378 | } 379 | }else { 380 | if (touchLeftCircle) { 381 | //滑动左边圆圈时，如果位置等于或者超过右边圆的位置时，设置右边圆圈的坐标给左边圆圈，就相当于左边圆圈停留在右边圆圈之前的位置上，然后移动右边圆圈 382 | leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : (int) moveX; 383 | }else { 384 | //同理 385 | rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : (int) moveX; 386 | } 387 | } 388 | 389 | break; 390 | ``` 391 | 392 | 其次还要保证在两圆滑动的过程中最上方显示价格信息描述的圆角矩形弹窗始终位于两圆的中间位置，还有就是文章开头分析的，当滑动的距离小于步长的一半时，松开滑动，圆需要回弹到上一个位置处，很多细节都是需要处理的，在写的过程中会遇到很多奇葩的问题，需要有足够的耐心慢慢去调试，最后我们需要在手指抬起也就是up时将数据回调给UI进行展示 393 | ``` 394 | case MotionEvent.ACTION_UP: 395 | if (touchLeftCircle) { 396 | int partsOfLeft = getSliceByCoordinate((int) event.getX()); 397 | leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : partsOfLeft*perSlice+strokeRadius; 398 | }else { 399 | int partsOfRight = getSliceByCoordinate((int) event.getX()); 400 | rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : partsOfRight*perSlice+strokeRadius; 401 | } 402 | 403 | int leftData = getSliceByCoordinate(leftCircleObj.cx)*sliceValue + minValue; 404 | int rightData = getSliceByCoordinate(rightCircleObj.cx)*sliceValue + minValue; 405 | leftValue = leftData > maxValue ? maxValue : leftData; 406 | rightValue = rightData > maxValue ? maxValue : rightData; 407 | //回调 408 | if (listener != null) { 409 | listener.onMoveValue(leftValue, rightValue); 410 | } 411 | break; 412 | } 413 | ``` 414 | 最后，我们再来看下布局文件以及Activity中如何调用展示 415 | ``` 416 | 433 | ``` 434 | 以及Activity 435 | ``` 436 | int minValue = 0; 437 | int maxValue = 100; 438 | int sliceValue = 20; 439 | tvLeftValue.setText(minValue+""); 440 | tvRightValue.setText(maxValue+""); 441 | rangeBarView.setDatas(minValue, maxValue, sliceValue, new RangeBarView.OnMoveValueListener() { 442 | @Override 443 | public void onMoveValue(int leftValue, int rightValue) { 444 | tvLeftValue.setText("左边值为：" + leftValue + "--> "+leftValue); 445 | tvRightValue.setText("右边值为：" + rightValue + "--> "+rightValue); 446 | } 447 | }); 448 | ``` 449 | 我们可以看到开发者使用起来也比较方便，这里不但需要一个最大值还需要一个最小值，这样设计的目的是，有的需求并不是从0到某一个数值，比如，也有可能是从50-1000这样的，同时还需要告诉程序小圆每移动一下代表的数值是多少，然后根据这些数据可以算出此控件在此数据范围内一共可以分多少份，对于除不尽的话我们会增加一份来表示剩下的一点数据。这里还要感谢Nipuream老铁的文章给的灵感，感兴趣的话可以[点击这里查看大牛文章](https://blog.csdn.net/yanghuinipurean/article/details/52336810)，今天就先写到这吧，同事都早已下班回去嗨皮的过双休了，我也要撤了，代码写的有些匆忙，难免会存在些问题，如有问题欢迎大家提出，我们共同交流处理 450 | 451 | 452 | 453 | 454 | -------------------------------------------------------------------------------- /app/src/main/java/com/ch/custom/view/RangeBarView.java: -------------------------------------------------------------------------------- 1 | package com.ch.custom.view; 2 | 3 | import android.animation.TypeEvaluator; 4 | import android.animation.ValueAnimator; 5 | import android.content.Context; 6 | import android.content.res.TypedArray; 7 | import android.graphics.Canvas; 8 | import android.graphics.Paint; 9 | import android.graphics.Path; 10 | import android.graphics.RectF; 11 | import android.support.annotation.Nullable; 12 | import android.support.v4.content.ContextCompat; 13 | import android.util.AttributeSet; 14 | import android.util.Log; 15 | import android.view.MotionEvent; 16 | import android.view.View; 17 | import com.ch.custom.R; 18 | 19 | public class RangeBarView extends View{ 20 | 21 | private int rectLineHeight;//圆角矩形线的高度，若设置高度大于圆的半径(或者未设置)就会默认给圆的1/4作为高度 22 | private int rectLineCornerRadius;//圆角矩形线的圆角半径 23 | private int rectLineDefaultColor;//默认颜色 24 | private int rectLineCheckedColor;//选中颜色 25 | private int circleRadius;//圆半径 26 | private int circleStrokeWidth;//圆边框的大小 27 | private int leftCircleSolidColor;//左边实心圆颜色 28 | private int leftCircleStrokeColor;//左边圆边框的颜色 29 | private int rightCircleSolidColor;//右边实心圆颜色 30 | private int rightCircleStrokeColor;//右边圆边框的颜色 31 | private int rectDialogWidth;//描述信息弹窗的宽度 32 | private int rectDialogColor;//描述信息弹窗颜色 33 | private int rectDialogCornerRadius;//描述信息弹窗圆角半径 34 | private int rectDialogTextSize;//描述信息弹窗中文字的大小 35 | private int rectDialogTextColor;//描述信息弹窗中文字的颜色 36 | private int rectDialogSpaceToProgress;//描述信息弹窗距离进度条的间距 37 | private int textSize, textColor; 38 | private int spaceDistance;//文字与滑动控件之间的间距 39 | 40 | //画笔 41 | private Paint leftCirclePaint; 42 | private Paint leftCircleStrokePaint; 43 | private Paint rightCirclePaint; 44 | private Paint rightCircleStrokePaint; 45 | private Paint defaultLinePaint; 46 | private Paint selectedLinePaint; 47 | private Paint textPaint; 48 | //左右两个圆对象 49 | private CirclePoint leftCircleObj; 50 | private CirclePoint rightCircleObj; 51 | //默认颜色的圆角矩形 52 | private RectF defaultCornerLineRect; 53 | //中间选中颜色的圆角矩形 54 | private RectF selectedCornerLineRect; 55 | //表示价格数据的矩形 56 | private RectF numberDescRect; 57 | //画小三角形 58 | private Path trianglePath; 59 | //等边三角形边长 60 | private int triangleLength = 15; 61 | //等边三角形的高 62 | private int triangleHeight; 63 | private float downX; 64 | private boolean touchLeftCircle; 65 | 66 | //控件的实际宽(去除内边距之后的) 67 | private int realWidth; 68 | //半径+边框的总值 69 | private int strokeRadius; 70 | //描述信息弹窗高度+与进度条之间的间隙距离 71 | private int rectDialogHeightAndSpace; 72 | 73 | //默认分成10份 74 | private int slice = 10; 75 | //表示每一份所占的距离长度 76 | private float perSlice; 77 | //最大值，默认为100 78 | private int maxValue = 100; 79 | //最小值，默认为0 80 | private int minValue; 81 | //每一份对应的数值，数值默认值为10 82 | private int sliceValue = 10; 83 | //左边数值，右边数值 84 | private int leftValue, rightValue; 85 | //描述信息弹窗中的文字 86 | private String textDesc = "0"; 87 | //是否显示描述信息弹窗 88 | private boolean isShowRectDialog; 89 | 90 | 91 | 92 | public RangeBarView(Context context) { 93 | this(context, null); 94 | } 95 | 96 | public RangeBarView(Context context, @Nullable AttributeSet attrs) { 97 | this(context, attrs, 0); 98 | } 99 | 100 | public RangeBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { 101 | super(context, attrs, defStyleAttr); 102 | //初始化属性值，同时将每一个属性的默认值设置在styles.xml文件中 103 | TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RangeBarView, 0, R.style.default_range_bar_value); 104 | int count = typedArray.getIndexCount(); 105 | for (int i = 0; i < count; i++) { 106 | int attr = typedArray.getIndex(i); 107 | switch (attr) { 108 | case R.styleable.RangeBarView_rect_line_default_color: 109 | rectLineDefaultColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 110 | break; 111 | case R.styleable.RangeBarView_rect_line_checked_color: 112 | rectLineCheckedColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_275D9D)); 113 | break; 114 | case R.styleable.RangeBarView_rect_line_height: 115 | rectLineHeight = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_line_height)); 116 | break; 117 | case R.styleable.RangeBarView_circle_radius: 118 | circleRadius = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.circle_radius)); 119 | break; 120 | case R.styleable.RangeBarView_circle_stroke_width: 121 | circleStrokeWidth = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.circle_stroke_width)); 122 | break; 123 | case R.styleable.RangeBarView_left_circle_solid_color: 124 | leftCircleSolidColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 125 | break; 126 | case R.styleable.RangeBarView_left_circle_stroke_color: 127 | leftCircleStrokeColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 128 | break; 129 | case R.styleable.RangeBarView_right_circle_solid_color: 130 | rightCircleSolidColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 131 | break; 132 | case R.styleable.RangeBarView_right_circle_stroke_color: 133 | rightCircleStrokeColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_cdcd)); 134 | break; 135 | case R.styleable.RangeBarView_range_text_size: 136 | textSize = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.item_text_size)); 137 | break; 138 | case R.styleable.RangeBarView_range_text_color: 139 | textColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_333)); 140 | break; 141 | case R.styleable.RangeBarView_view_text_space: 142 | spaceDistance = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.view_and_text_space)); 143 | break; 144 | case R.styleable.RangeBarView_rect_price_desc_dialog_width: 145 | rectDialogWidth = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_width)); 146 | break; 147 | case R.styleable.RangeBarView_rect_price_desc_dialog_color: 148 | rectDialogColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_275D9D)); 149 | break; 150 | case R.styleable.RangeBarView_rect_price_desc_dialog_corner_radius: 151 | rectDialogCornerRadius = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_corner_radius)); 152 | break; 153 | case R.styleable.RangeBarView_rect_price_desc_text_size: 154 | rectDialogTextSize = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_text_size)); 155 | break; 156 | case R.styleable.RangeBarView_rect_price_desc_text_color: 157 | rectDialogTextColor = typedArray.getColor(attr, ContextCompat.getColor(context, R.color.color_fff)); 158 | break; 159 | case R.styleable.RangeBarView_rect_price_desc_space_to_progress: 160 | rectDialogSpaceToProgress = typedArray.getDimensionPixelSize(attr, getResources().getDimensionPixelSize(R.dimen.rect_dialog_space_to_progress)); 161 | break; 162 | } 163 | } 164 | typedArray.recycle(); 165 | //初始化画笔 166 | initPaints(); 167 | } 168 | 169 | public void setDatas(int minValue, int maxValue, int sliceValue, OnMoveValueListener listener){ 170 | this.minValue = minValue; 171 | this.maxValue = maxValue; 172 | this.sliceValue = sliceValue; 173 | this.listener = listener; 174 | int num = (maxValue - minValue) / sliceValue; 175 | slice = (maxValue - minValue) % sliceValue == 0 ? num : num + 1; 176 | invalidate(); 177 | } 178 | 179 | private void initPaints() { 180 | defaultLinePaint = new Paint(); 181 | defaultLinePaint.setAntiAlias(true); 182 | defaultLinePaint.setDither(true); 183 | defaultLinePaint.setColor(rectLineDefaultColor); 184 | 185 | selectedLinePaint = new Paint(); 186 | selectedLinePaint.setAntiAlias(true); 187 | selectedLinePaint.setDither(true); 188 | selectedLinePaint.setColor(rectLineCheckedColor); 189 | 190 | textPaint = new Paint(); 191 | textPaint.setAntiAlias(true); 192 | textPaint.setDither(true); 193 | textPaint.setTextSize(textSize); 194 | textPaint.setColor(textColor); 195 | 196 | //初始化左边实心圆 197 | leftCirclePaint = setPaint(leftCircleSolidColor, 0, 0f, true); 198 | //初始化左边圆的边框 199 | leftCircleStrokePaint = setPaint(0, leftCircleStrokeColor, circleStrokeWidth, false); 200 | //初始化右边实心圆 201 | rightCirclePaint = setPaint(rightCircleSolidColor, 0, 0f, true); 202 | //初始化左边圆的边框 203 | rightCircleStrokePaint = setPaint(0, rightCircleStrokeColor, circleStrokeWidth, false); 204 | //默认颜色的圆角矩形线 205 | defaultCornerLineRect = new RectF(); 206 | //中间选中颜色的圆角矩形 207 | selectedCornerLineRect = new RectF(); 208 | //数值描述圆角矩形 209 | numberDescRect = new RectF(); 210 | //画小三角形 211 | trianglePath = new Path(); 212 | //小三角形的高 213 | triangleHeight = (int) Math.sqrt(triangleLength * triangleLength - triangleLength/2 * (triangleLength/2)); 214 | } 215 | 216 | private Paint setPaint(int bgColor, int strokeColor, float strokeWidth, boolean hasFillStyle){ 217 | Paint mPaint = new Paint(); 218 | mPaint.setAntiAlias(true); 219 | mPaint.setDither(true); 220 | mPaint.setStyle(hasFillStyle ? Paint.Style.FILL : Paint.Style.STROKE); 221 | mPaint.setColor(hasFillStyle ? bgColor : strokeColor); 222 | mPaint.setStrokeWidth(strokeWidth); 223 | return mPaint; 224 | } 225 | 226 | private class CirclePoint{ 227 | //圆的圆心坐标 228 | public float cx; 229 | public float cy; 230 | } 231 | 232 | @Override 233 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 234 | int widthMode = MeasureSpec.getMode(widthMeasureSpec); 235 | int widthSize = MeasureSpec.getSize(widthMeasureSpec); 236 | int heightMode = MeasureSpec.getMode(heightMeasureSpec); 237 | int heightSize = MeasureSpec.getSize(heightMeasureSpec); 238 | 239 | int width, height; 240 | int wSize = getPaddingLeft() + circleRadius*2 + getPaddingRight() + circleStrokeWidth*2; 241 | int hSize = getPaddingTop() + rectDialogCornerRadius*2 + triangleHeight + rectDialogSpaceToProgress + circleRadius*2 + circleStrokeWidth*2 + spaceDistance + textSize + getPaddingBottom(); 242 | 243 | if (widthMode == MeasureSpec.EXACTLY) { 244 | width = widthSize; 245 | } else if (widthMode == MeasureSpec.AT_MOST) { 246 | width = Math.min(widthSize, wSize); 247 | }else { 248 | width = wSize; 249 | } 250 | 251 | if (heightMode == MeasureSpec.EXACTLY) { 252 | height = heightSize; 253 | } else if (heightMode == MeasureSpec.AT_MOST) { 254 | height = Math.min(heightSize, hSize); 255 | }else { 256 | height = hSize; 257 | } 258 | Log.e("TAG", "宽onMeasure----> "+width); 259 | setMeasuredDimension(width, height); 260 | } 261 | 262 | @Override 263 | protected void onSizeChanged(int w, int h, int oldw, int oldh) { 264 | super.onSizeChanged(w, h, oldw, oldh); 265 | //控件实际宽度 = 宽度w(包含内边距的) - paddingLeft - paddingRight; 266 | Log.e("TAG", "宽----> "+w); 267 | 268 | realWidth = w - getPaddingLeft() - getPaddingRight(); 269 | strokeRadius = circleRadius + circleStrokeWidth; 270 | rectDialogHeightAndSpace = rectDialogCornerRadius*2 + rectDialogSpaceToProgress; 271 | //左边圆的圆心坐标 272 | leftCircleObj = new CirclePoint(); 273 | leftCircleObj.cx = getPaddingLeft() + strokeRadius; 274 | leftCircleObj.cy = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius; 275 | //右边圆的圆心坐标 276 | rightCircleObj = new CirclePoint(); 277 | rightCircleObj.cx = w - getPaddingRight() - strokeRadius; 278 | rightCircleObj.cy = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius; 279 | //默认圆角矩形进度条 280 | rectLineCornerRadius = rectLineHeight / 2;//圆角半径 281 | defaultCornerLineRect.left = getPaddingLeft() + strokeRadius; 282 | defaultCornerLineRect.top = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius - rectLineCornerRadius; 283 | defaultCornerLineRect.right = w - getPaddingRight() - strokeRadius; 284 | defaultCornerLineRect.bottom = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius + rectLineCornerRadius; 285 | //选中状态圆角矩形进度条 286 | selectedCornerLineRect.left = leftCircleObj.cx; 287 | selectedCornerLineRect.top = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius - rectLineCornerRadius; 288 | selectedCornerLineRect.right = rightCircleObj.cx; 289 | selectedCornerLineRect.bottom = getPaddingTop() + rectDialogHeightAndSpace + strokeRadius + rectLineCornerRadius; 290 | //数值描述圆角矩形 291 | numberDescRect.left = w / 2 - rectDialogWidth/2; 292 | numberDescRect.top = getPaddingTop(); 293 | numberDescRect.right = w / 2 + rectDialogWidth/2; 294 | numberDescRect.bottom = getPaddingTop() + rectDialogCornerRadius*2; 295 | //每一份对应的距离 296 | //2018/9/28更新有同学提出bug，说分的份数很大的时候出现问题，其实原因就是之前我用的是int型，除不整的就舍去了，导致每一份的距离都减少了 297 | //所以将每一份所占的距离长度perSlice改成float浮点型 298 | perSlice = (realWidth - strokeRadius*2) * 1f / slice; 299 | Log.e("TAG", "onSizeChanged---perSlice："+perSlice); 300 | } 301 | 302 | @Override 303 | protected void onDraw(Canvas canvas) { 304 | super.onDraw(canvas); 305 | 306 | //绘制中间圆角矩形线 307 | drawDefaultCornerRectLine(canvas); 308 | //绘制两圆之间的圆角矩形 309 | drawSelectedRectLine(canvas); 310 | //画左边圆以及圆的边框 311 | drawLeftCircle(canvas); 312 | //画右边圆以及圆的边框 313 | drawRightCircle(canvas); 314 | //绘制文字 315 | drawBottomText(canvas); 316 | //绘制描述信息圆角矩形弹窗 317 | drawRectDialog(canvas); 318 | //绘制描述信息弹窗中的文字 319 | drawTextOfRectDialog(canvas); 320 | //绘制小三角形 321 | drawSmallTriangle(canvas); 322 | } 323 | 324 | private void drawDefaultCornerRectLine(Canvas canvas) { 325 | canvas.drawRoundRect(defaultCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, defaultLinePaint); 326 | } 327 | 328 | private void drawSelectedRectLine(Canvas canvas) { 329 | canvas.drawRoundRect(selectedCornerLineRect, rectLineCornerRadius, rectLineCornerRadius, selectedLinePaint); 330 | } 331 | 332 | private void drawLeftCircle(Canvas canvas) { 333 | canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCirclePaint); 334 | canvas.drawCircle(leftCircleObj.cx, leftCircleObj.cy, circleRadius, leftCircleStrokePaint); 335 | } 336 | 337 | private void drawRightCircle(Canvas canvas) { 338 | canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCirclePaint); 339 | canvas.drawCircle(rightCircleObj.cx, rightCircleObj.cy, circleRadius, rightCircleStrokePaint); 340 | } 341 | 342 | private void drawBottomText(Canvas canvas) { 343 | textPaint.setColor(textColor); 344 | textPaint.setTextSize(textSize); 345 | for (int i = 0; i <=slice; i++) { 346 | int value = i*sliceValue > maxValue ? maxValue : i*sliceValue + minValue; 347 | String text = String.valueOf(value); 348 | float textWidth = textPaint.measureText(text); 349 | canvas.drawText(text, i*perSlice - textWidth/2 + (getPaddingLeft() + strokeRadius), getPaddingTop()+rectDialogHeightAndSpace+strokeRadius*2+spaceDistance+textSize/2, textPaint); 350 | } 351 | } 352 | 353 | private void drawRectDialog(Canvas canvas) { 354 | if (isShowRectDialog) { 355 | canvas.drawRoundRect(numberDescRect, rectDialogCornerRadius, rectDialogCornerRadius, selectedLinePaint); 356 | } 357 | } 358 | 359 | private void drawTextOfRectDialog(Canvas canvas) { 360 | if (leftValue == minValue && (rightValue == maxValue || rightValue < maxValue)) { 361 | textDesc = rightValue+"万以下"; 362 | } else if (leftValue > minValue && rightValue == maxValue) { 363 | textDesc = leftValue+"万以上"; 364 | } else if (leftValue > minValue && rightValue < maxValue) { 365 | if (leftValue == rightValue) { 366 | textDesc = rightValue+"万以下"; 367 | }else 368 | textDesc = leftValue+"-"+rightValue+"万"; 369 | } 370 | 371 | if (isShowRectDialog) { 372 | textPaint.setColor(rectDialogTextColor); 373 | textPaint.setTextSize(rectDialogTextSize); 374 | float textWidth = textPaint.measureText(textDesc); 375 | float textLeft = numberDescRect.left + rectDialogWidth/2 - textWidth/2; 376 | canvas.drawText(textDesc, textLeft, getPaddingTop()+rectDialogCornerRadius+rectDialogTextSize/4, textPaint); 377 | } 378 | } 379 | 380 | private void drawSmallTriangle(Canvas canvas) { 381 | if (isShowRectDialog) { 382 | trianglePath.reset(); 383 | trianglePath.moveTo(numberDescRect.left + rectDialogWidth/2 - triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2); 384 | trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2 + triangleLength/2, getPaddingTop() + rectDialogCornerRadius*2); 385 | trianglePath.lineTo(numberDescRect.left + rectDialogWidth/2, getPaddingTop() + rectDialogCornerRadius*2+triangleHeight); 386 | trianglePath.close(); 387 | canvas.drawPath(trianglePath, selectedLinePaint); 388 | } 389 | } 390 | 391 | @Override 392 | public boolean onTouchEvent(MotionEvent event) { 393 | switch (event.getAction()){ 394 | case MotionEvent.ACTION_DOWN: 395 | downX = event.getX(); 396 | //判断手指按下的点是在左边圆圈的位置范围还是在右边圆圈的位置范围 397 | touchLeftCircle = checkIsLeftOrRight(downX); 398 | if (touchLeftCircle) {//表示按下的点位于左边圆圈活动范围内 399 | leftCircleObj.cx = (int) downX; 400 | }else { 401 | rightCircleObj.cx = (int) downX; 402 | } 403 | break; 404 | case MotionEvent.ACTION_MOVE: 405 | float moveX = event.getX(); 406 | isShowRectDialog = true; 407 | if (leftCircleObj.cx == rightCircleObj.cx) {//两圆圈重合的情况 408 | if (touchLeftCircle) { 409 | //极端情况的优化处理，滑动左边圆到达最右边时，再次滑动时设置为左滑，即：继续让左边圆向左滑动 410 | if (leftCircleObj.cx == getWidth() - getPaddingRight() - strokeRadius) { 411 | touchLeftCircle = true; 412 | leftCircleObj.cx = (int) moveX; 413 | }else { 414 | //当滑动左边圆在中间某处与右边圆重合时，此时再次继续滑动则左边圆处于右边圆位置处不动，右边圆改为向右滑动 415 | touchLeftCircle = false; 416 | rightCircleObj.cx = (int) moveX; 417 | } 418 | }else { 419 | if (rightCircleObj.cx == getPaddingLeft() + strokeRadius) { 420 | touchLeftCircle = false; 421 | rightCircleObj.cx = (int) moveX; 422 | }else { 423 | touchLeftCircle = true; 424 | leftCircleObj.cx = (int) moveX; 425 | } 426 | } 427 | }else { 428 | if (touchLeftCircle) { 429 | //滑动左边圆圈时，如果位置等于或者超过右边圆的位置时，设置右边圆圈的坐标给左边圆圈，就相当于左边圆圈停留在右边圆圈之前的位置上，然后移动右边圆圈 430 | leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : (int) moveX; 431 | }else { 432 | //同理 433 | rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : (int) moveX; 434 | } 435 | } 436 | 437 | break; 438 | case MotionEvent.ACTION_UP: 439 | if (touchLeftCircle) { 440 | //2018/9/28更新每一步的距离 = 有效的长度(即实际矩形线长度范围内) / 步数， 441 | // 所以这个有效的距离应该是移动的坐标距离(event.getX())减去左内边距以及strokeRadius，减去之后剩下的距离才是在矩形线上真正体现出来的间距，（有点绕，自己多理解下就想通了） 442 | int partsOfLeft = getSliceByCoordinate((int) event.getX() - getPaddingLeft() - strokeRadius); 443 | //最终计算圆心的坐标位置的时候还是需要加上这些的，因为坐标原点是此控件view的左上角 444 | leftCircleObj.cx = leftCircleObj.cx - rightCircleObj.cx >= 0 ? rightCircleObj.cx : partsOfLeft*perSlice+strokeRadius+getPaddingLeft(); 445 | }else { 446 | int partsOfRight = getSliceByCoordinate((int) event.getX() - getPaddingLeft() - strokeRadius); 447 | rightCircleObj.cx = rightCircleObj.cx - leftCircleObj.cx <= 0 ? leftCircleObj.cx : partsOfRight*perSlice+strokeRadius+getPaddingLeft(); 448 | } 449 | 450 | int leftData = getSliceByCoordinate(leftCircleObj.cx - getPaddingLeft() - strokeRadius)*sliceValue + minValue; 451 | int rightData = getSliceByCoordinate(rightCircleObj.cx - getPaddingLeft() - strokeRadius)*sliceValue + minValue; 452 | leftValue = leftData > maxValue ? maxValue : leftData; 453 | rightValue = rightData > maxValue ? maxValue : rightData; 454 | //回调 455 | if (listener != null) { 456 | listener.onMoveValue(leftValue, rightValue); 457 | } 458 | break; 459 | } 460 | 461 | //防止越界处理 462 | if (touchLeftCircle) { 463 | if (leftCircleObj.cx > rightCircleObj.cx) { 464 | leftCircleObj.cx = rightCircleObj.cx; 465 | }else { 466 | if (leftCircleObj.cx < getPaddingLeft() + strokeRadius) { 467 | leftCircleObj.cx = getPaddingLeft() + strokeRadius; 468 | } 469 | if (leftCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) { 470 | leftCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius; 471 | } 472 | } 473 | }else { 474 | if (leftCircleObj.cx > rightCircleObj.cx) { 475 | rightCircleObj.cx = leftCircleObj.cx; 476 | }else { 477 | if (rightCircleObj.cx > getWidth() - getPaddingRight() - strokeRadius) { 478 | rightCircleObj.cx = getWidth() - getPaddingRight() - strokeRadius; 479 | } 480 | 481 | if (rightCircleObj.cx < getPaddingLeft() + strokeRadius) { 482 | rightCircleObj.cx = getPaddingLeft() + strokeRadius; 483 | } 484 | } 485 | } 486 | 487 | //由于按下的点的坐标在改变，所以中间的圆角矩形选中的范围坐标也要跟着改变 488 | selectedCornerLineRect.left = leftCircleObj.cx; 489 | selectedCornerLineRect.right = rightCircleObj.cx; 490 | //不管是滑动左边圆还是右边圆，都要计算两圆间的中心距离作为展示价格进度框的中心点 491 | numberDescRect.left = (rightCircleObj.cx + leftCircleObj.cx) / 2 - rectDialogWidth/2; 492 | numberDescRect.right = (rightCircleObj.cx + leftCircleObj.cx) / 2 + rectDialogWidth/2; 493 | 494 | invalidate(); 495 | return true; 496 | } 497 | 498 | private int getSliceByCoordinate(float moveDistance){ 499 | //此位置坐标对应的距离能分多少份 500 | int lineLength = getWidth()-getPaddingLeft()-getPaddingRight()-strokeRadius*2; 501 | moveDistance = moveDistance <= 0 ? 0 : (moveDistance >= lineLength ? lineLength : moveDistance); 502 | int parts = (int) (moveDistance / perSlice);//总距离 / 每一份的距离 503 | parts = moveDistance % perSlice >= perSlice/2 ? parts + 1 : parts; 504 | Log.e("TAG", "左边aaa-----> moveDistance："+ moveDistance); 505 | Log.e("TAG", "左边aaa-----> perSlice："+ perSlice); 506 | Log.e("TAG", "左边aaa-----> parts："+ parts); 507 | return parts > slice ? slice : parts; 508 | } 509 | 510 | /** 通过外界传值让小圆自动移动到相应数值对应的坐标处 **/ 511 | public void setCircleMoveCoordinateByValue(int minData, int maxData){ 512 | if (minData < minValue) minData = minValue; 513 | if (maxData > maxValue) maxData = maxValue; 514 | //占了多少份 515 | int sliceL = (minData - minValue) / sliceValue; 516 | int sliceR = (maxData - minValue) / sliceValue; 517 | sliceL = (minData - minValue) % sliceValue == 0 ? sliceL : sliceL + 1; 518 | sliceR = (maxData - minValue) % sliceValue == 0 ? sliceR : sliceR + 1; 519 | //左边圆的圆心坐标 = minData所占的份数 * 每一份的坐标距离 + getPaddingLeft() + circleRadius 520 | leftCircleObj.cx = sliceL * perSlice + getPaddingLeft() + circleRadius; 521 | rightCircleObj.cx = sliceR * perSlice + getPaddingLeft() + circleRadius; 522 | //设置线的位置 523 | selectedCornerLineRect.left = leftCircleObj.cx; 524 | selectedCornerLineRect.right = rightCircleObj.cx; 525 | //设置顶部价格弹窗位置 526 | numberDescRect.left = (rightCircleObj.cx + leftCircleObj.cx) / 2 - rectDialogWidth/2; 527 | numberDescRect.right = (rightCircleObj.cx + leftCircleObj.cx) / 2 + rectDialogWidth/2; 528 | invalidate(); 529 | } 530 | 531 | private boolean checkIsLeftOrRight(float downX) { 532 | //如果按下的区域位于左边区域，则按下坐标downX的值就会比较小(即按下坐标点在左边)，那么leftCircleObj.cx - downX的绝对值也会比较小 533 | //rightCircleObj.cx - downX绝对值肯定是大于leftCircleObj.cx - downX绝对值的，两者相减肯定是小于0的 534 | if (Math.abs(leftCircleObj.cx - downX) - Math.abs(rightCircleObj.cx - downX) > 0) {//表示按下的区域位于右边 535 | return false; 536 | } 537 | return true; 538 | } 539 | 540 | private OnMoveValueListener listener; 541 | public interface OnMoveValueListener{ 542 | void onMoveValue(int leftValue, int rightValue); 543 | } 544 | } 545 | --------------------------------------------------------------------------------