根据图像尺寸动态居中搜索栏

Posted 2023-04-18

【中文标题】根据图像尺寸动态居中搜索栏

【英文标题】：Dynamically centering a seekbar based on image dimensions

【发布时间】：2019-07-29 09:56:54

【问题描述】：

我正在尝试在已加载到 imageview 中的图像下放置一个搜索栏 - xml（如下）工作正常，但 我想做的是将搜索栏的最大长度设置为加载时图像的宽度 并将其置于图像下方。我对这个组做了一些研究，下面的代码调整了栏的大小：

   LayoutParams lp = new LayoutParams(img2.getWidth(), 50);
   simpleSeekBar.setLayoutParams( lp );

但是，它会将搜索栏放在左边距；如何将其更改为居中？ 当用户在横向和纵向之间交替时，我如何让它工作？在两个方向之间切换时，图像居中 - 如何让搜索栏也动态居中？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="vertical"
android:weightSum="1"
>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frlayout"
    android:layout_weight="0.80"
    android:layout_
        android:layout_>
            <ImageView
            android:id="@+id/ImageTest"
                android:background="@android:color/transparent"
            android:layout_
            android:layout_
            android:adjustViewBounds="true" />
    </FrameLayout>
<SeekBar
    android:id="@+id/seekBar"
    android:layout_
    android:layout_
    android:progress="1000"
    android:max="2000"
    />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:layout_weight=".20"
android:background="#004D79"
android:orientation="horizontal">
    <Button
        android:text="Open File"
        android:layout_
        android:layout_
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/ofbutton" />
    <Button
        android:text="Save File"
        android:layout_
        android:layout_
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/sfbutton" />
    <NumberPicker
        android:id="@+id/np"
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:background="@drawable/drawablenp"
        android:layout_centerVertical="true"
        />
</LinearLayout>

【参考方案1】：

对于这个简单的布局（以及更多），您只需使用constraint layout - 非常易于使用并且对不同的屏幕尺寸非常敏感。

这是您要求的示例：

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_
    android:layout_>

    <ImageView
        android:id="@+id/ImageTest"
        android:layout_
        android:layout_
        android:layout_marginEnd="59dp"
        android:adjustViewBounds="true"
        android:background="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/ofbutton"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="0dp" />


    <SeekBar
        android:id="@+id/seekBar"
        android:layout_
        android:layout_
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView"
        app:layout_constraintHorizontal_bias="0.581"
        app:layout_constraintStart_toStartOf="@+id/imageView"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />


    <Button
        android:id="@+id/ofbutton"
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Open File"
        app:layout_constraintBottom_toBottomOf="@+id/sfbutton"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/sfbutton" />

    <Button
        android:id="@+id/sfbutton"
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Save File"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_
        android:layout_
        android:layout_marginTop="16dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars[12]" />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

ConstraintLayout 是否允许动态添加项目，例如编辑视图等？这就是我使用 FrameLayout 的原因。也就是说，我最终需要能够做这样的事情： scaleview = new ScaleView( getApplicationContext() ); frLayout.addView(scaleview, Math.round(width),Math.round(height/8)); scaleview.setHeight(Math.round(height/8)); scaleview.setWidth(Math.round(2*width/3)); scaleview.setWindowWidth(宽度); （对不起，这不是缩进代码）

通过动态添加到它们之上，你想问它们是否可以像框架布局一样？

是的，我想是的。这是我以前做过的一个技巧（从代码片段中可以看出）。我不知道 ConstraintLayout 是否允许在顶部添加新项目 - 如果不允许，我不能使用它，抱歉。

所以是的，您可以使用 change your constraints programmatically 来实现 - 对于视图上的简单视图，您可以使用这些约束 - app:layout_constraintBottom_toBottomOf="@+id/button" app:layout_constraintEnd_toEndOf="@+id/button" app:layout_constraintStart_toStartOf="@+id/button" app:layout_constraintTop_toBottomOf="@+id/button"

【参考方案2】：

尝试将 layout_gravity 设置为 center_horizo​​ntal。此外，您可能希望将 height 设置为 wrap_content 而不是 50。像这样：

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(img2.getWidth(), LinearLayout.LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER_HORIZONTAL;
simpleSeekBar.setLayoutParams( lp );

希望对你有帮助

【讨论】：

谢谢 - 这似乎工作。现在又抛出了另一个错误；搜索栏的宽度与图像宽度不同。它不是很多，两边都有几十个像素，但它很明显。我被难住了。

您是否尝试过手动将图像和搜索栏的宽度设置为固定值？比如500？看看有没有区别

我想我明白了——而且很明显我觉得很傻。滑块本身不会延伸到视图的整个长度。左右边缘与滑块开始和结束的位置之间存在间隙。哎呀。