热门手机应用界面分析--微信欢迎页面

我们知道，微信等手机应用在第一次启动时有欢迎界面，用于介绍程序的特性及使用方式：

那么我们可以针对这个界面分析：

我们启动monitor.bat，我们观察页面布局：

在TreeView窗口中我们看到有好几个Layout布局嵌套，直到我们看到一个Gallery，OK，我们大致知道了实现思路。

下面我们针对上面的一个页面进行分析。

我们看到页面上的内容是分成共几块个区域：

• 一个RelativeLayout负责显示当前区域；另一个RelativeLayout负责显示移入效果；
• 一个ImageView负责显示那几个小人；
• 一个TextView负责显示那段文字；
• 使用3个ImageView来负责显示当前处于哪个页面；

下面我们需要去找对应的Layout：

我们解压缩安装包，基本可以肯定布局文件应该是whats_news.xml，可惜混淆掉了~~~，没关系，我们可以Do It Youself, Let's go!

核心代码：

应用首次启动的判断(在主窗口中)：

        boolean firstLogin = PreferenceManager.getDefaultSharedPreferences(this).getBoolean(FLAG_FIRST_LOGIN, true);        if (firstLogin) {            startActivity(new Intent("com.freesoft.whatsnew.activity.WelcomeActivity"));        }

在应用程序中配置这个welcome activity的过滤器：

        <activity            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"            android:name="com.freesoft.whatsnew.activity.WelcomeActivity"            android:label="guider" >            <intent-filter>                <action android:name="com.freesoft.whatsnew.activity.WelcomeActivity" />                <category android:name="android.intent.category.DEFAULT" />            </intent-filter>        </activity>

这个WelcomeActivity的代码：

布局文件：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/main_layout"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@drawable/background_holo_dark" >    <com.freesoft.whatsnew.component.WelcomeGallery        android:id="@+id/what_news_gallery"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:clickable="true"        android:focusable="true"        android:spacing="0.0dip"        android:unselectedAlpha="1.2" />    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_gravity="center"        android:background="@null" >        <com.freesoft.whatsnew.component.PageControlView            android:id="@+id/what_news_page_control"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_marginBottom="17.5dip"            android:background="@null"            android:gravity="bottom|center" />    </LinearLayout>    <RelativeLayout        xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/mm_door"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/background_holo_dark"        android:orientation="horizontal"        android:visibility="gone" >        <ImageView            android:id="@+id/mm_left"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:adjustViewBounds="true"            android:scaleType="fitEnd"            android:src="@drawable/whatsnew_08_01" />        <ImageView            android:id="@+id/mm_right"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:adjustViewBounds="true"            android:scaleType="fitEnd"            android:src="@drawable/whatsnew_08_02" />    </RelativeLayout></FrameLayout>

Java代码：

package com.freesoft.whatsnew.activity;import com.freesoft.whatsnew.R;import com.freesoft.whatsnew.component.GalleryAdapter;import com.freesoft.whatsnew.component.PageControlView;import com.freesoft.whatsnew.component.WelcomeGallery;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemSelectedListener;import android.widget.ImageView;public class WelcomeActivity extends Activity implements OnItemSelectedListener {    private View viewDoor = null;    public ImageView imageLeft = null;    public ImageView imageRight = null;    private WelcomeGallery gallery = null;    private GalleryAdapter adapter = null;    private PageControlView indicateView = null;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.whats_news);        initCompnents();    }private void initCompnents() {gallery = (WelcomeGallery) findViewById(R.id.what_news_gallery);        adapter = new GalleryAdapter(this);        gallery.setFadingEdgeLength(0);        gallery.setSpacing(-1);        gallery.setAdapter(adapter);        gallery.setOnItemSelectedListener(this);        indicateView = (PageControlView) findViewById(R.id.what_news_page_control);        indicateView.setIndication(gallery.getCount(), 0);        viewDoor = findViewById(R.id.mm_door);        imageLeft = (ImageView) findViewById(R.id.mm_left);        imageRight = (ImageView) findViewById(R.id.mm_right);}public void openDoor() {viewDoor.setVisibility(View.VISIBLE);        imageLeft.startAnimation(adapter.setAnimation(R.anim.slide_left));        imageRight.startAnimation(adapter.setAnimation(R.anim.slide_right));}public void gotoHome() {    imageLeft.setVisibility(View.GONE);    imageRight.setVisibility(View.GONE);        finish();}    @Override    public void onItemSelected(AdapterView<?> parent, View view, int position,            long id) {        if (indicateView != null) {            indicateView.setIndication(parent.getCount(), position);        }    }    @Override    public void onNothingSelected(AdapterView<?> parent) {    }}

Gallery代码：

package com.freesoft.whatsnew.component;import android.content.Context;import android.util.AttributeSet;import android.view.KeyEvent;import android.view.MotionEvent;import android.widget.Gallery;public class WelcomeGallery extends Gallery {    public WelcomeGallery(Context context) {        super(context);        setStaticTransformationsEnabled(true);    }    public WelcomeGallery(Context context, AttributeSet attrs) {        super(context, attrs);        setStaticTransformationsEnabled(true);    }    public WelcomeGallery(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        setStaticTransformationsEnabled(true);    }    @Override    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,            float velocityY) {        if (velocityX > 0) {            onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, null);        } else {            onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);        }        return true;    }}

Adapter：

package com.freesoft.whatsnew.component;import android.content.Context;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;import android.preference.PreferenceManager;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationUtils;import android.widget.BaseAdapter;import android.widget.Button;import com.freesoft.whatsnew.R;import com.freesoft.whatsnew.activity.WelcomeActivity;public class GalleryAdapter extends BaseAdapter implements OnClickListener, AnimationListener{private Context context;    private LayoutInflater inflater = null;    // Layout of the Gallery    private int[] layouts = new int[] {            R.layout.whats_news_gallery_fornew_one,            R.layout.whats_news_gallery_fornew_two,            R.layout.whats_news_gallery_fornew_three,            R.layout.whats_news_gallery_fornew_four };    public GalleryAdapter(Context ctx) {        context = ctx;        inflater = (LayoutInflater) context                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);    }    @Override    public int getCount() {        return layouts.length;    }    @Override    public Object getItem(int position) {        return Integer.valueOf(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        if (convertView == null) {        // dynamic loading            convertView = inflater.inflate(layouts[position], null);            if (position == (layouts.length - 1)) {            // if the last page, find the button & set button on click                Button btn = (Button) convertView                        .findViewById(R.id.whats_new_start_btn);                btn.setOnClickListener(this);            }        }        return convertView;    }    @Override    public void onClick(View v) {    // 最后一个页面,button开始动画    ((WelcomeActivity)context).openDoor();    }public Animation setAnimation(int resId) {        Animation anim = AnimationUtils.loadAnimation(context, resId);        anim.setAnimationListener(this);        return anim;    }    @Override    public void onAnimationStart(Animation animation) {    }    @Override    public void onAnimationEnd(Animation animation) {        SharedPreferences sp = PreferenceManager                .getDefaultSharedPreferences(context);        Editor edit = sp.edit();        String str = context.getString(R.string.FLAG_FIRST_LOGIN);        edit.putBoolean(str, false);        edit.commit();                ((WelcomeActivity)context).gotoHome();    }    @Override    public void onAnimationRepeat(Animation animation) {    }}

PageControl代码：

package com.freesoft.whatsnew.component;import com.freesoft.whatsnew.R;import android.content.Context;import android.util.AttributeSet;import android.widget.ImageView;import android.widget.LinearLayout;public class PageControlView extends LinearLayout {private Context mContext;public PageControlView(Context ctx) {super(ctx);mContext = ctx;}public PageControlView(Context ctx, AttributeSet attrs) {super(ctx, attrs);mContext = ctx;}public void setIndication(int cnt, int index) {if (index < 0 || index > cnt)index = 0;removeAllViews();for (int i = 0; i < cnt; i++) {ImageView iv = new ImageView(mContext);iv.setImageResource(index == i ? R.drawable.page_indicator_focused: R.drawable.page_indicator_unfocused);if (i != 0 || i != cnt - 1) {iv.setPadding(8, 0, 8, 0);}addView(iv);}}}

本文参考了Android给自己的app编写用户指南这篇文章，仅仅加上了自己的一些理解和经验，也感谢原作者。

另外我简化了一下原作者的代码，省略了一些动画等锦上添花的东西，比较原始的演示了一下如何实现使用向导，下载地址：实现Splash的简化版本