Android开发高仿课程表的布局实例详解
先说下这个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开发高仿课程表的布局实例详解,希望对大家有所帮助