本例子一种介绍了四种启动方式来
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
时间: 2024-10-22 18:09:57