墨跡を模した天気設定画面レイアウト

6863 ワード

発見されたandroid特集号:
【eoe特集】第27期OpenGL ES学習及びプロジェクト解析http://www.eoeandroid.com/thread-240293-1-1.html
eoe 上海Android大会:http://club.eoe.cn/index/shmdc
最終効果は以下の通りです
模仿墨迹天气设置界面布局
具体的には、checkboxのカスタム選択と選択スタイルを実現し、メニュー項目は位置によって背景を設定します.
最初に全体のレイアウトファイルコードを上に移動します.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
xmlns:tools="http://schemas.android.com/tools"   
android:layout_width="match_parent"   
android:layout_height="match_parent"     
android:background="#DFE1E0"   
android:orientation="vertical">
    <LinearLayout        style="@style/SettingItemTop"
        android:background="@drawable/setting_list_top"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
         <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="    "            />
        <CheckBox
             style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
        <LinearLayout
        style="@style/SettingItemMiddle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
        <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="    "            />
        <CheckBox
            style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
        <LinearLayout
        style="@style/SettingItemBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:orientation="horizontal">
         <TextView
            style="@style/MySettingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="    "            />
        <CheckBox
             style="@style/MyCheckBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
        </LinearLayout>
注意:
style=「@style/MySettingText」はここでstyle.xmlというファイルを使ってスタイルを制御しています.Androidは実際に開発されていますが、いくつかの部品の属性が重複して現れます.各コントロールが単独でこれらの属性を入力すると、効率が悪くなります.反復コードをstyle.xmlに追加してスタイルに設定できます.これらの属性を使うにはこのスタイルを参照すればいいです.スタイル=「@style/MySettingText」これはテキストの属性を設定しています.コードは以下の通りです.
<style name="MySettingText">
        <item name="android:layout_margin">10dp</item>
        <item name="android:layout_weight">6</item>
</style>
ここでは2つの属性だけを使っています.開発中は実際の必要に応じて自分で修正できます.以降は設定項目ごとの文字をこれらの属性を追加する必要はありません.このスタイルを参照してください.
CheckBoxスタイルはカスタムでselectorを使用しました.
style=「@style/MyCheckBox」という文に対応するコード:
<style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/check</item>
        <item name="android:layout_margin">10dp</item>
        <item name="android:layout_weight">1</item> 
</style>
この文に注意してください
<item name=「android:button」@drawable/check(/item)ここでselectorカスタムスタイルを使いました.res/drawableの下でcheck(自定)というxmlファイルを作成します.コードは以下の通りです.
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/on"/>
  <item android:state_checked="false" android:drawable="@drawable/off"/>
</selector>
そのうち
@drawable/onは選択時のcheckboxの画像であり、@drawable/offは逆であることにも気づきました.メニューの最初の項目の上は円角で、中間項目は四角い方で、最後の項目は下の円角であり、これは異なる背景画像を設定することによって実現されました.