Android常用控制元件封裝:統一樣式、背景使用方式
阿新 • • 發佈:2019-02-17
1.Button控制元件樣式
A.效果圖
B.佈局
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/btn_bg" android:text="確定" android:textColor="@android:color/white" android:textSize="16sp" />
C.shape背景
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 按下 --> <item android:state_pressed="true"> <shape> <!-- 邊框顏色 --> <stroke android:color="@android:color/holo_blue_light" android:width="1dp" /> <!-- 填充色 --> <solid android:color="@android:color/holo_blue_light" /> <!-- 實現圓角 --> <corners android:radius="5dp" /> </shape> </item> <!-- 獲得焦點 --> <item android:state_focused="true"> <shape> <!-- 邊框顏色 --> <stroke android:color="@android:color/holo_blue_light" android:width="1dp" /> <!-- 填充色 --> <solid android:color="@android:color/holo_blue_light" /> <!-- 實現圓角 --> <corners android:radius="5dp" /> </shape> </item> <!-- 正常狀態 --> <item> <shape> <!-- 邊框顏色 --> <stroke android:color="@android:color/holo_blue_dark" android:width="1dp" /> <!-- 填充色 --> <solid android:color="@android:color/holo_blue_dark" /> <!-- 實現圓角 --> <corners android:radius="5dp" /> </shape> </item> </selector>
2.EditText輸入文字控制元件樣式
A.效果圖
B.佈局
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:background="@drawable/edit_text_bg" android:gravity="left" android:hint="請反饋您的寶貴意見^_^" android:minLines="2" android:padding="5dp" android:textSize="16sp" />
C.shape背景
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 邊框顏色 -->
<stroke
android:width="1px"
android:color="@android:color/darker_gray" />
<!-- 填充色 -->
<solid android:color="@android:color/white" />
<!-- 實現圓角 -->
<corners android:radius="5dp" />
</shape>
3.RadioButton單選框樣式
A.效果圖B.佈局
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="8dip">
<RadioButton
android:id="@+id/rb_oms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/radio_box_bg"
android:checked="true"
android:paddingLeft="5dp"
android:text="銷單完成" />
<RadioButton
android:id="@+id/rb_merge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dip"
android:button="@drawable/radio_box_bg"
android:paddingLeft="5dp"
android:text="銷單改期" />
</RadioGroup>
C.shape背景
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/radio_unselected" />
<item android:state_checked="true" android:drawable="@drawable/radio_selected" />
</selector>
4.CheckBox多選框樣式
A.效果圖B.佈局
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/check_box_bg"
android:paddingLeft="5dp"
android:text="玄武" />
C.shape背景
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/check_box_normal" />
<item android:state_checked="true" android:drawable="@drawable/check_box_selected" />
</selector>
5.Spinner下拉選單(下拉彈出框)
A.效果圖
B.佈局
<Spinner
android:id="@+id/spinner"
android:layout_margin="8dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dialog"
android:overlapAnchor="false"
android:background="@drawable/spinner_selector" />
C.shape背景
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="@drawable/spinner_bg" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="@drawable/spinner_bg_dianji" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="@drawable/spinner_bg_dianji" />
<item
android:drawable="@drawable/spinner_bg" />
</selector>