练习项目——学生协作软件客户端(1)界面
来源:互联网 发布:java openjdk 1.7 编辑:程序博客网 时间:2024/05/10 10:11
据说写写博客有助于提高,于是作为一个连菜鸟都算不上的小白厚着脸皮来写点东西,抱着别人都懒得喷我的心态,当作学习过程中的一点笔记和备忘,以防过个几天就把学过什么都忘了。错漏之处在所难免,还请大家多多指正。
这是一个练习项目,然后笔者所在的组要写的是一个Android端的学生团队协作软件,这个软件比较简单,纯当练手来着..所以参考价值几乎为零,但是把里面用到的知识拿来记录一下还是有点好处的。
先说一下这个软件要干什么,这个软件是要让学生获得一个通知发布、资料共享的统一平台,大概就是一个简化和专门化的团队协作软件。
======================我是分割线==========================
这篇博客主要是记录一下写这个软件的UI的过程以及其中遇到问题的解决。
主要的界面是一个登陆界面(注册界面类似登陆界面)、主界面还有就是弹出的通知窗口。
登陆界面的截图:
这个是一个简单的LinearLayout,
需要记得的是布局中的一些基本知识:
1.margin和padding的区别
这个和css里的盒子模型是一样的:
margin是指该控件距离边父控件的边距;
padding是指该控件内部内容(比如文本、图片等)距离该控件的边距。
--->所以这里调整TextView、EditText的位置就使用margin
2.android:gravity和android:layout_gravity的区别
gravity用来设置View组件内部的对齐方式,比如TextView设置android:gravity = "center"后,里面的文字就会居中显示
layout_gravity则是设置View组件在Container中的对齐方式,比如TextView设置android:layout_gravity = "center"后,整个TextView就会在外层的Container中居中。
3.EditText可以设置初始显示的文字,用android:text,但是这种文字只要删除就没了,如果需要用户在每次把输入框中的文字删除后都能看到提示就要用android:hint来做,hint的颜色可以自定义,android:hintColor
完整的布局文件是这样(activity_login.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" android:background="#000000" > <TextView android:layout_marginTop="100dip" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/tv_login_title" android:textSize="28sp" android:textColor="#dddddd" /> <LinearLayout android:layout_marginTop="20dip" android:layout_marginLeft="20dip" android:layout_marginRight="20dip" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="vertical" > <EditText android:id = "@+id/et_username" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" android:hint="@string/et_login_hint_username" android:textSize="18sp" android:textColor="#555555" android:textColorHint="#aaaaaa" /> <EditText android:id = "@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:singleLine="true" android:hint="@string/et_login_hint_password" android:textSize="18sp" android:inputType="textPassword" android:textColor="#555555" android:textColorHint="#aaaaaa" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dip" > <Button android:id="@+id/bt_signup" android:layout_width="130dip" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="20dip" android:text="@string/bt_login_signup" android:textColor="#000000" /> <Button android:id="@+id/bt_login" android:layout_width="130dip" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_marginRight="20dip" android:text="@string/bt_login_login" android:textColor="#000000"/> </RelativeLayout> </LinearLayout>
这样写完后,这个Activity会有标题,要想隐藏标题,不是在布局文件里设置,而是在AndroidManifest.xml中设置,对想要设置的Acivity的属性里加上android:theme = "@android:style/Theme.NoTitleBar",这个属性有很多预设的style可以选择,名字方面也很直观,比如:Theme.NoTitleBar.Fullscreen 不显示应用程序标题栏,并全屏;Theme.Light 背景为白色;Theme.Wallpaper.NoTitleBar 用系统桌面为应用程序背景,且无标题栏等等。如果想要全局用同一个theme,那可以直接在application的属性里设置,写法是一样的,至于自定义theme,就需要自己写一个xml文件,比如这样:
<?xml version="1.0" encoding="utf-8"?><resources> <style name="MyNewTheme"> <item name="android:windowNoTitle">true</item> <item name="panelForegroundColor">#00000000</item> <item name="panelBackgroundColor">#FFFFFFFF</item> <item name="panelTextSize">20</item> <item name="panelTextColor">?panelForegroundColor</item> </style></resources>
不过这个练习项目里没有用到自定义的style。
登陆进去后,界面就是这样了,为了练习起见,这里使用了fragment:
顶上是3个TextView用作标签,标签下面是3个TextView指示所处位置,响应TextView被点击时就把背景设成蓝色(为了偷懒..有效果就行了),然后下面一个TextView用来显示当前路径,在下面就是一个LinearLayout,把下部填满,这个LinearLayout之后要作为Container放不同的fragment。
在布局方面有必要知道的是layout_weight的使用,在顶上的两行TextView里都用了这个属性,这个属性设定了权值,如果都设为1,然后再将layout_width设为0dip就会让这三个View组件平分宽度。
顶上的三个TextView 的布局是这样(部分activity_main.xml):
<LinearLayout android:layout_width = "match_parent" android:layout_height = "wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/tv_local" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/tv_local_tab" android:textSize="25sp" /> <TextView android:id="@+id/tv_server" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/tv_server_tab" android:textSize="25sp" /> <TextView android:id="@+id/tv_notification" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/tv_message_tab" android:textSize="25sp" /> </LinearLayout>
在这两行TextView下面的LinearLayout里填充的fragment可以看作是一个轻量级的Activity,它也是有自己的布局文件,比如这个项目中有三个fragment供切换,分别是fragment_local.xml,fragment_server.xml,fragment_notification.xml。每个里面都有ListView,所以这里将要去继承ListFragment而不是直接继承Fragment,在继承ListFragment的时候,布局文件有一个东西要注意,就是布局文件里的ListView的id必须是@id/android:list,用其他的都不行。
对于本地文件和远程文件,在ListView上面还有一个路径框,这个路径框就是一个TextView,因为里面的文字会改变,如果只是将高度设定成wrap_content,可能会变成多行,要是想控制在一行这样,那就使用属性:android:singleLine = "true",对于超出部分,android还提供如何显示省略号的选项,用android:ellipsize这个属性来设定,比如这里,笔者希望用户看到后面的路径就好,所以将这个属性的值设为了start。
另外,之后会使用SimpleAdapter来提供数据给ListView,所以ListView里面的项目有自己独立的布局文件。
下面是通知界面的截图:
通知主界面刚刚也说了,就是一个fragment,继承了ListFragment,点击某个条目会出现详细的内容,这个内容的显示是一个Dialog的形式,做出这个Dialog的方法就是之前说的,在Manifest里设置Activity的theme,将这个Activity设置成Dialog就可以了。但这里又有一个问题,设置完Theme.Dialog后发现这个Activity有标题,笔者不想要那个标题,但是没有NoTitleBar与Dialog共存的theme,笔者的解决方法是在代码里加上getWindow().requestFeature(Window.FEATURE_NO_TITLE);这样一句话,这句话放在onCreate方法里面,需要注意的是这句话必须写在setContentView之前,否则会报错。
然后这个弹出的Dialog是用RelativeLayout布局的,先把标题和下面两个按钮放进去,然后再在中间填充内容,这样比较方便。中间那块为了要滚动的效果,所以将TextView用一个ScrollView包起来,这样就能滚动了,需要注意的是ScrollView里面的那个TextView的layout_height不可以写match_parent,需要写成wrap_content,否则会报错。
代码就这样:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/tv_detail_notification_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="25sp" /> <LinearLayout android:id="@+id/ll_detail_notification_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" > <Button android:id="@+id/bt_detail_notification_delete" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_marginRight="10dip" android:layout_weight="1" android:gravity="center" android:text="@string/bt_detail_notification_delete" android:textSize="20sp" /> <Button android:id="@+id/bt_detail_notification_close" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/bt_detail_notification_close" android:textSize="20sp" /> </LinearLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/ll_detail_notification_button" android:layout_below="@id/tv_detail_notification_title" android:layout_marginBottom="10dip" android:layout_marginTop="10dip" > <TextView android:id="@+id/tv_detail_notification_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20sp" /> </ScrollView></RelativeLayout>
===================分割线2号====================
这次大概就先写这些,基本上记录了写这个软件时布局遇到的问题,然后再次说一句,我是个小白,大家多指正啊!
还有就是写一下里面用到的图标来源:
http://sc.chinaz.com/tubiao/140406175350.htm
PS.有个friend跟我说:你开博客我就粉你啊,人呢?
- 练习项目——学生协作软件客户端(1)界面
- 练习项目——学生协作软件客户端(2)ListFragment
- 练习项目——学生协作软件客户端(3)网络
- “雕塑”系统,开放式软件项目协作平台
- 学生信息管理系统(三)——界面分析
- 第十七周自由练习项目——acm 学生最高最低成绩
- Android 练习项目 ——简单记账软件的实现
- 【学生系统】——登录界面
- 学生管理系统——登录界面
- SharpStreaming项目开发纪实:构建基本的服务器及客户端应用(七)——服务器界面实现
- 跨平台团队协作项目源码管理软件Mercurial客户端TortoiseHg
- QQ项目第一天(客户端登录界面)
- Android UI 设计 练习1 ——登陆界面
- 项目1——存储班长信息的学生类
- 第二周(项目一)——学生成绩统计
- 第十六周项目—学生成绩处理1
- 第十七周项目六—学生成绩(6)
- 客户端软件的用户体验界面规范
- 文件操作之NSFileManager
- 总结java方法(函数)传值和传引用的问题
- 法官判决三星需向苹果追加400万美元赔偿金
- 史上最全系列之开发环境搭建之NDK
- Android编译系统简要介绍和学习计划
- 练习项目——学生协作软件客户端(1)界面
- vector中erase用法注意事项
- I2C读写问题
- java的main函数在linux下面发布
- 线索树
- HDU 2203【亲和串】
- ANSI和UTF-8格式文件的区别
- csdn是神马?
- VC2010:fatal error LNK1169: 找到一个或多个多重定义的符号