Metro风格的Android界面应用

最近项目中需要一个选择月份查询客户余额的功能，原先的android只能满足查询当月，不可以查询任意月份。当然改起来还是很简单的，服务端增加一个月份参数，客户端传入这个参数即可。闲来无事，月份的选择风格不如做成Metro风格的，现在不是流行扁平化吗，况且我又是微软的忠实粉丝，最近工作没找到，静下心来学学东西，做做实验还是挺好的。

现在把核心布局文件写出来

<?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"

             >

             <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
            android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="一月"
                     android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/yiyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp" >
                <TextView  android:text="二月"
                     android:clickable="true"
                    android:textSize="20dp"
                   android:textColor="@color/white"
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/eryue"
                     />
            </LinearLayout> 

        </LinearLayout> 

           <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
             android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="三月"
                     android:clickable="true"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/sanyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp">
                <TextView  android:text="四月"
                     android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/siyue"
                     />
            </LinearLayout> 

        </LinearLayout>       

         <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
             android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="五月"
                     android:clickable="true"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/wuyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp">
                <TextView  android:text="六月"
                     android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/liuyue"
                     />
            </LinearLayout> 

        </LinearLayout>       

           <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
             android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="七月"
                     android:clickable="true"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/qiyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp">
                <TextView  android:text="八月"
                     android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/bayue"
                     />
            </LinearLayout> 

        </LinearLayout>       

             <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
             android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="九月"
                     android:clickable="true"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/jiuyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp">
                <TextView  android:text="十月"
                     android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/shiyue"
                     />
            </LinearLayout> 

        </LinearLayout>       

               <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="5dp"
             android:gravity="center_horizontal"
            > 

            <LinearLayout style="@style/menu_item_block_orange"
                >
                <TextView  android:text="十一月"
                     android:clickable="true"
                    android:textSize="20dp"
                    android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/shiyiyue"
                     />
            </LinearLayout> 

            <LinearLayout style="@style/menu_item_block_orange"
                 android:layout_marginLeft="5dp">
                <TextView  android:text="十二月"
                    android:clickable="true"
                    android:textSize="20dp"
                      android:textColor="@color/white"
                     android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:gravity="center_vertical|center_horizontal"
                   android:id="@+id/shieryue"
                     />
            </LinearLayout> 

        </LinearLayout>       

        </LinearLayout>

    </ScrollView>     

每个模块的样式（其实还有很多重复的可以写到样式文件里）

 <style name="menu_item_block_orange">
        <item name="android:background">@color/blue</item>
        <item name="android:layout_width">130dp</item>
        <item name="android:layout_height">130dp</item>
    </style>

java 文件

package com.example.crazy;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MonthActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_month);
        ((TextView)findViewById(R.id.yiyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.eryue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.sanyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.siyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.wuyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.liuyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.qiyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.bayue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.jiuyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.shiyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.shiyiyue)).setOnClickListener(l);
        ((TextView)findViewById(R.id.shieryue)).setOnClickListener(l);
    }
    private  OnClickListener l=new OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
        switch(((TextView)v).getId()){
        case R.id.yiyue:
            gotowebview("1");
            break;
        case R.id.eryue:
            gotowebview("2");
            break;
        case R.id.sanyue:
            gotowebview("3");
            break;
        case R.id.siyue:
            gotowebview("4");
            break;
        case R.id.wuyue:
            gotowebview("5");
            break;
        case R.id.liuyue:
            gotowebview("6");
            break;
        case R.id.qiyue:
            gotowebview("7");
            break;
        case R.id.bayue:
            gotowebview("8");
            break;
        case R.id.jiuyue:
            gotowebview("9");
            break;
        case R.id.shiyue:
            gotowebview("10");
            break;
        case R.id.shiyiyue:
            gotowebview("11");
            break;
        case R.id.shieryue:
            gotowebview("12");
            break;
            default:break;
        }
        }
    };

    private void gotowebview(String month){
        Identity.month=month;//Identity是我自定义的存放全局变量的类
        Intent it = new Intent(MonthActivity.this, MyAccount.class);
        startActivity(it);
    }
}

基本上就这些了。其实还可以做得更好一点，比如按下的时候有一个稍微变小的变化。