programing

사용자 지정 원 단추

batch 2023. 8. 24. 21:54
반응형

사용자 지정 원 단추

커스텀 버튼을 만들고 싶은데 원이 되어야 합니다.원 단추를 만들려면 어떻게 해야 합니까?저는 draw9 패치로는 그것이 가능하다고 생각하지 않습니다.

또한 나는 커스텀 버튼을 어떻게 만드는지 모릅니다!

제안할 것이 있습니까?

다음과 같이 xml 그리기 가능 사용:

다음 내용을 다음과 같이 저장합니다.round_button.xml에drawable폴더

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android 재료 효과:더 나은 옵션이지만 xml 선택기를 사용하여 수행하려면 폴더를 만듭니다.drawable-v21에res그리고 다른 사람을 구합니다.round_button.xml거기에 다음 xml을 사용합니다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

배경으로 설정합니다.Button다음과 같은 xml로 표시:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

중요:

  1. 이러한 모든 상태(활성화, 비활성화, 강조 표시 등)를 표시하려면 여기에 설명된 대로 선택기를 사용합니다.
  2. 그리기 가능한 이전 버전과의 호환성을 유지하려면 두 파일을 모두 유지해야 합니다.그렇지 않으면 이전 안드로이드 버전에서 이상한 예외에 직면하게 될 것입니다.

Markushi는 놀라운 효과를 가진 원 버튼 위젯을 작성했습니다.여기를 클릭하세요!

enter image description here

공식 재료 구성요소 라이브러리를 사용하여 스타일 적용을 사용할 수 있습니다.

다음과 같은 것:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

현재app:iconPadding="0dp",android:insetLeft,android:insetTop,android:insetRight,android:insetBottom추가 패딩 공간을 방지하기 위해 버튼 중앙에 아이콘을 배치해야 합니다.

속성을 사용하여 모서리를 반올림합니다.이 경우 원을 갖게 됩니다.

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

최종 결과:

enter image description here

제트 팩 컴포지트를 사용하면 다음을 사용할 수 있습니다.

    Button(
        onClick = { /* Do something! */ },
        modifier = Modifier.width(48.dp).height(48.dp),
        shape = CircleShape
    ) {
        Icon(Icons.Filled.Add, "")
    }

enter image description here

사용자 지정 안드로이드 버튼을 위한 AngryTool

이 도구 사이트로 어떤 종류의 사용자 정의 안드로이드 버튼도 만들 수 있습니다...저는 이 도구 사이트로 둥근 모서리로 원과 사각 버튼을 만듭니다.방문하세요. 제가 도와드리겠습니다.

FAB 모양 버튼의 경우 이 스타일은MaterialButton:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

결과:

enter image description here

크기를 변경할 경우 버튼 크기의 절반을 다음과 같이 사용하도록 주의하십시오.app:cornerRadius.

AndroidX 재료 라이브러리에서 재료 단추를 사용할 수 있습니다.

<com.google.android.material.button.MaterialButton
     android:layout_width="75dp"
     android:layout_height="75dp"
     android:layout_margin="10dp"
     android:insetLeft="0dp"
     android:insetTop="0dp"
     android:insetRight="0dp"
     android:insetBottom="0dp"
     app:cornerRadius="50dp"
     app:icon="@drawable/ic_camera"
     app:iconGravity="textStart"
     app:iconPadding="0dp"
     app:iconSize="35dp" />

그리고 이렇게 될 것입니다.

Button preview

VectorDrawable 및 ConstraintLayout을 사용하려는 경우

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

원 배경: circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

유감스럽게도 XML 그리기 가능을 사용하고 배경을 재정의한다는 것은 앱 스타일 색상을 사용할 수 없는 대신 색상을 명시적으로 설정해야 한다는 것을 의미합니다.

모든 동작에 대한 버튼 색상을 하드 코딩하는 대신 코너 반경을 하드 코딩하기로 선택했습니다. 코너 반경은 약간 덜 촌스럽고 기본 버튼 동작(누르면 색상 변경 및 기타 시각 효과)을 모두 유지하고 기본적으로 앱 스타일 색상을 사용합니다.

  1. 트android:layout_height그리고.android:layout_width 값으로

  2. 트app:cornerRadius

    인 것이 폭이/의을절폭이것높업인/상높데할때 ▁as▁such▁(▁every폭▁it▁high▁to▁radius▁value▁a▁of▁you▁greaterwidth▁insteadit,▁very▁set▁could▁appears/설값▁the▁avoid▁actually폭▁works수있높매▁the▁height높▁that▁than같▁the습이▁sowidth▁anything로▁having니▁to1000dp이러한 행동이 변경될 경우 고장이 발생할 수 있다는 위험이 있습니다.)

  3. 트android:insetBottom그리고.android:insetTop0dp한 원을

예:

<Button
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:layout_height="150dp"
    android:layout_width="150dp"
    app:cornerRadius="75dp"
    />

다음은 간단히 수행하고 drawable.xml에서 그리기 가능한 리소스 파일을 만드는 방법입니다.round_button.xml이라고 말하고 다음 코드를 붙여넣습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
       <shape
           android:shape="oval">

           <solid
               android:color="@color/button_start_gradient_color"/>
       </shape>
    </item>
    <item
        android:drawable="@drawable/microphone"/>
</layer-list>

참고:- @drawable/microphone을 사용한 것처럼 자신만의 색상과 그리기 가능한 리소스를 사용합니다.

다음은 결과 [1]입니다. https://i.stack.imgur.com/QyhdJ.png

ImageButton을 사용하려면 다음을 사용합니다.재료 잔물결이 있는 둥근 이미지 버튼을 만듭니다.

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>

그리기 가능한 폴더에 새 벡터 자산을 만듭니다.

https://image.online-convert.com/convert-to-svg 에서 PNG 이미지를 가져와서 파일을 SVG 온라인으로 변환할 수도 있습니다.해상도가 높을수록 변환 성능이 향상됩니다.

그런 다음 해당 SVG 파일에서 새 벡터 자산을 생성합니다.

사용할 수 있는 벡터 원 이미지의 샘플입니다.코드를 그리기 가능한 폴더의 xml 파일에 복사합니다.

ic_check.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="256"
    android:viewportWidth="256">
    <path
        android:fillColor="#2962FF"
        android:pathData="M111,1.7c-7.2,1.1 -22.2,4.8 -27.9,7 -33.2,12.5 -61.3,40.3 -74.1,73.3 -8.7,22.6 -10.5,55.3 -4.4,78 10.9,40 39.7,72.4 77.4,87 22.6,8.7 55.3,10.5 78,4.4 45.3,-12.3 79.1,-46.1 91.4,-91.4 2.9,-10.7 3.9,-21.9 3.3,-37.4 -0.7,-21.2 -4.6,-35.9 -14,-54.1 -18.2,-35 -54,-60.5 -93.4,-66.4 -6.7,-1 -30.7,-1.3 -36.3,-0.4zM145,23.1c21.8,3.3 46.5,16.5 61.1,32.8 20.4,22.6 30.1,51.2 27.7,81.1 -3.5,44.4 -35.9,82.7 -79.6,94 -21.6,5.6 -46.6,3.7 -67.8,-5.1 -10.4,-4.3 -24.7,-14.1 -33.4,-22.9 -41.6,-41.5 -41.6,-108.4 0,-150 24.3,-24.3 57.6,-35.1 92,-29.9z"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#2962FF"
        android:pathData="M148.4,113c-24.6,26 -43.3,44.9 -44,44.6 -0.7,-0.3 -8.5,-6.1 -17.3,-13 -8.9,-6.9 -16.5,-12.6 -17,-12.6 -1.4,-0 -25.6,19 -25.8,20.3 -0.3,1.4 62.7,50.2 64.8,50.2 1.7,-0 108.4,-112.3 108.4,-114.1 0,-1.3 -23.8,-20.4 -25.4,-20.4 -0.6,-0 -20.2,20.3 -43.7,45z"
        android:strokeColor="#00000000" />
</vector>

버튼에서 다음 이미지를 사용합니다.

<ImageButton
    android:id="@+id/btn_level1"
    android:layout_width="36dp"
    android:layout_height="36dp"
    android:background="@drawable/ic_check"
/>

당신의 단추는 원 단추가 될 것입니다.

enter image description here

언급URL : https://stackoverflow.com/questions/9884202/custom-circle-button

반응형

'programing' 카테고리의 다른 글

하위 항목 가져오기 및 공백 없음  (0) 2023.08.24
package-lock.json 파일을 .gitignore에 추가해야 합니까?  (0) 2023.08.24
여러 데이터 파일로 테이블스페이스를 만드는 방법은 무엇입니까?  (0) 2023.08.24
두 개 이상의 인수에 대한 Numpy '논리적_or'  (0) 2023.08.24
오류 수정 방법:서버에서 받은 메시지를 구문 분석할 수 없습니다.  (0) 2023.08.24

'programing'의 다른글

  • 현재글사용자 지정 원 단추

관련글

댓글

티스토리툴바