自定义搜索栏 android
Custom seekbar android
我正在尝试实现自定义搜索栏,如下图所示
为此我做了下面的代码
我已经为 seekbar progressDrawable 创建了 drawable 让我知道是否需要代码,我会 post 在这里。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/llScale"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/sliderText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Bernard"
android:textColor="@color/blue"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@drawable/slider_background"
android:padding="3dp">
<SeekBar
android:id="@+id/ratingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:max="10"
android:maxHeight="100dp"
android:thumbTintMode="multiply"
android:progressDrawable="@drawable/progressbar"
android:thumb="@drawable/ic_slider_secondary"/>
<TextView
android:id="@+id/seekBarHint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Drag slider across"
android:textColor="@color/dark_gray"/>
</FrameLayout>
<TextView
android:id="@+id/progressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_slider_progress"
android:gravity="center"
android:textColor="@color/white"
android:textStyle="bold"/>
</FrameLayout>
</LinearLayout>
但是使用上面的代码我得到的是下图
浅红色没有被完全填充,它留下了一些 space 并且最后圆圈超出了边界。
Gradle
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.myapp"
minSdkVersion 16
targetSdkVersion 23
multiDexEnabled true
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
谁能帮我解决这个问题
我使用了您的代码并创建了演示,其中我做了如下 2 处更改:
为我设置合适的 thumbOffset 值 16.5dp 有效。
再添加一个 属性 android:splitTrack="false" 这将有助于删除 space 周围的拇指可绘制对象。
<SeekBar
android:id="@+id/ratingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:maxHeight="100dp"
android:progressDrawable="@drawable/progressbar"
android:thumb="@drawable/ic_slider_secondary"
android:splitTrack="false"
android:thumbOffset="16.5dp"/>
快乐编码:)
我正在尝试实现自定义搜索栏,如下图所示
为此我做了下面的代码
我已经为 seekbar progressDrawable 创建了 drawable 让我知道是否需要代码,我会 post 在这里。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/llScale"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/sliderText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Bernard"
android:textColor="@color/blue"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="@drawable/slider_background"
android:padding="3dp">
<SeekBar
android:id="@+id/ratingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:max="10"
android:maxHeight="100dp"
android:thumbTintMode="multiply"
android:progressDrawable="@drawable/progressbar"
android:thumb="@drawable/ic_slider_secondary"/>
<TextView
android:id="@+id/seekBarHint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Drag slider across"
android:textColor="@color/dark_gray"/>
</FrameLayout>
<TextView
android:id="@+id/progressText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_slider_progress"
android:gravity="center"
android:textColor="@color/white"
android:textStyle="bold"/>
</FrameLayout>
</LinearLayout>
但是使用上面的代码我得到的是下图
浅红色没有被完全填充,它留下了一些 space 并且最后圆圈超出了边界。
Gradle
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.myapp"
minSdkVersion 16
targetSdkVersion 23
multiDexEnabled true
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
谁能帮我解决这个问题
我使用了您的代码并创建了演示,其中我做了如下 2 处更改:
为我设置合适的 thumbOffset 值 16.5dp 有效。
再添加一个 属性 android:splitTrack="false" 这将有助于删除 space 周围的拇指可绘制对象。
<SeekBar android:id="@+id/ratingBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:maxHeight="100dp" android:progressDrawable="@drawable/progressbar" android:thumb="@drawable/ic_slider_secondary" android:splitTrack="false" android:thumbOffset="16.5dp"/>
快乐编码:)