android开发我的新浪微博客户端-载入页面UI篇(1.1)

开发第一件事情，那就是开发工具以及环境，我的配置是Eclipse Helios (3.6.1) + Adroid2.2，具体的环境搭建我就不罗嗦了，google一下一大堆，光博客园里都能搜到很多篇了。

　　开发第二件事情，既然是开发新浪的微博客户端，那就先去新浪申请微博账号然后登陆后到新浪的开放平台，新浪的开放平台提供的新浪微博对外的api接口，在我的应用中创建一个新的应用获取App Key和App Secret，这2个值后面会有用到先记录下来。在新浪的开放平台中提供了开发文档、SDK、接口测试工具等，本人决定直接通过新浪的Rest Api进行开发并不打算使用新浪提供的SDK,据说新浪提供的java版的SDK并不能直接用来进行android的开发需要进行一定的修改才能使用，只是听说我没有试过不一定准确。

　　最后在说一下，我准备分为UI和功能两部分分别进行说明讲解，据我自己的情况大部分的时间都花在的UI的设计和实现上了，编码倒反而工作量小多了，所以特别把UI部分分出来讲。

　　最后还要在说一下，很抱歉上面内容基本上属于废话没有什么实质内容了但是既然是第一篇还是得象征性的交代一下，从下篇开始讲具体的内容。

 

本软件设定用户第一个接触到的功能就是页面载入等待功能，这个功能对使用者来说就是一个持续1、2秒钟的等待页面，在用户等待的同时程序做一些必要的检查以及数据准备工作，载入页面分为UI篇和功能篇，从表及里首先是UI的实现，一个软件除功能之外还得有一个光鲜的外表也是非常重要的，尽管本人设计水平一般但是还是亲自操刀用ps先做了一下设计效果图如下：

      一、接下来的任务就是在中实现这样的效果显示，从这个效果的设计分别把图片分成背景、版本号部分、软件名称和图标、作者名称和blog四个部分，按照这样的思路把分别生成4张 png的图片，背景部分考虑实现横屏和竖屏切换额外添加一张横屏背景图，然后新建android工程，我这里的名称为 MySinaWeibo,android版本勾选2.2,并且创建名为MainActivity的Activity作为整个软件的起始页面，然后把上面的这些图片保存到项目的res/drawable-mdpi文件夹下，关于res目录下的drawable-mdpi、drawable-ldpi,、 drawable-hdpi三个文件夹的区别，mdpi 里面主要放中等分辨率的图片,如HVGA (320x480)。ldpi里面主要放低分辨率的图片,如QVGA (240x320)。hdpi里面主要放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)。android系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片，在开发程序时为了兼容不同平台不同屏幕，建议各自文件夹根据需求均存放不同版本图片，我这里就不进行这么多的考虑了。

     二、完成图片资源的准备后接下就是layout文件的编写， 在res/layout文件夹下新建main.xml文件，这个layout采用LinearLayout控件作为顶层控件，然后用ImageView控件分别实现版本号图片顶部靠左对齐显示、软件名称和图标图片居中对齐、作者名称和blog图片底部靠右对齐。注意在版本号图片显示ImageView控件下面添加一个RelativeLayout控件作为软件名称和图标图片ImageVIew和作者名称和blog图片ImageView的父控件用来控制居中对齐已经底部对齐的实现，具体代码如下：

1. 
   
3.     android:id="@+id/layout"
   
4.     android:orientation="vertical"
   
5.     android:layout_width="fill_parent"
   
6.     android:layout_height="fill_parent">
   
7.    
8.     android:layout_width="wrap_content"
   
9.     android:layout_height="wrap_content"
   
10.     android:src="@drawable/ver"
    
11.     android:layout_marginTop="15dip"
    
12.     android:layout_marginLeft="15dip">
    
13.    
    
14.    
15.     android:layout_width="fill_parent"
    
16.     android:layout_height="fill_parent">
    
17.    
18.     android:layout_width="wrap_content"
    
19.     android:layout_height="wrap_content"
    
20.     android:src="@drawable/logo"
    
21.     android:layout_centerInParent="true">
    
22.    
    
23.    
    
24.    
25.     android:layout_width="wrap_content"
    
26.     android:layout_height="wrap_content"
    
27.     android:src="@drawable/dev"
    
28.     android:layout_alignParentBottom="true"
    
29.     android:layout_alignParentRight="true"
    
30.     android:layout_marginRight="5dip"
    
31.     android:layout_marginBottom="35dip">
    
32.    
    
33.    
    

复制代码

三、在ec打开名为MainActivity的Activity源代码文件进行编辑，onCreate部分代码如下：

1. public void onCreate(Bundle savedInstanceState) {
   
2.         super.onCreate(savedInstanceState);
   
3.         setContentView(R.layout.main);
   
4. }

复制代码

然后运行项目可以在模拟器中显示，上面的几个图片都按照设计的位置和效果进行显示只是整个页面的背景还是黑色的，接下来就是背景部分的显示实现，由于为了实现横竖屏切换显示，背景图的显示采用代码进行控制显示，首先用如下方法获取当前手机是横屏还是竖屏：

1. //获取屏幕方向
   
2. public static int ScreenOrient(Activity activity)
   
3.     {
   
4.         int orient = activity.getRequestedOrientation();
   
5.         if(orient != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE && orient != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
   
6.             //宽>高为横屏,反正为竖屏  
   
7.              WindowManager windowManager = activity.getWindowManager();  
   
8.              Display display = windowManager.getDefaultDisplay();  
   
9.              int screenWidth  = display.getWidth();  
   
10.              int screenHeight = display.getHeight();  
    
11.              orient = screenWidth < screenHeight ? ActivityInfo.SCREEN_ORIENTATION_PORTRAIT : ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
    
12.         }
    
13.         return orient;
    
14.     }

复制代码

然后编写一个名为AutoBackground的公共方法用来实现屏幕背景的自动切换，后面的几乎每一个功能页面都需要用到这个方法：

1. public static void AutoBackground(Activity activity,View view,int Background_v, int Background_h)
   
2.     {
   
3.         int orient=ScreenOrient(activity);
   
4.         if (orient == ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) { //纵向
   
5.             view.setBackgroundResource(Background_v);
   
6.         }else{ //横向
   
7.             view.setBackgroundResource(Background_h);
   
8.         }  
   
9.     }

复制代码

完成上述两方法后在 MainActivity的onCreate方法中调用AutoBackground方法进行屏幕自动切换：

1. LinearLayout layout=(LinearLayout)findViewById(R.id.layout);
   
2. //背景自动适应
   
3. Helper.AutoBackground(this, layout, R.drawable.bg_v, R.drawable.bg_h);

复制代码

到此完成了载入页面的UI部分的实现，测试运行模拟器中查看效果，基本上跟最上面的设计效果图相符，测试效果图如下：