Android开发高仿课程表的布局实例详解,android开发页面布局

8
回复
959
查看
[复制链接]

317

主题

929

帖子

697

安币

手工艺人

发表于 2017-12-27 10:32:19 | 显示全部楼层 |阅读模式

        先说下这个demo,这是一个模仿课程表的布局文件,虽然我是个菜鸟,但我还是想留给学习的人一些例子,先看下效果

        

        然后再来看一下我们学校的app

        

        布局分析

        先上一张划分好了的布局图

        首先整个页面放在一个linearlayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息

        1:这个没什么好讲的,就是直接一个linearlayout布局,然后将控件一个textview用来显示年份,一个view用来当作竖线,一个spinner用来显示选择周数

        2:这个是显示星期几的部件,是我自定义的view,自己重写ondraw方法,然后画出七个字,代码如下:

[Java] 查看源文件 复制代码
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文件

        

[Java] 查看源文件 复制代码
<

        下面是gridview的适配器代码:

[Java] 查看源文件 复制代码
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的布局。

[Java] 查看源文件 复制代码
convertview=layoutinflater.from(mcontext).inflate(r.layout.grib_item, null);

        这一行代码是加载布局文件并返回一个view

[Java] 查看源文件 复制代码
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的背景,其中背景的代码如下:

[Java] 查看源文件 复制代码
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#75b7a0" />
<corners android:radius="3dip" />
</shape>

        其他的类似,还有就是item的布局文件:

[Java] 查看源文件 复制代码
<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地址:点我下载


20

主题

9237

帖子

2344

安币

Android大神

Rank: 6Rank: 6

发表于 2017-12-28 08:08:44 | 显示全部楼层
支持楼主,支持安卓巴士!

7

主题

9574

帖子

1970

安币

Android大神

Rank: 6Rank: 6

发表于 2017-12-29 18:36:13 | 显示全部楼层
支持,感谢,祝巴士越来越好~

11

主题

9395

帖子

-11

安币

QQ游客

推广达人

发表于 2017-12-31 05:27:59 | 显示全部楼层
楼主威武,以后多发干货,多办活动~!

1

主题

114

帖子

1213

安币

Android大神

Rank: 6Rank: 6

QQ达人

发表于 2018-3-16 14:20:48 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:)

0

主题

205

帖子

228

安币

攻城狮

Rank: 3Rank: 3

发表于 2018-4-19 10:06:14 | 显示全部楼层
看不到源码啊

0

主题

8

帖子

21

安币

初级码农

Rank: 1

发表于 2018-5-1 08:46:04 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:)

0

主题

8

帖子

21

安币

初级码农

Rank: 1

发表于 2018-5-1 08:46:39 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )