Android：连续 3 个按钮，保持背景的纵横比（在小部件上！）

Question

我的小部件布局上连续有 3 个按钮。

请考虑这是一个widget，即无法使用自定义按钮（如 ImageButton）。

我想在 LinearLayout 中按重量规定它们的大小，并且我还希望它们保持背景的纵横比。

我找到了这个帖子：How to keep fixed aspect ratio for a button in android，但它对我不起作用。

这是我的布局 xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <ImageView
            android:id="@+id/ivArt"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/ic_music_art_empty"/>
       
        
        <LinearLayout
            android:id="@+id/controls"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="4">
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/btnPrev"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_button_prev"
                    android:backgroundTint="#ff0000"/>
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:gravity="center">
    
                <Button
                    android:id="@+id/btnPlayPause"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_button_play"
                    android:backgroundTint="#ff0000"/>
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <Button
                    android:id="@+id/btnNext"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_button_next"
                    android:backgroundTint="#ff0000" />
            </LinearLayout>
        </LinearLayout>
        
    </LinearLayout>

</LinearLayout>

以下是图片：

音乐符号：

<?xml version="1.0" encoding="utf-8"?>
<vector android:height="250.0dip" android:width="250.0dip" android:viewportWidth="200.0" android:viewportHeight="200.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ff999999" android:pathData="M86.44 28.76c16.05 -3.04 33.13 -0.44 47.5 7.34 13.5 7.26 24.61 18.88 31.17 32.73 6.95 14.52 8.88 31.42 5.17 47.1 -3.78 16.9 -14.01 32.21 -28.03 42.35 -13.48 9.9 -30.53 14.85 -47.21 13.68C78.05 170.88 61.56 163.51 49.42 151.57 39.02 141.51 31.73 128.25 28.95 114.04 25.89 99.06 27.77 83.11 34.31 69.29 43.88 48.48 63.89 32.88 86.44 28.76m6.89 13.7c-18.4 1.95 -35.45 13.43 -44.17 29.74 -8.67 15.59 -9.37 35.29 -1.89 51.47 4.65 10.27 12.41 19.09 21.96 25.07 12.82 8.13 28.96 10.8 43.72 7.27 14.39 -3.29 27.28 -12.43 35.28 -24.81 7.87 -12.05 10.99 -27.1 8.44 -41.28 -2.76 -16.5 -13.21 -31.45 -27.65 -39.87 -10.65 -6.37 -23.38 -8.93 -35.69 -7.59z" android:fillAlpha="0.6" />
    <path android:fillColor="#ff999999" android:pathData="M82.84 75.82c14.43 -4.14 28.87 -8.28 43.3 -12.45 0.03 16.21 0.01 32.41 0.01 48.62 0.18 5.66 -3.72 11.17 -9.24 12.62 -6.73 2.23 -14.58 -2.63 -15.82 -9.56 -1.46 -6.04 2.41 -12.58 8.23 -14.54 2.98 -1.2 6.2 -0.6 9.2 0.2 -0.07 -6.73 -0.03 -13.46 -0.03 -20.19 -9.64 2.88 -19.35 5.56 -29.01 8.39 -0.04 11.67 0.07 23.35 -0.05 35.02 -0.04 6.85 -6.65 12.8 -13.5 11.98 -8.08 -0.17 -14.03 -9.44 -10.95 -16.9 2.28 -6.7 10.45 -10.06 16.92 -7.39 -0.14 -11.66 -0.09 -23.33 -0.04 -34.99 0.24 -0.2 0.73 -0.61 0.98 -0.81z" android:fillAlpha="0.6" />
</vector>

上一个按钮：

<?xml version="1.0" encoding="utf-8"?>
<vector android:height="130.0dip" android:width="130.0dip" android:viewportWidth="250.0" android:viewportHeight="250.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffffff" android:pathData="M157.47 86.6c1.87 -1.4 4.51 0.04 4.43 2.35 0.09 24.01 0.07 48.03 0.01 72.05 0.16 2.23 -2.42 3.85 -4.31 2.5 -19.23 -11.02 -38.37 -22.22 -57.55 -33.35 -0.23 8.64 0 17.29 -0.11 25.93 0.17 3.21 -2.78 6 -5.94 5.9 -3.14 0.1 -6.12 -2.65 -5.94 -5.87 -0.04 -20.41 -0.04 -40.82 0 -61.23 -0.26 -4.25 4.85 -7.22 8.54 -5.29 2.01 0.93 3.42 3.04 3.34 5.29 0.14 8.34 -0.17 16.69 0.16 25.03 19.07 -11.2 38.22 -22.26 57.37 -33.31z" />
</vector>

播放按钮：

<?xml version="1.0" encoding="utf-8"?>
<vector android:height="130.0dip" android:width="130.0dip" android:viewportWidth="250.0" android:viewportHeight="250.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffffff" android:pathData="M109.56 20.84c22.27 -2.86 45.42 1.58 64.96 12.66 15.6 8.78 28.88 21.63 38.18 36.92 10.86 17.76 16.23 38.81 15.16 59.6 -1.02 23.22 -10.1 46 -25.35 63.53 -10.81 12.55 -24.6 22.53 -39.97 28.72 -20.03 8.22 -42.64 9.91 -63.7 4.92C81.39 223.06 64.98 214.43 51.87 202.18 35.99 187.71 24.84 168.16 20.37 147.15 14.97 122.54 18.89 96.04 31.18 74.05 46.96 45.24 76.94 24.84 109.56 20.84m0.01 6.01c-22.44 2.97 -43.58 14.2 -59 30.71 -12.59 13.58 -21.45 30.7 -24.9 48.92 -3.92 21.51 -1.03 44.43 9.35 63.79 12.48 24.66 35.89 43.36 62.56 50.48 22.43 5.84 47.08 3.93 67.94 -6.4 20.38 -9.61 37.24 -26.48 46.84 -46.86 9.1 -18.27 11.54 -39.47 8.24 -59.51C215.45 77.89 195.47 50.75 168.21 36.99 150.39 27.43 129.54 24.28 109.57 26.85Z" />
    <path android:fillColor="#ffffffff" android:pathData="M89.54 73.72c1.6 -1.23 3.68 -0.49 5.22 0.45 27.02 15.66 54.08 31.28 81.09 46.96 1.75 0.87 2.64 2.85 2.02 4.73 -1.05 1.93 -3.25 2.72 -5.02 3.83 -26.24 15.15 -52.44 30.38 -78.69 45.52 -2.55 1.95 -6.22 0.02 -6.09 -3.17 -0.13 -31.01 0 -62.03 -0.07 -93.04 -0.08 -1.87 0.13 -3.9 1.54 -5.28z" />
</vector>

下一步按钮：

<?xml version="1.0" encoding="utf-8"?>
<vector android:height="130.0dip" android:width="130.0dip" android:viewportWidth="250.0" android:viewportHeight="250.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffffff" android:pathData="M88.11 88.86c-0.03 -2.27 2.54 -3.62 4.39 -2.28 19.14 11.06 38.32 22.08 57.35 33.34 0.5 -8.66 -0.08 -17.35 0.3 -26.01 0.46 -4.32 6.27 -6.4 9.52 -3.66 1.85 1.24 2.41 3.55 2.3 5.65 -0.04 20.08 0.03 40.17 -0.04 60.25 0.17 3.21 -2.84 5.96 -5.99 5.83 -3.13 0.07 -6.04 -2.7 -5.88 -5.87 -0.19 -8.66 0.27 -17.34 -0.23 -25.99 -18.17 10.83 -36.59 21.25 -54.84 31.96 -1.33 0.73 -2.63 1.61 -4.13 1.94 -2.09 0.05 -2.98 -2.17 -2.81 -3.95 0.04 -23.73 -0.08 -47.48 0.06 -71.21z" />
</vector>

这就是现在的样子：

我对权重很满意，但我想在controls 线性布局上保持背景的纵横比。正如我所提到的，我尝试了其他人的解决方案，但没有成功，而且这是一个小部件，所以 ImageButton 不是一个选项，请不要推荐我。

另一个注意事项：如果我删除 ivArt imageview，它会按预期工作。但是我想把那个 ImageView 放在控制按钮的前面，而且它也必须有固定的大小。

所以从技术上讲，我希望根据宽度（由它们的重量决定）获得完美的方形按钮。

Answer 1

试试这个，固定长宽比，希望能解决你的问题

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</android.support.constraint.ConstraintLayout>