Question

我想要实现垂直（直立）搜索栏来控制音量。目前它显示为横向的。下面的图像类似于我想要实现的布局。

单击声音按钮后，单击声音图标时，应打开控制音量的搜索栏。

app

任何人都可以帮我解决这个问题吗？

以下是代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true"
android:id="@+id/r1">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#38538e"
android:id="@+id/toolBar"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:layout_alignBottom="@+id/horizontalScrollView"
android:layout_marginLeft="45dp"
android:layout_marginTop="7dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">

</android.support.v7.widget.Toolbar>


<LinearLayout
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/toolbartitle"
    android:layout_toLeftOf="@+id/toolbartitle"
    android:layout_toStartOf="@+id/toolbartitle"
    android:id="@+id/linearLayout3"
    android:orientation="horizontal"></LinearLayout>

<HorizontalScrollView
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:id="@+id/horizontalScrollView"
    android:fillViewport="false"
    android:background="#ffffff"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:scrollbars="none"
    android:scrollbarAlwaysDrawHorizontalTrack="true"
    android:contextClickable="false"
    android:focusable="false"
    android:layout_marginTop="80dp">




<RelativeLayout
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:background="#ffffff"
    android:layout_alignTop="@+id/horizontalScrollView"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <RelativeLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/miniscrollRelative"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/home"
            android:id="@+id/textViewab"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp"/>

        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/player"
            android:id="@+id/textViewba"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="70dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/Your_play.."
            android:id="@+id/textViewca"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="130dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="@string/downloads"
            android:id="@+id/textViewda"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="200dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/streaming"
            android:id="@+id/textViewea"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="270dp"
            android:layout_marginTop="50dp"
            android:textSize="8dp" />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonhomea"
            android:src="@drawable/homenew"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_alignBottom="@+id/imageButtonda"
            android:layout_toRightOf="@+id/imageButtonaab"
            android:layout_toEndOf="@+id/imageButtonaab" />

        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonaa"
            android:src="@drawable/player"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonaab"
            android:src="@drawable/player_active"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:visibility="gone"/>

        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonba"
            android:src="@drawable/mydownload"
            android:layout_marginLeft="195dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonbab"
            android:src="@drawable/download_active"
            android:layout_marginLeft="195dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonca"
            android:src="@drawable/playlist"
            android:layout_marginLeft="130dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoncab"
            android:src="@drawable/playlist_active"
            android:layout_marginLeft="130dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonda"
            android:src="@drawable/streaming"
            android:layout_marginLeft="265dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtondab"
            android:src="@drawable/streaming_active"
            android:layout_marginLeft="265dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginTop="10dp"
            android:visibility="gone"/>


    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/miniscrollRelative"
        android:layout_marginLeft="30dp">
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/send_wishes"
            android:id="@+id/textViewfa"
            android:textSize="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/hit_parade"
            android:id="@+id/textViewga"
            android:textSize="8dp"
            android:layout_marginLeft="78dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/uzbek_instr"
            android:id="@+id/textViewha"
            android:textSize="8dp"
            android:layout_marginLeft="145dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/your_news"
            android:id="@+id/textViewia"
            android:textSize="8dp"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="50dp"
            />
        <TextView
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/extras"
            android:id="@+id/textViewja"
            android:textSize="8dp"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="50dp"
            android:layout_marginRight="5dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonea"
            android:src="@drawable/wishes"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:layout_alignTop="@+id/imageButtonfa"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoneab"
            android:src="@drawable/hitparadea"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonfa"
            android:src="@drawable/hitparade"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonfab"
            android:src="@drawable/hitparade1"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonga"
            android:src="@drawable/instrument"
            android:layout_marginLeft="150dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtongab"
            android:src="@drawable/instrument_active"
            android:layout_marginLeft="150dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonha"
            android:src="@drawable/news"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonhab"
            android:src="@drawable/news_active"
            android:layout_marginLeft="220dp"
            android:layout_marginTop="10dp"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:background="#ffffff"
            android:visibility="gone"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtonia"
            android:src="@drawable/extras"
            android:layout_marginLeft="290dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginRight="5dp"/>
        <ImageButton
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:id="@+id/imageButtoniab"
            android:src="@drawable/extras_active"
            android:layout_marginLeft="290dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="8dp"
            android:layout_marginRight="5dp"
            android:visibility="gone"/>



    </RelativeLayout>



</RelativeLayout>
</HorizontalScrollView>
<ImageButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/right"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_alignBottom="@+id/horizontalScrollView"
    android:layout_alignTop="@+id/toolBar"
    android:id="@+id/right" />
<ImageButton
    android:id="@+id/left"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/left"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignBottom="@+id/horizontalScrollView"
    android:layout_alignTop="@+id/toolBar" />
<FrameLayout
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:name="android.app.ListFragment"
    android:id="@+id/fragment"
    android:background="#ffffff"
    android:layout_below="@+id/horizontalScrollView"
    android:layout_alignRight="@+id/toolBar"
    android:layout_alignEnd="@+id/toolBar">

    <FrameLayout
        android:background="#f2434242"
        android:layout_width="match_parent"
        android:layout_height="202dp"
        android:layout_gravity="left|bottom">
        <ImageView
            android:layout_width="49dp"
            android:layout_height="49dp"
            android:background="@drawable/playerbar"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="263dp"
            android:layout_gravity="left|center_vertical">

            <ToggleButton
                android:background="@drawable/minipause"
                android:textOn=""
                android:textOff=""
                android:src="@drawable/mini"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:id="@+id/button2"
                android:layout_gravity="center_horizontal|top"
                android:layout_marginRight="29dp"
                android:layout_marginEnd="29dp"
                android:layout_alignTop="@+id/textView5"
                android:layout_toLeftOf="@+id/button4"
                android:layout_toStartOf="@+id/button4" />

            <Button
                android:background="@drawable/minisound"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:id="@+id/button4"
                android:layout_gravity="center_horizontal|top"
                android:layout_alignTop="@+id/button2"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

            <SeekBar
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:id="@+id/seekBar2"
                android:layout_weight="0.87"
                android:progress="100"
                android:progressDrawable="@drawable/seekbar3"
                android:max="200"
                android:thumb="@null"
                android:maxHeight="3dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:layout_below="@+id/button2"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginTop="30dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Radio"
                android:textColor="#ffffff"
                android:id="@+id/textView5"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginLeft="54dp"
                android:layout_marginStart="54dp"
                android:layout_marginTop="38dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="UZ"
                android:textColor="#ffffff"
                android:id="@+id/textView6"
                android:layout_below="@+id/textView5"
                android:layout_alignLeft="@+id/textView5"
                android:layout_alignStart="@+id/textView5" />

        </RelativeLayout>

    </FrameLayout>

</FrameLayout>

<TextView
    android:layout_width="match_parent" android:layout_height="50dp"
    android:text="player"

    android:textSize="22sp"
    android:gravity = "center"
    android:id="@+id/toolbartitle"
    android:layout_above="@+id/toolBar"
    android:layout_alignLeft="@+id/toolBar"
    android:layout_alignStart="@+id/toolBar" />

Answer 1

您可以尝试使用以下库来创建自定义垂直搜索栏

dependencies {
    compile 'com.h6ah4i.android.widget.verticalseekbar:verticalseekbar:0.7.0'
}

要在xml布局中使用

<!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
    android:layout_width="wrap_content"
    android:layout_height="150dp">
    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
        android:id="@+id/mySeekBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:splitTrack="false"
        app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

参考：https://github.com/h6ah4i/android-verticalseekbar

更新：要自定义搜索栏，您需要添加 android：thumb ＆amp;的机器人：progressDrawable 即可。首先，在drawable文件夹中创建以下drawable：

<强> seekbar_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#404040" />
            <corners android:radius="40dp" />
        </shape>
    </item>
</selector>

<强> seekbar_progress

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke
        android:width="4dp"
        android:color="#777777" />
</shape>

<强>搜索条

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"
        android:left="2dp">
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

最后，

<强> seekbar_thumb

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#7FD319" />
            <size
                android:width="15dp"
                android:height="15dp" />
        </shape>
    </item>
</layer-list>

现在使用拇指＆amp;更新您的搜索栏的 progreeDrawable ，

<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center"> <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar android:id="@+id/opacity_seek" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:progressDrawable="@drawable/seekbar" android:splitTrack="false" android:thumb="@drawable/seekbar_thumb_green" app:seekBarRotation="CW270" />  </com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Answer 2

请在您的代码中添加android:rotation="270"

       <SeekBar
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:id="@+id/seekBar2"
            android:layout_weight="0.87"
            android:progress="100"
            android:progressDrawable="@drawable/seekbar3"
            android:max="200"
            android:thumb="@null"
            android:maxHeight="3dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_below="@+id/button2"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="30dp"
            android:rotation="270"/>

它肯定会起作用，试试吧

Answer 3

我找到了一种在垂直方向上使用新的 google material滑块的方法。我不会说这很棘手，但这是一种解决方法，因为我旋转并将滑块添加到自定义FrameLayout中，而不是覆盖滑块本身。这样，可以正确显示Android Studio中的布局预览，并且可以避免拇指光晕被切断（仅在使用和旋转滑块本身时会发生这种情况）。

自定义视图的属性集将转发到滑块，因此您可以按照自定义滑块的相同方式对其进行自定义。

这是一个简化的示例，在计算滑块大小时不考虑defStyleAttr和填充！

class VerticalSlider 
     @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null)
     : FrameLayout(context, attrs) {

private val slider: Slider = Slider(context, attrs)

init {
    slider.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT,
                                       LayoutParams.WRAP_CONTENT, Gravity.CENTER)
    slider.rotation = 90f
    addView(slider)
}

@Synchronized
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val layoutHeight = MeasureSpec.getSize(heightMeasureSpec)
    // set slider width to layout heigth and avoid thump halo gets cut off
    slider.layoutParams.width = layoutHeight - slider.haloRadius - 2
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    // update layout width to the rotated height of the slider
    // otherwise the layout remains quadratic
    setMeasuredDimension(slider.measuredHeight, measuredHeight)
}
}

example usage

垂直搜索栏在Android Studio

3 个答案: