[android開發]模仿課程表的佈局

demo說明（廢話）

先說下這個demo，這是一個模仿課程表的佈局文件，雖然我是個菜鳥，但我還是想留給學習的人一些例子，先看下效果

然後再來看一下我們學校的app

佈局分析

先上一張劃分好了的佈局圖

首先整個頁面放在一個LinearLayout佈局下面，分爲上面和下面兩個部分，下面一個是顯示課程表的詳細信息

• 1：這個沒什麼好講的，就是直接一個LinearLayout佈局，然後將控件一個TextView用來顯示年份，一個View用來當作豎線，一個Spinner用來顯示選擇週數
• 2：這個是顯示星期幾的部件，是我自定義的View，自己重寫onDraw方法，然後畫出七個字，代碼如下：

public void onDraw(Canvas canvas)
    {
        //獲得當前View的寬度
        int width = getWidth();
        int offset = width / 8;
        int currentPosition = offset;
        //設置要繪製的字體
        mPaint.setTypeface(Typeface.create(Typeface.DEFAULT_BOLD, Typeface.BOLD));
        mPaint.setTextSize(30);
        mPaint.setColor(Color.rgb(0, 134, 139));
        for(int i = 0; i < 7 ; i++)
        {
            //圈出當前的日期
            if( day == i)
            {
System.out.println("畫出當前的日期!");
            }
            canvas.drawText(days[i], currentPosition, 30, mPaint);
            currentPosition += offset;
        }
        //調用父類的繪圖方法
        super.onDraw(canvas);
    }

• 3：這個也是一個LinearLayout，直接手寫佈局，將寫出來的，將LinearLayout的orientation 屬性設置爲vertical 。
• 4：這是一個GridView ,然後自己繼承BaseAdapter 填充內容，下面放上佈局的xml文件

<?xml version="1.0" encoding="utf-8"?>
<!--模仿課程表的界面-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--顯示時間-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">
        <TextView
            android:id="@+id/year"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_marginLeft="20dp"
            android:textSize="20dp"
            android:text="2016年"/>
        <!--豎線-->
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="#00FFFF"
            />
        <!--下拉方式選週數-->
        <Spinner
            android:id="@+id/switchWeek"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_gravity="center"
            />

    </LinearLayout>
    <!--分隔線-->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#00FF7F"/>
    <!--顯示星期-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@android:color/white">
        <cn.karent.demo.UI.WeekTitle
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_marginTop="10dp"/>
    </LinearLayout>
    <!--顯示課表詳細信息-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!--顯示多少節課-->
            <LinearLayout
                android:layout_width="25dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:gravity="center">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:text="一"
                    android:textSize="10dp"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:textSize="12dp"
                    android:text="二"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:textSize="12dp"
                    android:text="三"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:textSize="12dp"
                    android:text="四"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:textSize="12dp"
                    android:text="五"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="92dp"
                    android:textSize="12dp"
                    android:text="六"
                    android:gravity="center"/>

            </LinearLayout>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#E5E5E5"/>
            <GridView
                android:id="@+id/courceDetail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:numColumns="7"
                android:horizontalSpacing="1dp"
                android:verticalSpacing="1dp"
                android:stretchMode="columnWidth"
                android:background="#E5E5E5">
            </GridView>
        </LinearLayout>
    </ScrollView>


</LinearLayout>

下面是GridView的適配器代碼：

public class MyAdapter extends BaseAdapter {

    private Context mContext;
    //保存內容的內部數組
    private List<String> content;

    public MyAdapter(Context context, List<String> list) {
        this.mContext = context;
        this.content = list;
    }

    public int getCount() {
        return content.size();
    }

    public Object getItem(int position) {
        return content.get(position);
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        if( convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.grib_item, null);
        }
        TextView textView = (TextView)convertView.findViewById(R.id.text);
        //如果有課,那麼添加數據
        if( !getItem(position).equals("")) {
            textView.setText((String)getItem(position));
            textView.setTextColor(Color.WHITE);
            //變換顏色
            int rand = position % 7;
            switch( rand ) {
                case 0:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.grid_item_bg));
                    break;
                case 1:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_12));
                    break;
                case 2:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_13));
                    break;
                case 3:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_14));
                    break;
                case 4:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_15));
                    break;
                case 5:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_16));
                    break;
                case 6:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_17));
                    break;
                case 7:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_18));
                    break;
            }
        }
        return convertView;
    }

}

下面來慢慢解釋一下，首先，要自定義適配器必須要繼承一個Adapter，這裏我們從BaseAdapter繼承，繼承之後必須要重寫getCount()，getItem(int)，getItemId(int)，getView(int,View,ViewGroup) 這些方法必須要重寫，最主要的就是重寫getView() 這個方法，因爲這個方法返回的是一個View，那麼就是GridView的每一個子item的佈局。

convertView=LayoutInflater.from(mContext).inflate(R.layout.grib_item, null);

這一行代碼是加載佈局文件並返回一個View

if( !getItem(position).equals("")) {
            textView.setText((String)getItem(position));
            textView.setTextColor(Color.WHITE);
            //變換顏色
            int rand = position % 7;
            switch( rand ) {
                case 0:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.grid_item_bg));
                    break;
                case 1:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_12));
                    break;
                case 2:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_13));
                    break;
                case 3:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_14));
                    break;
                case 4:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_15));
                    break;
                case 5:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_16));
                    break;
                case 6:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_17));
                    break;
                case 7:
                    textView.setBackground(mContext.getResources().getDrawable(R.drawable.bg_18));
                    break;
            }
        }

這裏的代碼是判斷每一列然後實現更改view的背景，其中背景的代碼如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#75B7A0" />
    <corners android:radius="3dip" />
</shape>

其他的類似，還有就是item的佈局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F4FFF5EE">
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:padding="2dp"
        android:textSize="12dp"
        android:gravity="center"/>
</RelativeLayout>

這個就是模仿課程表的佈局，最後附上源碼地址：點我下載

我已經寫了一個更漂亮的課程表界面，連接地址如下：

http://blog.csdn.net/supervictim/article/details/53930160