Android Studio ImageButton实现样式后更改形状

时间:2019-05-01 10:04:23

标签: android xml

我在这里搜索过,似乎没有人遇到这个问题。

我正在关注here.

中的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文件中,则应该看到类似这样的内容。

enter image description here

现在的问题是: 我想为按钮实现一些样式。我已经这样更新了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" />

减号按钮突然膨胀。

enter image description here

我了解到子视图会覆盖父视图,但是我看不出这可能是个问题,因为图像大小没有变化,也没有压缩它。

3 个答案:

答案 0 :(得分:0)

您的样式有误。您使用的是ImageButton而不是Button

所以,你应该写

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

答案 1 :(得分:0)

您在分配样式时犯了一个错误。您需要使用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>

答案 2 :(得分:0)

问题在于,在样式定义中,您的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样式中删除父项:

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