以“按”效果查看

时间:2019-10-30 13:30:57

标签: android android-styles

Android Studio 3.6

在我的xml布局中:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/feedbackContainer"
        android:layout_width="0dp"
        android:layout_height="174dp"
        app:layout_constraintEnd_toEndOf="@+id/checkContainer"
        app:layout_constraintStart_toStartOf="@+id/checkContainer"
        app:layout_constraintTop_toBottomOf="@+id/checkContainer">

        <ImageView
            android:id="@+id/feedbackViewCircle"
            android:layout_width="124dp"
            android:layout_height="124dp"
            android:background="@drawable/circle_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/heartOutlineNotMadeContainer"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:background="@drawable/feedback_outline_bg"
            app:layout_constraintBottom_toBottomOf="@+id/feedbackViewCircle"
            app:layout_constraintEnd_toEndOf="@+id/feedbackViewCircle"
            app:layout_constraintStart_toStartOf="@+id/feedbackViewCircle"
            app:layout_constraintTop_toTopOf="@+id/feedbackViewCircle" />

        <TextView
            android:id="@+id/feedbackTextView"
            style="@style/defaultTextStyle2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:text="@string/feedback"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/feedbackViewCircle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

/circle_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_enabled="false" />
    <item android:drawable="@drawable/circle_paint" />
</selector>

/feedback_outline_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_heartoutlinemade" android:state_enabled="false" />
    <item android:drawable="@drawable/ic_heartoutlinenotmade" />
</selector>

此处background / feedbackViewCircle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_enabled="false" />
    <item android:drawable="@drawable/circle_paint" />
</selector>

结果如下:

enter image description here

好。工作。

但是我需要具有“按”效果。像这样的SMT:

enter image description here

2 个答案:

答案 0 :(得分:0)

使“视图”可单击,并为正常和按下状态背景添加选择器,它们可以正常工作。

<View
    android:id="@+id/feedbackViewCircle"
    android:layout_width="124dp"
    android:layout_height="124dp"
    android:clickable="true"
    android:background="@drawable/circle_bg"
    ...
/>

circle_bg.xml用于背景选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle_paint_dark" android:state_pressed="true" />
    <item android:drawable="@drawable/circle_paint" />
</selector>

答案 1 :(得分:0)

假设我理解这个问题,我的建议是您使用扩展 Widget.Design.FloatingActionButton 的样式,然后将其应用于您的视图

<style name="FeedbackAppearance" parent="Widget.Design.FloatingActionButton">
    <item name="android:layout_width">@dimen/some_width</item>
    <item name="android:layout_height">@dimen/some_height</item>
    <item name="android:layout_margin">@dimen/std_gap</item>
    <item name="layout_anchorGravity">end|bottom</item>
    ...
</style>

// inside layout file
<View 
   style="@style/FeedbackAppearance"
   ...
/>

您可以修改以下任何样式属性或添加其他样式属性。

 <style name="Widget.Design.FloatingActionButton" parent="android:Widget">
    <item name="android:background">@drawable/design_fab_background</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
    <item name="backgroundTint">?attr/colorAccent</item>
    <item name="fabSize">auto</item>
    <item name="elevation">@dimen/design_fab_elevation</item>
    <item name="hoveredFocusedTranslationZ">@dimen/design_fab_translation_z_hovered_focused</item>
    <item name="pressedTranslationZ">@dimen/design_fab_translation_z_pressed</item>
    <item name="rippleColor">?attr/colorControlHighlight</item>
    <item name="borderWidth">@dimen/design_fab_border_width</item>
    <item name="maxImageSize">@dimen/design_fab_image_size</item>
    <item name="showMotionSpec">@animator/design_fab_show_motion_spec</item>
    <item name="hideMotionSpec">@animator/design_fab_hide_motion_spec</item>
  </style>