1. 程式人生 > >Android常用控制元件封裝:統一樣式、背景使用方式

Android常用控制元件封裝:統一樣式、背景使用方式

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>