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

Android开发高仿课程表的布局实例详解,第1张

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

先说下这个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"><!--显示时间--><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:background="@androID:color/white"><TextVIEwandroID: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年"/><!--竖线--><VIEwandroID:layout_wIDth="1dp"androID:layout_height="match_parent"androID:layout_marginleft="20dp"androID:layout_margintop="10dp"androID:layout_marginBottom="10dp"androID:background="#00FFFF"/><!--下拉方式选周数--><SpinnerandroID:ID="@+ID/switchWeek"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:gravity="center"androID:layout_gravity="center"/></linearLayout><!--分隔线--><VIEwandroID:layout_wIDth="match_parent"androID:layout_height="1dp"androID:background="#00FF7F"/><!--显示星期--><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:gravity="center"androID:background="@androID:color/white"><cn.karent.demo.UI.WeekTitleandroID:layout_wIDth="match_parent"androID:layout_height="30dp"androID:layout_margintop="10dp"/></linearLayout><!--显示课表详细信息--><ScrollVIEwandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"><linearLayoutandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"><!--显示多少节课--><linearLayoutandroID:layout_wIDth="25dp"androID:layout_height="match_parent"androID:orIEntation="vertical"androID:gravity="center"><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:text="一"androID:textSize="10dp"androID:gravity="center"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:textSize="12dp"androID:text="二"androID:gravity="center"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:textSize="12dp"androID:text="三"androID:gravity="center"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:textSize="12dp"androID:text="四"androID:gravity="center"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:textSize="12dp"androID:text="五"androID:gravity="center"/><TextVIEwandroID:layout_wIDth="wrap_content"androID:layout_height="92dp"androID:textSize="12dp"androID:text="六"androID:gravity="center"/></linearLayout><VIEwandroID:layout_wIDth="1dp"androID:layout_height="match_parent"androID:background="#E5E5E5"/><GrIDVIEwandroID: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"><TextVIEwandroID: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开发高仿课程表的布局实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持!

总结

以上是内存溢出为你收集整理的Android开发高仿课程表的布局实例详解全部内容,希望文章能够帮你解决Android开发高仿课程表的布局实例详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1148015.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存