Android의 스피너 배경 디자인 및 색상을 변경하는 방법은 무엇입니까?
배경색과 일치하도록 스피너 배경 레이아웃을 변경해야하는 앱을 개발 중입니다. 조사 결과 9 패치 이미지를 만들어야한다는 것을 알았습니다. 9 패치 이미지를 만들고 앱에서 사용했지만 일반 스피너보다 커 보였고 스피너에서도 드롭 다운 버튼이 보이지 않았습니다.
Spinner 용 9 패치 이미지를 만들고 앱에서 사용하는 것부터 시작하여 명확한 자습서를 제공해 주시면 정말 기쁩니다.
스피너 용 코드
<Spinner
android:id="@+id/spnIncredientone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/txtMixtureTitle"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:background="@drawable/spinner_background"
android:prompt="@string/selectmixture" />
다음과 같이 xml에서 스피너 배경색을 설정할 수 있습니다.
android:background="YOUR_HEX_COLOR_CODE"
스피너와 함께 드롭 다운 메뉴를 사용하면 다음과 같이 배경색을 설정할 수 있습니다.
android:popupBackground="YOUR_HEX_COLOR_CODE"
이런 식으로 배경색을 변경하고 아이콘을 드롭 다운 할 수 있습니다.
1 단계 : 드로어 블 폴더에서 스피너의 테두리로 background.xml을 만듭니다.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
android:color="@color/darkGray" />
</shape> //edited
2 단계 : 스피너의 레이아웃 디자인을 위해이 드롭 다운 아이콘 또는 임의의 이미지 드롭을 사용합니다.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight=".28"
android:background="@drawable/spinner_border"
android:orientation="horizontal">
<Spinner
android:id="@+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="@android:color/transparent"
android:gravity="center"
android:layout_marginLeft="5dp"
android:spinnerMode="dropdown" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:src="@mipmap/drop" />
</RelativeLayout>
마지막으로 아래 이미지처럼 보이며 둥근 영역에서 클릭 가능한 모든 곳이며 imageView에 대한 클릭 Lister를 작성할 필요가 없습니다.
자세한 내용은 여기 를 참조하십시오.
오래된 글인데도 같은 문제를 찾다가 우연히 만나 보니 2 센트도 추가하겠다고 생각했습니다. 다음은 DropDown 화살표가있는 Spinner의 배경입니다. 화살표뿐만 아니라 전체 배경 만.
스피너에 적용하십시오.
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/spinner_bg" />
spinner_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="@color/InputBg" />
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#666666" />
<stroke android:color="#aaaaaa" android:width="1dp"/>
</shape>
</rotate>
</item>
<item android:width="30dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/InputBg"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>
@color/InputBg
배경으로 원하는 색상으로 대체해야합니다.
먼저 배경을 원하는 색상으로 채 웁니다. 그런 다음 자식 레이어 목록이 정사각형을 만들고 45도 회전 한 다음 배경색이있는 두 번째 Rectangle이 회전 된 정사각형의 상단 부분을 덮어 아래쪽 화살표처럼 보입니다. (실제로 필요하지 않은 회전 된 사각형에 추가 스트로크가 있습니다)
스피너 코드
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/text.white"
android:paddingBottom="13dp"
android:background="@drawable/bg_spinner"/>
bg_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark"/>
<corners android:radius="10dp" />
</shape>
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp" android:gravity="center" android:bottom="10dp">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke android:color="#ffffff" android:width="1dp"/>
</shape>
</rotate>
</item>
<item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>
다음과 같이 스피너 항목에 대한 새 개인화 된 레이아웃을 만들어야합니다. 이름을 지정하겠습니다.
spinner_item.xml :
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#ff0000" />
그런 다음 스피너 선언에서 스피너가 어댑터의 새 레이아웃을 사용하도록해야합니다.
ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
spinner.setAdapter(adapter);
드롭 다운 목록에서 요소를 개인화하려면 다른 레이아웃을 만들어야합니다. 이름을 spinner_dropdown_item.xml로 지정하겠습니다.
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:textColor="#aa66cc"/>
그런 다음 어댑터에서 :
ArrayAdapter adapter = ArrayAdapter.createFromResource(this,
R.layout.spinner_item, YOUR_SPINNER_CONTENT);
adapter.setDropDownViewResource(R.layout.spinner_dropdown_item);
spinner.setAdapter(adapter);
로 야콥 지적 , android:popupBackground
드롭 다운 (스피너의 개방 상태)의 키 속성이지만, 대신 색상을 사용하는,이 같은 9 패치 당김에 가장 좋은 결과를 얻었다 :
menu_dropdown_panel.9.png
예를 들어이 답변에서 설명한 대로이 온라인 도구 를 사용하여 선택한 배경색에 대해이 9 패치 이미지를 생성하는 것은 매우 쉽습니다 !
따라서 내 Spinner XML 정의는 다음과 같습니다.
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/navigationBlue"
android:spinnerMode="dropdown"
android:popupBackground="@drawable/menu_dropdown_panel"
/>
그 결과 :
(사용자 지정 글꼴의 경우 위의 스크린 샷과 같이 사용자 지정 SpinnerAdapter도 필요합니다 .)
Android 4.0 이상 (API 레벨 14 이상)에서 작동합니다.
스피너 코드 :
<TextView
android:id="@+id/spinner"
android:gravity="bottom"
android:layout_marginTop="16dp"
android:background="@drawable/spinner_selector"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:paddingLeft="16dp"
android:textSize="16sp"
android:text="TextView" />
spinner_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false" /> <!-- enable -->
<item android:drawable="@drawable/spinner_clicked" android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable -->
</selector>
spinner_disable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#ddf" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#fff" />
<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ddf" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</layer-list>
spinner_clicked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#00f" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#fff" />
<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#00f" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
</item>
</layer-list>
spinner_enable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#00f" />
<padding android:bottom="1dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="#BBDEFB" />
<padding
android:left="0dp"
android:right="0dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#BBDEFB" />
</shape>
</item>
<item
android:gravity="center_vertical|right"
android:right="8dp">
<layer-list>
<item
android:width="12dp"
android:height="12dp"
android:bottom="10dp"
android:gravity="center">
<rotate
android:fromDegrees="45"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#00f" />
<stroke
android:width="1dp"
android:color="#aaaaaa" />
</shape>
</rotate>
</item>
<item
android:width="30dp"
android:height="10dp"
android:bottom="21dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#BBDEFB" />
</shape>
</item>
</layer-list>
</item>
</layer-list>
나인 패치 사진 없이는 잘 작동합니다. API 21 이상
스피너를 사용
android:background="@color/your_color"
하여 스피너 배경색을 설정하면 기본 화살표가 사라집니다.
또한 스피너의 전체 내용을 표시 할 수 있도록 스피너에 고정 너비와 높이를 추가해야합니다.
그래서 나는 위의 이미지처럼 그것을 할 방법을 찾았습니다.
프레임 레이아웃 안에 스피너 코드를 작성하세요. 여기에서 드롭 다운 아이콘을 표시하기 위해 별도의 이미지보기를 사용할 필요가 없습니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Floor"
android:textColor="@color/white"/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_short"
android:background="@drawable/custom_spn_background">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:dropDownSelector="@color/colorAccent"
android:dropDownWidth="@dimen/dp_70"
android:spinnerMode="dropdown"
android:tooltipText="Select floor" />
</FrameLayout>
프레임 레이아웃 배경 또는 설정에 대한 새 xml 만들기
android:background="@color/your_color"
custom_spn_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/dp_5" />
<solid android:color="@color/white" />
spinner_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enabled" android:state_enabled="true" android:state_pressed="false" /> <!-- enable -->
<item android:drawable="@drawable/spinner_clicked" android:state_enabled="true" android:state_pressed="true" />
<item android:drawable="@drawable/spinner_disabled" android:state_enabled="false" /> <!-- disable -->
</selector>
spinner_enabled.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#00f" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00f" />
<solid android:color="#00f" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>
spinner_disabled.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#ddf" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#ddf" />
<solid android:color="#ddf" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>
spinner_focused.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#00f" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#BBDEFB" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00f" />
<solid android:color="#00f" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>
나인 패치 사진 없이는 잘 작동합니다. API 10 이상
위의 샘플을 시도했지만 나를 위해 일하지 않았습니다. 가장 간단한 솔루션은 저에게 훌륭합니다.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff" >
<Spinner
android:id="@+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/Area"/>
</RelativeLayout>
스피너에서 투명한 배경으로 작업해야합니다.
spinner_enable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00000000" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape>
</item>
<item
android:bottom="-2dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape>
<solid android:color="#00000000" />
<stroke
android:width="2dp"
android:color="#00aedb" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#00aedb" />
<solid android:color="#00aedb" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>
spinner_disable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00000000" />
<padding android:bottom="2dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#00000000" />
</shape>
</item>
<item
android:bottom="-2dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape>
<solid android:color="#00000000" />
<stroke
android:width="2dp"
android:color="#d9dadc" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="135">
<rotate
android:fromDegrees="135"
android:pivotX="100%"
android:pivotY="60%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#d9dadc" />
<solid android:color="#d9dadc" />
</shape>
</rotate>
</rotate>
</item>
</layer-list>
spinner_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/spinner_enable" android:state_enabled="true" android:state_pressed="false" /> <!-- enable -->
<item android:drawable="@drawable/spinner_disable" android:state_enabled="false" /> <!-- disable -->
</selector>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Spinner
android:layout_marginTop="8dp"
android:background="@drawable/edit_border"
android:visibility="visible"
android:id="@+id/teach_repeat"
android:entries="@array/on_off"
android:textSize="12sp"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="40dp" />
<ImageView
android:layout_marginTop="8dp"
android:layout_gravity="end"
android:src="@drawable/ic_arrow_drop_down_white_18dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
이 코드를 사용하십시오.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.80">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|start"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<Spinner
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/spiner_back"
android:visibility="visible" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:src="@drawable/ic_arrow_drop_down_black_24dp" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.20">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorred"
android:fontFamily="@font/raleway_extrabold"
android:text="GO"
android:textColor="@color/colorwhite" />
</LinearLayout>
</LinearLayout>
그리고 이것은 제가 사용한 배경입니다 ...
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="@color/colorwhite" />
Android Studio에는 사전 정의 된 코드가 있으므로 직접 사용할 수 있습니다. android : popupBackground = "16 진수 색상 코드"
'developer tip' 카테고리의 다른 글
타임 스탬프로 핑 (0) | 2020.11.22 |
---|---|
UI없이 활동을 시작하는 방법은 무엇입니까? (0) | 2020.11.22 |
부트 스트랩의 고정 바닥 글 (0) | 2020.11.22 |
Android appcompat-v7 : 21.0.0 재질 확인란 색상 변경 (0) | 2020.11.22 |
부팅 할 시뮬레이터 장치를 확인할 수 없습니다. (0) | 2020.11.22 |