当前位置： 移动技术网 > 移动技术>移动开发>Android > Android开发高仿课程表的布局实例详解

Android开发高仿课程表的布局实例详解

2019年07月24日  | 移动技术网移动技术  | 我要评论

先说下这个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>

这个就是模仿课程表的布局，最后附上源码git地址：

以上所述是小编给大家介绍的android开发高仿课程表的布局实例详解，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网