[仿南航app开发日记2]主界面完成

最新推荐文章于 2017-01-03 16:49:27 发布

伯兰

最新推荐文章于 2017-01-03 16:49:27 发布

阅读量1.8k

点赞数 1

分类专栏：仿南航app

本文链接：https://blog.csdn.net/supervictim/article/details/53861521

版权

仿南航app 专栏收录该内容

7 篇文章 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>