android学习:《超级课程表》的课表界面设计
《超级课程表》的课表界面设计
话不多说,直接看效果图
下面我们来看《超级课程表的界面》
这样的话,我们需要自定义三种视图:
1.自定义 View方格背景
2.自定义 ViewGroup来装课表信息
3.自定义 TextView显示课表信息
三者的关系是:自定义View提供背景,自定义ViewGroup提供装载 课表视图 的容器,自定义TextView显示课表信息。
首先我们先画背景!丛里往外进行设计
1.自定义View,画出方格背景
1.画网格线需要先测量出两横线之间的距离和两竖线之间的距离,这里我直接令两竖线的距离和两横线的距离相等。
2.两竖线之间的距离直接将手机屏幕的宽度 width 除于 7;
//实现View中的OnMeasure方法进行测量
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {width = MeasureSpec.getSize(widthMeasureSpec);// widthLine = 7:一周sectionWidth = width / widthLine;sectionHeight = sectionWidth;//heightLine = 12:一天一般有12节课height = (int) (sectionHeight * heightLine);setMeasuredDimension(width,height);}
3.测量出View的高度和宽度以及两线之间的距离sectionHeight==heightLine后,我们开始画线:
//实现onDraw方法,其中mPaint需要在构造函数进行一些初始化和设定工作
@Overrideprotected void onDraw(Canvas canvas) {//画横线for(int i = 0;i<=heightLine;i++){canvas.drawLine(0,(float)( i*sectionHeight),(float)width,(float)(i*sectionHeight),mPaint);}//画竖线for(int i =0;i<=widthLine;i++){canvas.drawLine((float)( i*sectionWidth),0,(float)(i*sectionWidth),(float)height,mPaint);}}
综上,我们已经完成自定义 背景方格,下面我们开始自定义ViewGroup容器
2.自定义ViewGroup容器
**1.自定义ViewGroup,我们需要用ViewGroup来给自定义课表信息进行摆放到特定的位置
**2.把课表摆放到特定位置,那么我们首先需要的就是计算出这个特定位置,因为需要按照方格背景来进行摆放,因此我们需要的宽和高基本和之前自定义View的宽和高相同。同样我们需要实现onMeasure方法
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {width = MeasureSpec.getSize(widthMeasureSpec);// widthLine = 7:一周sectionWidth = width / widthLine;sectionHeight = sectionWidth;//heightLine = 12:一天一般有12节课height = (int) (sectionHeight * heightLine);setMeasuredDimension(width,height);}
@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {int count = getChildCount();//获得子控件个数for (int i = 0; i < count; i++) {MyButtonView child = (MyButtonView) getChildAt(i);int courseInWeek = child.getCourseInWeek();//获得周几int startClass = child.getStartClass();int stopClass = child.getStopClass();//dividerWidth 为 子控件之间的间隔//计算左边的坐标int left = (int) (sectionWidth * courseInWeek+dividerWidth);//计算右边坐标int right = (int) (left + sectionWidth - 2*dividerWidth);//计算顶部坐标int top = (int) (2*sectionHeight * startClass+dividerWidth);//计算底部坐标int bottom = (int) (stopClass*sectionHeight- dividerWidth);child.layout(left, top, right, bottom);}}
3.自定义TextView,展示课表信息
**1.添加一些属性
<declare-styleable name="MyButtonView"><attr name="courseInWeek" format="integer"/><attr name="startClass" format="integer"/><attr name="stopClass" format="integer"/><attr name="courseInfo" format="string"/></declare-styleable>
**2.实现构造方法
public MyButtonView(Context context) {this(context, 0);}public MyButtonView(Context context, AttributeSet attrs) {this(context, attrs,0);}public public MyTextView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.MyTextView);courseInWeek = array.getInt(R.styleable.MyButtonView_courseInWeek,0);courseId = array.getInt(R.styleable.MyButtonView_courseId,0);courseInfo = array.getString(R.styleable.MyButtonView_courseInfo);}
3.在自定义TextVeiw中实现get和set方法!!!!!!自动实现
4.主页面布局
- 需要在布局中添加命名空间,我用android studio编写的代码
xmlns:myview="http://schemas.android.com/apk/res-auto"
eclipse中应该是
xmlns:myview="http://schemas.android.com/apk/包名"
- 主页面布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:myview="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.study.pengshao.ncutimetable.MainActivity"><include layout="@layout/week_title"/><ScrollViewandroid:overScrollMode="never"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scrollbars="none"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><com.study.pengshao.ncutimetable.com.classUtils.MyViewGroupClassandroid:id="@+id/class_item_vg"android:layout_width="match_parent"android:layout_height="match_parent"></com.study.pengshao.ncutimetable.com.classUtils.MyViewGroupClass><com.study.pengshao.ncutimetable.com.classUtils.BackgroundViewandroid:id="@+id/background_view"android:layout_width="match_parent"android:layout_height="match_parent"/></RelativeLayout></ScrollView></LinearLayout>
5.动态向ViewGroup中添加自定义课表视图
MyViewGroupClass myViewGroup = (MyViewGroupClass)findViewById(R.id.class_item_vg)MyTextView myTextView = new MyTextView (MainActivity.this);
//datas是一个数据的List<data>
for(int i = 0,n = datas.size();i<n;i++){myTextView.setCourseInWeek(datas.get(i).getCourseWeek());myTextView.setStartClass(datas.get(i).getStartClass());myTextView.setStartClass(datas.get(i).getStopClass());myTextView.setText(datas.get(i).getClassInfo());myViewGroup.addView(myTextView);
}
- 再附上一张效果图
- **
android学习:《超级课程表》的课表界面设计相关推荐
- Android仿超级课程表的课程界面设计
- 接下来先分析页面布局,从上往下看,第一行是显示标题,第二行是显示时间和周几,使用线性布局,第一列是用来显示节次的,宽度跟后面显示周几的7列不一样,可以用DP来设定:后面7列宽度可以用权重来分配,行 ...
- 仿超级课程表的课程界面设计
首先看下自己做的课表界面吧 接下来先分析页面布局,从上往下看,第一行是显示标题,第二行是显示时间和周几,使用线性布局,第一列是用来显示节次的,宽度跟后面显示周几的7列不一样,可以用DP来设定:后面7列 ...
- Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计 本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计 前 ...
- Android学习之路-----倒计时欢迎界面(更有条理)
2019独角兽企业重金招聘Python工程师标准>>> Android学习之路-----倒计时欢迎界面(更有条理) 转载于:https://my.oschina.net/symahl ...
- android国外壁纸app,国外Android精美主题、壁纸Ui界面设计大全-MyColorscreen
Android精美主题.壁纸Ui界面设计大全-MyColorscreen 让你看到你的朋友或者大家使用什么应用程序和壁纸. 如果你跟我们一样,热爱智能手机和平板电脑.喜欢玩不同的主题, MyColor ...
- android qq功能实现原理,Android QQ、微信聊天消息界面设计原理与实现
Android QQ.微信聊天消息界面设计原理与实现 原理:Android平台上,典型的以腾讯的QQ.微信这些聊天消息界面通常可以采用ListView设计与实现,需要使用ListView 适配器 ...
- Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)
参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照' 安卓弟 '提供的android 项目实战--打造超级课程表一键提取课表功能文章,对他的代码进行了修改和补充,为 ...
- php模拟超级课程表,一个功能完善、UI简洁的仿超级课程表的课表控件 TimetableView...
TimetableView 一个非常漂亮的Android课程表控件,该控件支持的功能: 设置数据源 颜色设置,控件内置17种颜色 触感反馈,每种内置颜色都有对应的三个样式 日期显示与高亮 课表Item ...
- 超级课程表导入课表显示服务器繁忙,超级课程表导入不了怎么办 超级课程表怎么导入课程表...
超级课程表7.8.4 官方安卓版 类型:教育学习大小:13.8M语言:中文 评分:7.5 标签: 立即下载 超级课程表软件可以帮助大家导入一学期的课程表,这样你就可以使用超级课程表随时了解课程信息,不 ...
最新文章
- C++11 std::bind std::function 高级用法
- 网站中人性化提示信息的JavaScript实现
- redhat7配置本地源
- Linux C++、Boost、ACE ......
- TypeError: only integer scalar arrays can be converted to a scalar index一例
- .NET应用迁移到.NET Core(二)风险评估
- MacOS使用brew无法安装Python_无法安装gdbm_无法安装autojump
- spring的事件机制实战
- cnpm与npm的区别
- Java 反射(练习)
- 数据结构 —— 递归和树
- java中创建类的时候有没有分配内存,你必须了解的java内存管理机制(一)-内存分配...
- 解析几何 —— 椭圆
- Java学习之路 之 容易混淆篇
- sql之stuff函数学习笔记
- 拓端tecdat|R语言用Rcpp加速Metropolis-Hastings抽样估计贝叶斯逻辑回归模型的参数
- ASIO Link Pro 声卡跳线(搭配福克斯特solo声卡)
- ISCW实验11:使用SDM配置Site-to-Site IPSec ×××
- 你真的了解你手机的状态栏吗?
- google的视频下载插件
热门文章
- 三星猎户座处理器失败原因是什么?
- Android OTA 升级之一:编译升级包
- Scrapy中selenium的应用-----并通过京东图书书籍信息爬取项目进行实操!
- 有什么牌子的灯具性价比高又好用?国内灯具五大品牌
- linux将文件每一列对齐输出,Linux之awk工具、printf如何格式化输出?diff如何进行文件对比?-tmp文件...
- js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌
- Vue3版本升级采坑(1) - Vue3+mintUI报错,实则版本vue3太高;
- 【iOS】—— nil、Nil、NULL和NSNull学习
- mysql using mrr_Using MRR(Multi-Range Read )
- Python数据分析实战学习与分享(一)