[仿南航app開發日記2]主界面完成

效果

先來看看主界面完成的效果：

這是主界面的樣子，如果要參照原app是什麼樣子的可以參照我的上一篇博客：

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

我感覺是很相像的，下面就按照我開發的順序來介紹吧：
1. 我先寫的是中間的那8個菜單的佈局，這裏面的佈局沒什麼意思就是用代碼堆出來的佈局：

 <GridLayout
        android:id="@+id/myGrid"
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:columnCount="4"
        android:rowCount="2"
        android:padding="20dp"
        android:layout_height="175dp">
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_culture">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp1_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_hand">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp2_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_forum">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp3_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_transaction">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="10dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp4_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_wifi">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp5_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_mobile_office">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp6_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_card">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp7_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_service">
            </TextView>
        </LinearLayout>


    </GridLayout>

這8個菜單我是用了一個GridLayout來寫的，大家可以仔細看看，沒什麼意思，就是堆出來的佈局。
2. 寫完中間的菜單佈局就是下面的新聞列表佈局了，xml文件比較簡單，就是一個ListView，然後就是參考原先app的佈局，裏面有圖片、標題、時間、閱讀數，這些數據是來自服務器的，所以我給它寫了一個model

package cn.karent.nanhang.model;

/**
 * Created by wan on 2016/12/24.
 * 新聞的model
 */
public class News {

    /**
     * 圖片地址
     */
    private String picUrl;
    /**
     * 標題
     */
    private String title;
    /**
     * 時間
     */
    private String time;
    /**
     * 閱讀次數
     */
    private String count;

    public String getPicUrl() {
        return picUrl;
    }

    public void setPicUrl(String picUrl) {
        this.picUrl = picUrl;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getCount() {
        return count;
    }

    public void setCount(String count) {
        this.count = count;
    }
}

衆所周知，要使用ListView需要一個Adapter，我就自定義了一個Adapter，代碼如下：

package cn.karent.nanhang.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import cn.karent.nanhang.model.News;
import cn.karent.nanhang.R;

/**
 * Created by wan on 2016/12/24.
 * 新聞列表的Adapter
 */
public class NewsAdapter extends ArrayAdapter<News> {
    /**
     * 保存的是layout的id,例如R.layout.news_item_layout
     */
    private int mResourceId;

    private Context mContext;

    public NewsAdapter(Context context, int resourceId) {
        super(context, resourceId);
        mResourceId = resourceId;
        mContext = context;
    }

    /**
     * 加載每一項的佈局
     * @param position     列表的位置
     * @param convertView 移除屏幕外回收的convertView
     * @param parent       這裏是ListView
     * @return             ListView裏面的列表項
     */
    public View getView(int position, View convertView, ViewGroup parent) {
        News n = getItem(position);
        Hold h;
        if( convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(mResourceId, null);
            h = new Hold();
            h.pic = (ImageView) convertView.findViewById(R.id.news_item_pic);
            h.title = (TextView)convertView.findViewById(R.id.news_item_title);
            h.time = (TextView)convertView.findViewById(R.id.news_item_time);
            h.count = (TextView)convertView.findViewById(R.id.news_item_count);
            convertView.setTag(h);
        } else {
            h = (Hold)convertView.getTag();
        }
        h.getCount().setText(n.getCount());
        h.getTime().setText(n.getTime());
        h.getTitle().setText(n.getTitle());
        return convertView;
    }

    class Hold {

        private ImageView pic;

        private TextView title;

        private TextView time;

        private TextView count;

        public ImageView getPic() {
            return pic;
        }

        public void setPic(ImageView pic) {
            this.pic = pic;
        }

        public TextView getTitle() {
            return title;
        }

        public void setTitle(TextView title) {
            this.title = title;
        }

        public TextView getTime() {
            return time;
        }

        public void setTime(TextView time) {
            this.time = time;
        }

        public TextView getCount() {
            return count;
        }

        public void setCount(TextView count) {
            this.count = count;
        }
    }

}

這個也沒什麼好講的，跟普通的沒什麼區別，我們來看看每個Item的佈局是什麼：

<?xml version="1.0" encoding="utf-8"?>
<!--顯示新聞列表內容-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="wrap_content"
    android:background="@color/newsItemColor"
    android:layout_height="wrap_content">
    <!--顯示新聞圖片-->
    <ImageView
        android:id="@+id/news_item_pic"
        android:layout_width="75px"
        android:layout_height="60dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/new_dealfult"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:orientation="vertical">
        <!--標題-->
        <TextView
            android:id="@+id/news_item_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:textSize="14sp"
            android:text="12月26日華東理工大學黎野平教授來校講學"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--日期-->
            <TextView
                android:id="@+id/news_item_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:text="2016/12/23/ 15:21:03"/>
            <!--佔位-->
            <View android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <!--閱讀次數-->
            <TextView
                android:id="@+id/news_item_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:text="閱讀次數：322"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

這個也沒什麼好講的，也是堆出來的佈局
3. 下面來介紹一下最頂部的ActionBar，我這裏使用了ActionBar，對於默認的ActionBar，我要加一個右上角的用戶頭像，關於左上角的文字直接調用Activity的setTitle()就可以更改了，先加右上角的頭像，創建一個menu的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/userhead"
        android:icon="@drawable/userhead_dealfut"
        android:title="@string/userhead"
        app:showAsAction="always"/>
</menu>

然後重寫Activity的一個回調函數：

  public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

這樣就能創建右上角的用戶頭像，但是要更改ActionBar的顏色和高度就只能設置設置style了，我們看看androidManifest.xml文件裏面的代碼：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.karent.nanhang">

    <application
        android:allowBackup="true"
        android:name=".util.MyApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

標籤裏面的android:style=”@style/AppTheme”,這個是自定義的style:

  <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/actionBarColor</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:actionBarSize">49dp</item>
    </style>

其中<item name="android:actionBarSize">49dp</item> 這個是設置ActionBar的高度的，<item name="colorPrimary">@color/actionBarColor</item> 這個是設置ActionBar的背景顏色的，下面附上我裏面用到的strings.xml和colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="tabColor">#344e60</color>
    <color name="actionBarColor">#0077bb</color>
    <color name="newsItemColor">#f6f5f5</color>
</resources>

<resources>
    <string name="app_name">nanhang</string>
    <string name="tab_home">我的資料</string>
    <string name="tab_doctor">我的課表</string>
    <string name="tab_project">我的通知</string>
    <string name="tab_person">掃一掃</string>
    <string name="college_culture">校園文化</string>
    <string name="college_hand">掌上校園</string>
    <string name="college_forum">校園論壇</string>
    <string name="college_transaction">校園事務</string>
    <string name="college_wifi">一鍵上網</string>
    <string name="college_mobile_office">移動辦公</string>
    <string name="college_card">一卡通</string>
    <string name="college_service">校園服務</string>
    <string name="userhead">頭像</string>
</resources>

上面就是改變ActionBar的風格。
3. 創建顯示廣告的banner，這裏我自定義了佈局繼承自ViewGroup:

package cn.karent.nanhang.UI;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;
import cn.karent.nanhang.util.ScreenUtil;

/**
 * Created by wan on 2016/12/24.
 * 首頁圖片輪播圖，banner
 */
public class ImageTurnLayout extends ViewGroup {

    private Context mContext;

    private Scroller mScroller;
    /**
     * 當前的View的寬度
     */
    private int mWidth;
    /**
     * 上次手指一動的座標
     */
    private float mOldX;
    /**
     * 右邊界
     */
    private int mRightEdge;

    /**
     * 指示當前到了哪個Child
     */
    private int mIndicator;
    //畫筆
    private Paint mPaint;
    //小圓點的半徑
    private float mRadius;
    /**
     * 兩個指示器之間的空白（小圓點）
     */
    private float mBlank;
    /**
     * 座標的空白
     */
    private float mLeftBlank;
    /**
     * 小圓點的y座標（因爲y座標都是一樣的，不需要重複計算）
     */
    private int mIndicatorY;

    public ImageTurnLayout(Context context) {
        super(context);
    }

    public ImageTurnLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.WHITE);
        mRadius = ScreenUtil.dp2px(5);
        mBlank = 2 * mRadius;
        mIndicatorY = ScreenUtil.dp2px(135);
        //不設置這個將不會調用diaw方法
        setWillNotDraw(false);
    }

    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        mWidth = width;
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int indicatorTotal = 0;
        //測量每一個子項應該都是充滿屏幕的
        for( int i = 0; i < getChildCount(); i++) {
            int widthSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
            int heightSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
            View child = getChildAt(i);
            child.measure(widthSpec, heightSpec);
            indicatorTotal += mRadius;
            indicatorTotal += mBlank;
        }
        indicatorTotal -= mBlank;
        mLeftBlank = (width - indicatorTotal) / 2 + 0.5f;
        //保存右邊界
        mRightEdge = getChildAt(getChildCount() - 1).getLeft();

    }

    public void onLayout(boolean changed, int l, int t, int r, int b) {
        //佈局
        for(int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.layout(i * child.getMeasuredWidth(), 0,  (i + 1) * child.getMeasuredWidth(), child.getMeasuredHeight());
        }
    }

    public void draw(Canvas c) {
        super.draw(c);
        drawIndicator(c);
    }


    /**
     * 繪製指示器
     * @param canvas
     */
    private void drawIndicator(Canvas canvas) {
        for(int i = 0; i < getChildCount(); i++) {
            //代表當前顯示的哪個頁面
            if( i == mIndicator) {
                mPaint.setColor(Color.BLUE);
            } else {
                mPaint.setColor(Color.WHITE);
            }
            canvas.drawCircle(getScrollX() + mLeftBlank + i * (mRadius + mBlank),  mIndicatorY, mRadius, mPaint);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
//        return super.onInterceptTouchEvent(ev);
        return true;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch( action ) {
            case MotionEvent.ACTION_DOWN:
                mOldX = event.getX();
                return true;
            case MotionEvent.ACTION_MOVE:
                float x = event.getX();
                int moveX = (int)(mOldX - x);
                //滾動
                if( getScrollX() + moveX >= mRightEdge ) {
                    scrollTo(mRightEdge, 0);
                } else if( getScrollX() + moveX <= 0) {
                    scrollTo(0, 0);
                } else {
                    scrollBy(moveX, 0);
                }
                //計算指示器的位置
                mIndicator = getScrollX() / mWidth;
                break;
            case MotionEvent.ACTION_UP:
                //手指釋放，計算該到哪張
                int next = (int)(getScrollX() * 1.0f  / mWidth + 0.5f);
                int dx = mWidth * next - getScrollX();
                mScroller.startScroll(getScrollX(), 0, dx, 0);
                break;
            default:
                break;
        }
        invalidate();
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {
        if( mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            mIndicator = getScrollX() / mWidth;
            invalidate();
        }
    }
}

下面簡單的介紹一下這個banner的思路吧，先佈局好所有的child，每個child都充滿整個屏幕，然後攔截touch事件，根據手指滑動的距離調用scrollBy()來滾動，當手指停下的時候計算下個要到達第幾個child的意圖，根據Scroller和回調函數computeScroll()函數來完成接下來的滾動，這個只是child的滾動，我們看到下面還有四個小圓點，這個我叫做指示器，指示當前到了那個圖片，因爲它不要響應事件，完全可以畫出來，所以我重寫了ViewGroup的draw()方法（注意，android佈局三步走，measure()、layout()、draw()前面兩個方法是final的，代表不能重寫，draw()方法不是final的，可以重寫，但是一定要調用父類的draw()方法，否則child將不可見），在super.draw()之後繪製指示器，計算座標。注意：重繪的時候需要調用下面這個方法，否則將失效：

setWillNotDraw(false);

具體的可以參考一下這篇博客：

http://blog.csdn.net/leehong2005/article/details/7299471

下面放上完整的代碼：

package cn.karent.nanhang;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import cn.karent.nanhang.UI.NewsUI;

public class MainActivity extends AppCompatActivity {
    /**
     * 封裝跟新聞有關的UI
     */
    private NewsUI mNewsUI;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_layout);
        //設置titile
        setTitle("請登錄...");
        mNewsUI = new NewsUI(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    /**
     * ActionBar上面的按鈕選中回調
     * @param item 菜單項
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch( id ) {
            case R.id.userhead:
Log.d("onOptionSelected", "菜單回調");
                setTitle("南昌航空大學");
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }


}

上面有一個NewsUI，我將關於新聞的操作的全部提取到這個NewsUI類裏面了：

package cn.karent.nanhang.UI;

import android.app.Activity;
import android.widget.ListView;
import cn.karent.nanhang.R;
import cn.karent.nanhang.adapter.NewsAdapter;
import cn.karent.nanhang.model.News;

/**
 * Created by wan on 2016/12/24.
 * 將新聞列表的常用操作封裝在這裏
 */
public class NewsUI {

    private Activity mActivity;

    private ListView mListView;

    private NewsAdapter mNewsAdapter;

    public NewsUI(Activity activity) {
        mActivity = activity;
        mListView = (ListView)activity.findViewById(R.id.news_list);
        mNewsAdapter = new NewsAdapter(activity, R.layout.news_item_layout);
        mListView.setAdapter(mNewsAdapter);
        fillContent();
    }

    /**
     * 給ListView填充新聞
     */
    public void fillContent() {
        News  n = new News();
        n.setCount("閱讀次數：322");
        n.setTitle("12月26日華東理工大學黎野平教授來校講學");
        n.setTime("2016/12/23/ 15:21:03");
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
        mNewsAdapter.add(n);
    }





}

整個主界面的佈局：

<?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">
    <!--顯示banner-->
   <cn.karent.nanhang.UI.ImageTurnLayout
       android:layout_width="match_parent"
       android:layout_height="150dp">
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="fitXY"
           android:src="@drawable/banner"/>
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="fitXY"
           android:src="@drawable/banner"/>
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="fitXY"
           android:src="@drawable/banner"/>
       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scaleType="fitXY"
           android:src="@drawable/banner"/>

   </cn.karent.nanhang.UI.ImageTurnLayout>
    <!--顯示功能-->
    <GridLayout
        android:id="@+id/myGrid"
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:columnCount="4"
        android:rowCount="2"
        android:padding="20dp"
        android:layout_height="175dp">
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_culture">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp1_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_hand">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp2_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_forum">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp3_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_transaction">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="10dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp4_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_wifi">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp5_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_mobile_office">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp6_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_card">

            </TextView>
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="6dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:src="@drawable/btn_tab_temp7_off"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/college_service">
            </TextView>
        </LinearLayout>


    </GridLayout>

    <!--顯示新聞-->
    <ListView
        android:id="@+id/news_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </ListView>
    <!--底部菜單欄-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:clipChildren="false"
        android:background="@android:color/white"
        android:layout_height="70dp">
        <LinearLayout
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:gravity="center"
            android:background="@color/tabColor"
            android:orientation="horizontal">
            <!--我的資料-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_home"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@android:color/white"
                    android:text="@string/tab_home"/>
            </LinearLayout>
            <!--我的課表-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_doctor"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_doctor"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
            <!--中間小加號-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_gravity="bottom"
                android:layout_marginTop="-15dp"
                android:paddingTop="5dp"
                android:background="@drawable/home_shape"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="57dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/home_on"/>

            </LinearLayout>
            <!--我的通知-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_project"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_project"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
            <!--掃一掃-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="25dp"
                    android:src="@drawable/pic_tab_personal"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/tab_person"
                    android:textColor="@android:color/white"/>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

補充一點代碼，上面的代碼裏面使用了ScreenUtil類，這個類的代碼如下：

package cn.karent.nanhang.util;

import android.util.DisplayMetrics;

/**
 * Created by wan on 2016/12/17.
 */
public class ScreenUtil {

    /**
     * 獲取屏幕的密度
     * @return
     */
    public static float getDensity() {
        DisplayMetrics dm = MyApplication.getContext().getResources().getDisplayMetrics();
        float density = dm.density;
//        Log.d("density", density + "");
        return density;
    }

    public static DisplayMetrics getDislayMetrics() {
        return MyApplication.getContext().getResources().getDisplayMetrics();
    }

    public static int px2dp(float p) {
        float density = getDensity();
        return (int)(p / density + 0.5f);
    }

    public static int dp2px(float dip) {
        return (int)(dip * getDensity() + 0.5f);
    }

    /**
     * 獲取屏幕寬度
     * @return
     */
    public static int getScreenWidth() {
        return getDislayMetrics().widthPixels;
    }

    public static int getScreenHeight() {
        return getDislayMetrics().heightPixels;
    }


}

MyApplication.java:

package cn.karent.nanhang.util;

import android.app.Application;
import android.content.Context;

/**
 * Created by wan on 2016/12/17.
 * 獲取全局Context
 */
public class MyApplication extends Application {

    private static Context context;

    public void onCreate() {
        super.onCreate();
        context = getApplicationContext();
    }

    public static Context getContext() {
        return context;
    }

}

要想我們自己的Application生效，需要配置一下AndroidManifest.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.karent.nanhang">

    <application
        android:allowBackup="true"
        android:name=".util.MyApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>


    </application>

</manifest>

android:name=".util.MyApplication"

添加上面的那一行系統就不會自己創建Application，而是會使用我們創建的Application

好了，完整的代碼就是上面我所說的了，希望大家聖誕夜過的愉快！