在Android中使用Google Material库创建垂直滑块。

huangapple
go评论95阅读模式
英文:

Vertical slider in android using google material library

问题

我有一个在水平方向对齐的Google材料滑块：

  1. <com.google.android.material.slider.Slider
  2.     android:id="@+id/slider_tilt"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:layout_above="@+id/tilt_btn"
  6.     android:layout_marginBottom="20dp"
  7.     android:layout_marginTop="10dp"
  8.     android:layout_marginHorizontal="65dp"
  9.     android:valueFrom="-4"
  10.     android:valueTo="4"
  11.     android:stepSize="0.5"/>

但我想要它在垂直方向并且对齐到屏幕的左侧。我尝试过旋转它，但无法获得左侧对齐，请告诉我是否有办法解决。

英文:

I have this google material slider aligned in horizontal direction:

  1. <com.google.android.material.slider.Slider
  2.     android:id="@+id/slider_tilt"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:layout_above="@+id/tilt_btn"
  6.     android:layout_marginBottom="20dp"
  7.     android:layout_marginTop="10dp"
  8.     android:layout_marginHorizontal="65dp"
  9.     android:valueFrom="-4"
  10.     android:valueTo="4"
  11.     android:stepSize="0.5"/>

but I want it to be in vertical direction and aligned to the left of the screen. I tried rotating it but then couldn't get left side alignment, please let me know if there is a way out.

答案1

得分: 9

将属性 android:rotation 的值设置为 270，然后将其放入一个 FrameLayout 中。

英文: 
  2.         <FrameLayout
  3.             android:layout_width="32dp"
  4.             android:layout_height="200dp"
  5.             android:layout_gravity="center"
  6.             android:orientation="vertical">
  8.             <com.google.android.material.slider.Slider
  9.                 android:id="@+id/sldPenWidth"
  10.                 android:layout_width="200dp"
  11.                 android:layout_height="32dp"
  12.                 android:layout_gravity="center"
  13.                 android:rotation="270"
  14.                 android:value="1"
  15.                 android:valueFrom="0.1"
  16.                 android:valueTo="10" />
  18.         </FrameLayout>

set attr android:rotation value to 270, then put it into a FrameLayout

答案2

得分: 1

以下是您要翻译的内容：

  1. 目前我有这样的代码：
  3.     class VerticalSlider @JvmOverloads
  4.     constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
  5.         : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
  6.         init {
  7.             rotation = 270f
  8.         }
  9.     
  10.         override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  11.             super.onMeasure(heightMeasureSpec, widthMeasureSpec)
  12.         }
  13.     }
  15. 但我还需要包装它：
  17. ```xml
  18.     <FrameLayout 
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent">
  22.         <....VerticalSlider
  23.             style="@style/InstSliderWhiteMatchWrap"
  24.             android:layout_marginTop="10dp"
  25.             android:layout_marginBottom="10dp"
  26.             android:value="100"
  27.             app:haloRadius="15dp"
  28.             app:thumbRadius="9dp" />
  30.     </FrameLayout>

不过，我遇到了 haloRadius 的问题，不得不将它设置为较低的值以避免显示硬线，似乎布局边距没有被正确考虑，我尝试了许多方法...不过这种方式对我来说更可读和可重用一些。

英文:

For now I have something like this:

  1. class VerticalSlider @JvmOverloads
  2. constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
  3.     : com.google.android.material.slider.Slider(context, attrs, defStyleAttr) {
  4.     init {
  5.         rotation = 270f
  6.     }
  8.     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  9.         super.onMeasure(heightMeasureSpec, widthMeasureSpec)
  10.     }
  11. }

Still I have to wrap it:

  1.    &lt;FrameLayout 
  2.             android:layout_width=&quot;match_parent&quot;
  3.             android:layout_height=&quot;match_parent&quot;&gt;
  5.        &lt;....VerticalSlider
  6.             style=&quot;@style/InstSliderWhiteMatchWrap&quot;
  7.             android:layout_marginTop=&quot;10dp&quot;
  8.             android:layout_marginBottom=&quot;10dp&quot;
  9.             android:value=&quot;100&quot;
  10.             app:haloRadius=&quot;15dp&quot;
  11.             app:thumbRadius=&quot;9dp&quot; /&gt;
  13.     &lt;/FrameLayout&gt;

I had issue with haloRadius thou, had to set it to lower value to not show hard lines, looks like layout margin is not take correctly into account and I tried milliard of things... Otherwise little more readable and reusable this way for me.

huangapple
  • 本文由 发表于 2020年7月30日 17:26:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/63170142.html
  • android
  • android-layout
  • java
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定