有些第三方应用(如QQ,微信等),安装后第一次使用都有个用户引导,提示用户怎么用及版本升级后新功能介绍。用 Hierarchy Viewer 工具看用户引导 是用哪些layout组成的。常见的QQ,微信 用的 Gallery,百度输入法用的是 FrameLayout。
下面就以 Gallery 实现用户引导为例。
先来图吧,有图有真相!
这个熟悉吧,仿微信当前最新版的欢迎页。安装后第一次启动这个用户引导,本例用读写SharedPrefences判断是否第一次进(代码片段):
boolean firstLogin = PreferenceManager.getDefaultSharedPreferences(this).getBoolean(FLAG_FIRST_LOGIN, true);
if (firstLogin) {
startActivity(new Intent("com.xyz.guider.GuiderActivity"));
}
完成用户引导后把键值 first 写 false:
SharedPreferences sp = PreferenceManager
.getDefaultSharedPreferences(mContext);
Editor edit = sp.edit();
edit.putBoolean(FLAG_FIRST_LOGIN, false);
edit.commit();
下面来贴关键代码。
用户引导布局:
<?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.xyz.guider.XyzGallery
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.xyz.guider.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>
首先继承个Gallery的类如XyzGallery:
package com.xyz.guider;
import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.widget.Gallery;
public class XyzGallery extends Gallery {
public XyzGallery(Context context) {
super(context);
// TODO Auto-generated constructor stub
setStaticTransformationsEnabled(true);
}
public XyzGallery(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
setStaticTransformationsEnabled(true);
}
public XyzGallery(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
setStaticTransformationsEnabled(true);
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// TODO Auto-generated method stub
if (velocityX > 0) {
onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, null);
} else {
onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
}
return true;
}
}
有了Gallery,还要个Gallery的适配器,作为GuiderActivity的内部类,GuiderActivity主要作用是呈现并控制 用户引导 界面:
package com.xyz.guider;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
public class GuiderActivity extends Activity implements OnItemSelectedListener {
private View mViewDoor = null;
private ImageView mImageLeft = null;
private ImageView mImageRight = null;
private XyzGallery mGallery = null;
private GalleryAdapter mAdapter = null;
private PageControlView mIndicateView = null;
private static final String FLAG_FIRST_LOGIN = "first";
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.whats_news);
mGallery = (XyzGallery) findViewById(R.id.what_news_gallery);
mAdapter = new GalleryAdapter(this);
mGallery.setFadingEdgeLength(0);
mGallery.setSpacing(-1);
mGallery.setAdapter(mAdapter);
mGallery.setOnItemSelectedListener(this);
mIndicateView = (PageControlView) findViewById(R.id.what_news_page_control);
mIndicateView.setIndication(mGallery.getCount(), 0);
mViewDoor = findViewById(R.id.mm_door);
mImageLeft = (ImageView) findViewById(R.id.mm_left);
mImageRight = (ImageView) findViewById(R.id.mm_right);
}
private class GalleryAdapter extends BaseAdapter implements
OnClickListener, AnimationListener {
private Context mContext;
private LayoutInflater mInfater = null;
private int[] mLayouts = 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) {
mContext = ctx;
mInfater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mLayouts.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return Integer.valueOf(position);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
if (convertView == null) {
convertView = mInfater.inflate(mLayouts[position], null);
if (position == 3) {
Button btn = (Button) convertView
.findViewById(R.id.whats_new_start_btn);
btn.setOnClickListener(this);
}
}
return convertView;
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
mViewDoor.setVisibility(View.VISIBLE);
mImageLeft.startAnimation(setAnimation(R.anim.slide_left));
mImageRight.startAnimation(setAnimation(R.anim.slide_right));
}
private Animation setAnimation(int resId) {
Animation anim = AnimationUtils.loadAnimation(mContext, resId);
anim.setAnimationListener(this);
return anim;
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
mImageLeft.setVisibility(View.GONE);
mImageRight.setVisibility(View.GONE);
SharedPreferences sp = PreferenceManager
.getDefaultSharedPreferences(mContext);
Editor edit = sp.edit();
edit.putBoolean(FLAG_FIRST_LOGIN, false);
edit.commit();
GuiderActivity.this.finish();
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
}
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
if (mIndicateView != null) {
mIndicateView.setIndication(parent.getCount(), position);
}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
// TODO Auto-generated method stub
}
}
还有个就是 用户引导 的指示器,共有几页,当前是那一页,实现起来很简单:
package com.xyz.guider;
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);
// TODO Auto-generated constructor stub
mContext = ctx;
}
public PageControlView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
// TODO Auto-generated constructor stub
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(4, 0, 4, 0);
}
addView(iv);
}
}
}
剩下的就是些xml文件,就不贴啦。
免分下载原码路径:http://download.csdn.net/detail/zhouyuanjing/4866714
~~完~~