programing

바탕색으로 버튼에 효과적인 소재감

instargram 2023. 10. 29. 19:00
반응형

바탕색으로 버튼에 효과적인 소재감

안드로이드 v21 지원 라이브러리를 사용하고 있습니다.

커스텀 배경색으로 버튼을 제작하였습니다.리플, 노출과 같은 재료 설계 효과는 배경색을 사용할 때 사라집니다(클릭 시 고도 제외).

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

Background다음은 정상 버튼이며 효과는 정상적으로 작동합니다.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

Default button

사용할때android:background, 단추의 스타일과 외관, 느낌의 대부분을 빈 색으로 교체하고 있습니다.

업데이트: AppCompat 버전 23.0.0 버전 출시 이후 테마의 스타일을 사용하는 새로운 스타일이 있습니다.colorButtonNormal장애인분들께는.colorAccent활성화된 색상을 사용합니다.

이를 통해 직접 버튼에 적용할 수 있습니다.

<Button
  ...
  style="@style/Widget.AppCompat.Button.Colored" />

사용자 정의가 필요한 경우colorButtonNormal아니면colorAccent, 당신은 a를 사용할 수 있습니다.ThemeOverlay이 프로팁에서 설명한 바와 같이android:theme단추에

이전 답변

다음과 같은 배경에 대해 v21 디렉토리에서 그리기 파일을 사용할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

이렇게 하면 배경색이 다음과 같습니다.?attr/colorPrimary기본 리플 애니메이션을 사용합니다.?attr/colorControlHighlight(원하는 경우 테마에 설정할 수도 있음).

참고: v21 미만의 사용자 지정 선택기를 만들어야 합니다.

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

기본, 누름 및 초점 상태에 원하는 색상이 있다고 가정합니다.개인적으로, 저는 선정되는 중간에 리플을 스크린샷으로 찍어 그것에서 주요/집중 상태를 끌어냈습니다.

"소재" 효과를 유지하면서 "평면" 버튼에 대한 사용자 지정 배경을 제공하는 간단한 솔루션이 또 있습니다.

  1. 원하는 배경이 설정된 ViewGroup에 단추를 놓습니다.
  2. 선택 가능하게 설정항목현재 테마의 배경을 단추의 배경으로 (API >=11)

즉:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

Flat 버튼에 사용 가능하며 API >=11에서 작동하며 >=21 기기에 리플 효과를 부여하여 AppCompat 업데이트 시까지 Pre-21의 일반 버튼을 유지하여 리플을 지원합니다.

선택 가능한 기능을 사용할 수도 있습니다.>=21개 버튼에 한해 아이템배경 보더리스.

여기에 사용자 정의 배경과 함께 상승된 버튼에 리플 효과를 전달하는 간단한 하위 호환 방법이 있습니다.

배치는 이렇게 해야 합니다.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

저는 오늘 v22 라이브러리를 가지고 놀다가 이 문제에 부딪혔습니다.

스타일을 사용한다고 가정하면colorButtonNormal속성과 버튼은 기본적으로 해당 색상을 사용합니다.

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

그 외에도 버튼 스타일을 만들 수 있습니다. 여러 가지 색상을 필요로 하는 경우 버튼당 스타일을 사용할 수 있습니다(테스트하지 않고 추측만 했을 뿐입니다).

추가하는 것을 기억하세요.android:v21 스타일의 항목 이름 앞에 입력할 수 있습니다.

@ianhanniballake의 대답은 완전히 정확하고 간단합니다.하지만 이해하는 데 며칠이 걸렸습니다.그의 대답을 이해하지 못하는 사람을 위해, 여기에 더 자세한 구현 방법이 있습니다.

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

===또는 ===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

AppCompat(22.1.1+)을 사용하면 다음과 같은 스타일을 추가할 수 있습니다.

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

그리고 스타일을 적용해서 사용하면 됩니다.

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

프로그램적으로 색상을 변경하면서 (API 15 또는 16에서) 색상을 업데이트할 수 있는 유일한 방법은 '배경 틴트 리스트'를 대신 사용하는 것입니다.그리고 API 21 장치에서 멋진 방사형 애니메이션을 제거하지는 못합니다.

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

왜냐면button.setBackground(...)그리고.button.getBackground().mutate().setColorFilter(...)API 15, 16의 버튼 색상을 API 21의 버튼 색상처럼 변경하지 마십시오.

배경Tint와 전경을 사용했습니다.

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

저는 제 배경색을 가질 방법을 찾기 위해 이 게시물에 왔습니다.ListView항목은 그대로 유지하되 파급력은 유지합니다.

저는 단순히 배경으로 제 색깔을 넣었고 선택 가능한 것을 넣었습니다.항목 전경으로서의 배경:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

그리고 매력적으로 작용합니다.단추에도 같은 기술이 사용될 수 있을 것 같습니다.행운을 빌어요 :)

사용하다backgroundTint대신에background

ImageButton에 관심이 있다면 다음과 같은 간단한 방법을 시도해 볼 수 있습니다.

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

v22.1appcompat-v7몇 가지 새로운 가능성을 소개했습니다.이제 하나의 보기에만 특정 테마를 지정할 수 있습니다.

사용하지 않는 app:teme for styling Toolbar.이제 모든 API 레벨 7 이상의 기기에서 안드로이드:테마를 툴바에 사용할 수 있고, API 레벨 11 이상의 기기에서 안드로이드:테마를 모든 위젯에 지원할 수 있습니다.

그래서 글로벌 테마에 원하는 색상을 설정하는 대신 새로운 색상을 만들어 해당 색상에만 할당합니다.Button

예:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

그리고 이 스타일을 당신의 테마로 사용합니다.Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>

타사 라이브러리를 사용해도 괜찮으시다면 traex/Rippl Effect를 확인해 보십시오.몇 줄의 코드만으로 모든 보기에 리플 효과를 추가할 수 있습니다.xml 레이아웃 파일에 리플 효과를 원하는 요소를 랩핑하면 됩니다.com.andexert.library.RippleView컨테이너.

추가 보너스로 Min SDK 9가 필요하므로 OS 버전 간에 디자인 일관성을 가질 수 있습니다.

라이브러리의 GitHub repo에서 가져온 예는 다음과 같습니다.

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

이 특성을 RippleView 요소에 추가하여 리플 색상을 변경할 수 있습니다.app:rv_color="@color/my_fancy_ripple_color

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

사용하다

xmlns:app="http://schemas.android.com/apk/res-auto"

색깔은 lol이팝 전 제품에 적용됩니다.

Alex Lockwood라는 훌륭한 튜토리얼에서 설명한 두 가지 접근법은 다음과 같습니다. http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html

Approach #1: 테마오버레이로 버튼의 배경색 수정

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RedButtonLightTheme"/>

Approach #2: AppCompat 버튼의 배경 틴트 설정

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

프로그래밍 방식으로 색상 적용:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

프로그래밍 방식:

 myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));

예를 들어,

 MaterialButton myMaterialButton = new MaterialButton(this);
 myMaterialButton.setLayoutParams(myButtonParams);
 myMaterialButton.setBackgroundColor(Color.GRAY);
 myMaterialButton.setRippleColor(ColorStateList.valueOf(Color.RED));
   

나는 이것을.

android:backgroundTint:"@color/mycolor"

배경 재산을 바꾸는 대신에 말입니다.이것은 재료 효과를 제거하지 못합니다.

언급URL : https://stackoverflow.com/questions/26686250/material-effect-on-button-with-background-color

반응형