Question

我想创建一个复合项目并为它设置不同的样式，但是到目前为止我还没有看到如何使用单一样式实现它，我必须使用不同的样式。

为了说明我的问题，我将定义一个示例场景。想象一下，我有一个包含项目的列表，这些项目是用户，我有一个头像，一个用户名和一封电子邮件。我想在我的主题上为这三种不同的东西设计风格。

我想要实现的目标：

（文件res / layout / item_user.xml，这将为ListView充气）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    style="@style/CustomStyleA">

    <ImageView
        style="avatarStyle"
        android:id="@+id/avatar"
        android:src="@drawable/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="usernameStyle"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="emailStyle"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

（文件res / values / styles.xml）

<resources>

    <!-- Style A -->
    <style name="CustomStyleA">
        <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleA.Username</item>
        <item name="emailStyle">@style/CustomStyleA.Email</item>
    </style>

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

    <!-- Style B -->
    <style name="CustomStyleB">
        <item name="avatarStyle">@style/CustomStyleB.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleB.Username</item>
        <item name="emailStyle">@style/CustomStyleB.Email</item>
    </style>

    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

我实际需要做什么

（文件res / layout / item_user.xml，这将为ListView充气）

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <ImageView
        style="@style/CustomStyleA.Avatar"
        android:id="@+id/avatar"
        android:src="@drawable/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="@style/CustomStyleA.Email"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="@style/CustomStyleA.Email"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

（文件res / values / styles.xml）

<resources>

    <!-- Style A -->

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

    <!-- Style B -->

    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

正如您所看到的，第二种情况暗示如果我想要更改项目的整个样式，我必须为每个视图单独执行。我想只改变顶级风格。

Answer 1

您可以为其定义自定义主题属性。然后，视图将仅引用主题属性，您可以通过更改主题属性值来更改样式。

首先在res / values / attrs.xml中声明自定义主题属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="MyCustomAttributes">
        <attr name="avatarStyle" format="reference" />
        <attr name="usernameStyle" format="reference" />
        ...
    </declare-styleable>

</resources>

然后在主题中定义它们：

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
    <item name="usernameStyle">@style/CustomStyleA.Username</item>
    ...
</style>

并像这样引用它们：

<ImageView
    style="?avatarStyle"
    android:id="@+id/avatar"
    android:src="@drawable/avatar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Answer 2

这可以通过定义您自己的主题和您自己的属性来实现。

这是您的styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <!-- Style A -->
    <style name="CustomStyleA" parent="AppTheme">
        <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleA.Username</item>
        <item name="emailStyle">@style/CustomStyleA.Email</item>
    </style>

    <!-- Style B -->
    <style name="CustomStyleB" parent="AppTheme">
        <item name="avatarStyle">@style/CustomStyleB.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleB.Username</item>
        <item name="emailStyle">@style/CustomStyleB.Email</item>
    </style>

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
        <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>




    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
        <item name="android:textColor">@android:color/holo_blue_dark</item>
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

avatarStyle，usernameStyle，emailStyle是我们从未定义的属性。因此，让我们在attrs.xml中定义我们的属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--<declare-styleable name="AppTheme">-->
        <attr name="avatarStyle" format="reference"/>
        <attr name="usernameStyle" format="reference"/>
        <attr name="emailStyle" format="reference"/>
    <!--</declare-styleable>-->
</resources>

和您提到的布局layout/item_user.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    >

    <ImageView
        style="?attr/avatarStyle"
        android:id="@+id/avatar"
        android:src="@drawable/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="?attr/usernameStyle"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="?attr/emailStyle"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

您只需在android:theme文件中的活动代码中切换AndroidManifest.xml属性即可。

android:theme="@style/CustomStyleB"

样式化复合视图

2 个答案: