Android Studio ImageButton實現樣式后更改形狀

Question

我在這里搜索過，似乎沒有人遇到過這個問題。

我從這里開始關注Android Studio教程。

基本上發生的事情是，當我實現XML代碼時，我的按鈕看起來不錯，但是當我將一些XML代碼轉移到我的styles.xml並將其導入到activity_main.xml文件中時，我的按鈕會更改其尺寸。

這是我的activity_main.xml文件。

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <ImageButton
            android:id="@+id/decreaseTeam1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_minus"
            android:contentDescription="@string/minus_button"
            android:background="@drawable/button_background"
            android:onClick="decreaseScore" />

        <ImageButton
            android:id="@+id/increaseTeam1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_plus"
            android:contentDescription="@string/plus_button"
            android:layout_alignParentEnd="true"
            android:onClick="increaseScore"
            android:background="@drawable/button_background"/>

        <TextView
            android:id="@+id/score_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:text="@string/initial_score"/>

        <TextView
            android:id="@+id/team1_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_1"/>

    </RelativeLayout>



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageButton
            android:id="@+id/decreaseTeam2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_minus"
            android:background="@drawable/button_background"
            android:contentDescription="@string/minus_button"
            android:onClick="decreaseScore"
            />

        <ImageButton
            android:id="@+id/increaseTeam2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_plus"
            android:contentDescription="@string/plus_button"
            android:onClick="increaseScore"
            android:background="@drawable/button_background"/>

        <TextView
            android:id="@+id/score_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:text="@string/initial_score"/>

        <TextView
            android:id="@+id/team2_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_2"/>

    </RelativeLayout>

</LinearLayout>

我的strings.xml文件。

<resources>
    <string name="app_name">Scorekeeper</string>
    <string name="team_2">Team 2</string>
    <string name="initial_score">0</string>
    <string name="plus_button">Plus Button</string>
    <string name="minus_button">Minus Button</string>
    <string name="team_1">Team 1</string>
</resources>

drawable.ic_minus ：

<vector android:height="40dp" android:viewportHeight="24.0"
    android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M19,13H5v-2h14v2z"/>
</vector>

drawable.ic_plus ：

<vector android:height="40dp" android:viewportHeight="24.0"
    android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

drawable.button_background ：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary"/>
</shape>

我希望我不會錯過任何東西。 如果將我的代碼復制粘貼到一個空的活動activity_main.xml文件中，則應該會看到類似的內容。

現在的問題是：我想為按鈕實現一些樣式。 我已經更新了styles.xml 。 在這種情況下，我有一個父ScoreButton僅使用背景，而子元素是加號和減號，它們使用圖片和說明。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ScoreButtons" parent="Widget.AppCompat.Button">
        <item name="android:background">@drawable/button_background</item>
    </style>

    <style name="PlusButtons" parent="ScoreButtons">
        <item name="android:src">@drawable/ic_plus</item>
        <item name="android:contentDescription">@string/plus_button</item>
    </style>

    <style name="MinusButtons" parent="ScoreButtons">
        <item name="android:src">@drawable/ic_minus</item>
        <item name="android:contentDescription">@string/minus_button</item>

    </style>

</resources>

例如，如果我這樣更新按鈕的代碼之一，則將@+id/decreaseTeam1替換為以下代碼：

    <ImageButton
        android:id="@+id/decreaseTeam1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        style="@style/PlusButtons"
        android:onClick="decreaseScore" />

減號按鈕突然膨脹。

我讀到子視圖會覆蓋父視圖，但是我看不出這可能是個問題，因為圖像大小沒有變化，也沒有壓縮。

Answer 1

您的風格有誤。 您正在使用ImageButton而不是Button

所以，你應該寫

<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">  // ImageButton
    <item name="android:background">@drawable/button_background</item>
</style>

Answer 2

您在分配樣式時犯了一個錯誤。 您需要使用ImageButton而不是Button。

用這個：

  <style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:contentDescription">@string/minus_button</item>
    </style>

代替這個：

      <style name="ScoreButtons" parent="Widget.AppCompat.Button">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:contentDescription">@string/minus_button</item>
    </style>

Answer 3

問題在於，在樣式定義中，您的ScoreButtons具有Widget.AppCompat.Button作為父項。 此樣式定義了minHeight和minWidth，如下所示：

<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
    <item name="android:background">@drawable/abc_btn_default_mtrl_shape</item>
    <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:minWidth">88dip</item>
    <item name="android:focusable">true</item>
    <item name="android:clickable">true</item>
    <item name="android:gravity">center_vertical|center_horizontal</item>
</style>

因此，為了解決您的問題，您只需要從ScoreButtons樣式中刪除父項ScoreButtons ：

<style name="ScoreButtons">
    <item name="android:background">@drawable/button_background</item>
</style>