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

本文转自：http://www.cnblogs.com/hll2008/archive/2011/01/03/1924952.html

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

 

      一、接下来的任务就是在android中实现这样的效果显示，从这个效果的设计分别把图片分成背景、版本号部分、软件名称和图标、作者名称和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的父控件用来控制居中对齐已经底部对齐的实现，具体代码如下：代码

<? xml version="1.0" encoding="utf-8" ?>
< LinearLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:id ="@+id/layout"
    android:orientation ="vertical"
    android:layout_width ="fill_parent"
    android:layout_height ="fill_parent" >
     < ImageView
     android:layout_width ="wrap_content"
    android:layout_height ="wrap_content"
    android:src ="@drawable/ver"
    android:layout_marginTop ="15dip"
    android:layout_marginLeft ="15dip" >
     </ ImageView >
     < RelativeLayout
     android:layout_width ="fill_parent"
    android:layout_height ="fill_parent" >
     < ImageView
     android:layout_width ="wrap_content"
    android:layout_height ="wrap_content"
    android:src ="@drawable/logo"
    android:layout_centerInParent ="true" >
     </ ImageView >
    
     < ImageView
     android:layout_width ="wrap_content"
    android:layout_height ="wrap_content"
    android:src ="@drawable/dev"
    android:layout_alignParentBottom ="true"
    android:layout_alignParentRight ="true"
    android:layout_marginRight ="5dip"
    android:layout_marginBottom ="35dip" >
     </ ImageView >
     </ RelativeLayout >
</ LinearLayout >

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

 public void onCreate(Bundle savedInstanceState) {

         super .onCreate(savedInstanceState);
        setContentView(R.layout.main);
}

 

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

代码

// 获取屏幕方向
public   static   int  ScreenOrient(Activity activity)
    {
         int  orient  =  activity.getRequestedOrientation(); 
         if (orient  !=  ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE  &&  orient  !=  ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
             // 宽>高为横屏,反正为竖屏  
             WindowManager windowManager  =  activity.getWindowManager();  
             Display display  =  windowManager.getDefaultDisplay();  
              int  screenWidth   =  display.getWidth();  
              int  screenHeight  =  display.getHeight();  
             orient  =  screenWidth  <  screenHeight  ?  ActivityInfo.SCREEN_ORIENTATION_PORTRAIT : ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
        }
         return  orient;
    }

 

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

代码

public   static   void  AutoBackground(Activity activity,View view, int  Background_v,  int  Background_h)
    {
         int  orient = ScreenOrient(activity);
         if  (orient  ==  ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {  // 纵向 
            view.setBackgroundResource(Background_v);
        } else {  // 横向
            view.setBackgroundResource(Background_h);
        }  
    }

 

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

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

 

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