练习项目——学生协作软件客户端（1）界面

据说写写博客有助于提高，于是作为一个连菜鸟都算不上的小白厚着脸皮来写点东西，抱着别人都懒得喷我的心态，当作学习过程中的一点笔记和备忘，以防过个几天就把学过什么都忘了。错漏之处在所难免，还请大家多多指正。

这是一个练习项目，然后笔者所在的组要写的是一个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跟我说：你开博客我就粉你啊，人呢？