码迷,mamicode.com
首页 > 移动开发 > 详细

android 安装后首次启动的欢迎页面的总结和demo

时间:2016-06-03 11:24:06      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:

本例子一种介绍了四种启动方式来

1老赶集网的启动,

效果图 :  技术分享 

实现原理 :通过handler延时一段时间 向主线程发送一条跳转界面的消息(这也是大部分启动页所用到的)

代码示例

public class SplashActivity extends Activity {

	private static final long DELAY_TIME = 2000L;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_splash);
		redirectByTime();
	}

	private void redirectByTime() {
		new Handler().postDelayed(new Runnable() {
			@Override
			public void run() {
				startActivity(new Intent(SplashActivity.this,SuccessLaunchActivity.class));
				AnimationUtil.finishActivityAnimation(SplashActivity.this);
			}
		}, DELAY_TIME);
	}
}


2使用ViewPage

 效果图: 技术分享

实现原理 :(1)ViewPager 添加4个Fragment ,滑动的圆点是图片上自带的

(2)Viewpager 动态添加小圆点,图片

代码示例:

(1)

public class ViewPagerActivity extends FragmentActivity {
	private ViewPager mVPActivity;
	private Fragment1 mFragment1;
	private Fragment2 mFragment2;
	private Fragment3 mFragment3;
	private Fragment4 mFragment4;
	private List<Fragment> mListFragment = new ArrayList<Fragment>();
	private PagerAdapter mPgAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_viewpager);
		initView();
	}

	private void initView() {
		mVPActivity = (ViewPager) findViewById(R.id.vp_activity);
		mFragment1 = new Fragment1();
		mFragment2 = new Fragment2();
		mFragment3 = new Fragment3();
		mFragment4 = new Fragment4();
		mListFragment.add(mFragment1);
		mListFragment.add(mFragment2);
		mListFragment.add(mFragment3);
		mListFragment.add(mFragment4);
		mPgAdapter = new ViewPagerAdapter(getSupportFragmentManager(),
				mListFragment);
		mVPActivity.setAdapter(mPgAdapter);
	}
}
(2)
public class ViewPageTwoActivity extends Activity {

	private Button jinru_youzhen;// 进入启动页

	private ViewPager welcome_viewPager;
	private LinearLayout llayout_dots;// 小圆点的布局
	// 定义数据源
	private List<View> listViews;
	// 自定义适配器
	private MyAdapter adapter;
	int[] imgsIcon;
	boolean misScrolled = false;

	@SuppressWarnings("deprecation")
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_viewpagetwo);

		welcome_viewPager = (ViewPager) this
				.findViewById(R.id.welcome_viewPager);
		llayout_dots = (LinearLayout) this.findViewById(R.id.llayout_dots);
		jinru_youzhen = (Button) this.findViewById(R.id.jinru_youzhen);
		jinru_youzhen.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				startActivity(new Intent(ViewPageTwoActivity.this,
						SuccessLaunchActivity.class));
				ViewPageTwoActivity.this.finish();
			}
		});
		initData();
		adapter = new MyAdapter();
		welcome_viewPager.setAdapter(adapter);

		// viewPager监听
		welcome_viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				// 动态更改选中的小圆点
				// 还原所有默认的小圆点,选中的position小圆点更换图片就可以了
				for (int i = 0; i < llayout_dots.getChildCount(); i++) {
					ImageView iv = (ImageView) llayout_dots.getChildAt(i);
					if (i == position) {// 选中状态
						iv.setImageResource(R.drawable.dark_dot);
					} else {
						iv.setImageResource(R.drawable.white_dot);
					}
				}
				if (position == listViews.size() - 1) {
					jinru_youzhen.setVisibility(View.VISIBLE);
				} else {
					jinru_youzhen.setVisibility(View.GONE);
				}
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				switch (arg0) {
				case ViewPager.SCROLL_STATE_DRAGGING:
					misScrolled = false;
					break;
				case ViewPager.SCROLL_STATE_SETTLING:
					misScrolled = true;
					break;
				case ViewPager.SCROLL_STATE_IDLE:

					if (welcome_viewPager.getCurrentItem() == welcome_viewPager
							.getAdapter().getCount() - 1 && !misScrolled) {
						startActivity(new Intent(ViewPageTwoActivity.this,
								SuccessLaunchActivity.class));
						ViewPageTwoActivity.this.finish();
					}
					misScrolled = true;
					break;

				default:
					break;
				}

			}
		});

	}

	/**
	 * 初始化数据源
	 * 
	 */
	private void initData() {
		listViews = new ArrayList<View>();
		// 实际显示图片的数据源(记录了所有图片的资源id,图片最好都放在xxhdpi下面)
		imgsIcon = new int[] { R.drawable.guide_1, R.drawable.guide_2,
				R.drawable.guide_3, R.drawable.guide_4 };

		// 动态加载视图
		for (int i = 0; i < imgsIcon.length; i++) {
			// 将实际的图片动态添加到ImageView控件中
			ImageView imageView = new ImageView(this);
			// 设置属性
			imageView.setLayoutParams(new LayoutParams(
					LayoutParams.MATCH_PARENT, // 宽度
					LayoutParams.MATCH_PARENT) // 高度
					);
			imageView.setImageResource(imgsIcon[i]);
			// 保持不形变的情况等比例拉伸图片,结果放在容器中间FIT_CENTER
			// 图片全部拉伸并且充满容器,但是可能会发生图片形变失真,FIT_XY
			imageView.setScaleType(ScaleType.FIT_XY);
			// 放入到容器当中
			listViews.add(imageView);
		}

		// 初始化底部的小圆点(实际的数量和图片的数量一样)
		for (int i = 0; i < imgsIcon.length; i++) {
			// 构建ImageView,放dot的图片
			ImageView ivDot = new ImageView(this);
			// 设置属性
			ivDot.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, // 宽度
					LayoutParams.WRAP_CONTENT) // 高度
			);
			if (i == 0) {// 默认初始化的时候,第一个小圆点是不一样的图片
				ivDot.setImageResource(R.drawable.dark_dot);
			} else {
				ivDot.setImageResource(R.drawable.white_dot);
			}
			// 保持不形变的情况等比例拉伸图片,结果放在容器中间FIT_CENTER
			// 图片全部拉伸并且充满容器,但是可能会发生图片形变失真,FIT_XY
			ivDot.setScaleType(ScaleType.FIT_CENTER);
			// 设置ivDot的paddingLeft,使每个圆点的间距隔开
			// 四个参数:left,top,right,bottom,不用的写0就可以了
			ivDot.setPadding(36, 0, 0, 0);
			// 添加到容器中
			llayout_dots.addView(ivDot);
		}

	}

	public class MyAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			return listViews.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(listViews.get(position));
			return listViews.get(position);
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// super.destroyItem(container, position, object);
			container.removeView(listViews.get(position));
		}

	}

}


3使用ViewFlipper

效果图技术分享和2有点类似 ,他可以实现循环的滚动,效果图中就没有展示了,这里大家应该能够联想到banner的轮播图了

实现原理:通过ViewFlipper控件显示所有的图片,然后通过GestureDetector设置滚动的监听

代码示例:

(1)布局

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/vf_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_1" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_2" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_3" />
<!-- 最后一个布局有按钮所以这么写了 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_4" >

        <TextView
            android:id="@+id/tvInNew"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="40dp"
            android:gravity="center"
            android:text="立即体验"
            android:background="@drawable/btn_innew"
            android:textColor="@android:color/white"
            android:textSize="22sp" />
    </RelativeLayout>

</ViewFlipper>


(2)界面代码
public class ViewFlipperActivity extends Activity implements OnGestureListener {
	@ViewInject(R.id.vf_activity)
	private ViewFlipper mVFActivity;
	private GestureDetector mGestureDetector;
	@ViewInject(R.id.tvInNew)
	private TextView tvInNew;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_viewflipper);
		ViewUtils.inject(this);
		initView();
	}

	@SuppressWarnings("deprecation")
	private void initView() {
		mGestureDetector = new GestureDetector(this);
		//界面跳转
		tvInNew.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				startActivity(new Intent(ViewFlipperActivity.this,SuccessLaunchActivity.class));
				AnimationUtil.finishActivityAnimation(ViewFlipperActivity.this);
			}
		});
	}

	@Override
	public boolean onDown(MotionEvent e) {
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		return false;
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		if (e1.getX() > e2.getX()) {
			mVFActivity.showNext();
		} else if (e1.getX() < e2.getX()) {
			mVFActivity.showPrevious();
		} else {
			return false;
		}
		return true;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		return mGestureDetector.onTouchEvent(event);
	}

}


4 ScrollView

效果图:技术分享

实现原理:重写ScrollViewde的onScrollChanged()方法,实现对移动距离的监听,从而做出一些动画效果

代码示例:

(1)重写的ScrollView
public class MyScrollView extends ScrollView {
	private OnScrollChangedListener onScrollChangedListener;

	public MyScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public MyScrollView(Context context) {
		super(context);
	}

	@Override
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		// l oldl 水平位移距离
		// t oldt 垂直滚动的距离,一个是目前的一个是上一次的
		super.onScrollChanged(l, t, oldl, oldt);
		if (this.onScrollChangedListener != null) {
			onScrollChangedListener.onScrollChanged(t, oldt);
		}
	}

	public void setOnScrollChangedListener(
			OnScrollChangedListener onScrollChangedListener) {
		this.onScrollChangedListener = onScrollChangedListener;
	}

}
(2)界面实现代码:
public class ScollerViewActivity extends Activity implements
		OnScrollChangedListener {
	@ViewInject(R.id.ll_anim)
	private LinearLayout mLLAnim;
	private MyScrollView mSVmain;
	private int mScrollViewHeight;
	private int mStartAnimateTop;
	private boolean hasStartED = false;
	@ViewInject(R.id.tvInNew)
	private TextView tvInNew;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_scrollview);
		ViewUtils.inject(this);
		initView();
		setView();
	}

	private void initView() {
		mSVmain = (MyScrollView) findViewById(R.id.sv_main);
		//界面的跳转
		tvInNew.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				startActivity(new Intent(ScollerViewActivity.this,SuccessLaunchActivity.class));
				AnimationUtil.finishActivityAnimation(ScollerViewActivity.this);
			}
		});
	}

	private void setView() {
		mSVmain.setOnScrollChangedListener(this);
		mLLAnim.setVisibility(View.INVISIBLE);
	}

	@Override
	public void onWindowFocusChanged(boolean hasFocus) {
		super.onWindowFocusChanged(hasFocus);
		mScrollViewHeight = mSVmain.getHeight();//此时获取的是屏幕的高度
		mStartAnimateTop = mScrollViewHeight /5* 4;// 为了让mLLAnim开始动画能够被人看见所以设置这个距离
	}

	@Override
	public void onScrollChanged(int top, int oldTop) {
		int animTop = mLLAnim.getTop() - top;// mLLAnim还有多少距离就显示出来了
		if (top > oldTop) {// 判断是上滑还是下滑
			if (animTop < mStartAnimateTop && !hasStartED) {// 当mLLAnim 在界面的时候
				Animation anim = AnimationUtils
						.loadAnimation(this, R.anim.show);
				mLLAnim.setVisibility(View.VISIBLE);
				mLLAnim.startAnimation(anim);
				hasStartED = true;
			}
		} else {//手指向下滑的时候
			if (animTop > mStartAnimateTop && hasStartED) {
				Animation anim = AnimationUtils.loadAnimation(this,
						R.anim.close);
				mLLAnim.setVisibility(View.INVISIBLE);
				mLLAnim.startAnimation(anim);
				hasStartED = false;
			}
		}
	}

}

5仿墨迹天气

效果图:技术分享

实现原理:各种动画的结合,对控件的显示,隐藏的设置(看着高大上,其实也是很low是不是技术分享,这么说应该不会被人打吧)

这里就不贴代码了,因为代码量真的有点大

对了,想看动画的可以看下http://blog.csdn.net/u013424496/article/details/51144171


注:在2,3中实现的方式中,图片尽量放在drawable_xxhdpi这种文件夹下面,这个应该不要说明理由了吧技术分享

最后附上demo:http://download.csdn.net/detail/u013424496/9539810

android 安装后首次启动的欢迎页面的总结和demo

标签:

原文地址:http://blog.csdn.net/u013424496/article/details/51351284

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!