zoukankan      html  css  js  c++  java
  • 指令汇B新闻客户端开发(一) 新手引导页开发


    首先做开发的时候应该有一个闪屏页面和新手引导页, 我相信闪屏页面大家应该都会了,那么先看到新手引导页了。

    我们可以看到这其实是一个ViewPager,我们也可以看到这是3个引导页,那么首先来看一下布局文件


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_guide"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="60dp"
            android:background="@drawable/btn_guide_selector"
            android:padding="5dp"
            android:text="开始体验"
            android:visibility="invisible"
            android:textColor="@drawable/btn_guide_text_selector" />
    
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp" >
    
            <LinearLayout
                android:id="@+id/ll_point_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
            </LinearLayout>
    
            <View
                android:id="@+id/view_red_point"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:background="@drawable/shape_point_red" />
        </RelativeLayout>
    
    </RelativeLayout>

    然后我们需要在清单文件中注册这个活动:

     <activity android:name=".Activity.GuideActivity" > </activity>

    接下来是主界面了:

    主界面中有3个小圆点,可以随页面的滑动而自动滑动,当然,你也可以从美工那里直接用已经画好了的图片,下面我们来看一下怎么添加3个小点:

    // 初始化引导页的小圆点
    		for (int i = 0; i < mImageIds.length; i++) {
    			View point = new View(this);
    			point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点
    
    			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
    					10, 10);
    			if (i > 0) {
    				params.leftMargin = 10;// 设置圆点间隔
    			}
    
    			point.setLayoutParams(params);// 设置圆点的大小
    
    			llPointGroup.addView(point);// 将圆点添加给线性布局
    		}
    
    		// 获取视图树, 对layout结束事件进行监听
    		llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
    				new OnGlobalLayoutListener() {
    
    					// 当layout执行结束后回调此方法
    					@Override
    					public void onGlobalLayout() {
    						System.out.println("layout 结束");
    						llPointGroup.getViewTreeObserver()
    								.removeGlobalOnLayoutListener(this);
    						mPointWidth = llPointGroup.getChildAt(1).getLeft()
    								- llPointGroup.getChildAt(0).getLeft();
    						System.out.println("圆点距离:" + mPointWidth);
    					}
    				});

    初始化界面,当然,这些都需要定义一下

    mImageViewList = new ArrayList<ImageView>();
    
    		// 初始化引导页的3个页面
    		for (int i = 0; i < mImageIds.length; i++) {
    			ImageView image = new ImageView(this);
    			image.setBackgroundResource(mImageIds[i]);// 设置引导页背景
    			mImageViewList.add(image);



    接下来是viewpager数据适配器

    class GuideAdapter extends PagerAdapter {
    
    		@Override
    		public int getCount() {
    			return mImageIds.length;
    		}
    
    		@Override
    		public boolean isViewFromObject(View arg0, Object arg1) {
    			return arg0 == arg1;
    		}
    
    		@Override
    		public Object instantiateItem(ViewGroup container, int position) {
    			container.addView(mImageViewList.get(position));
    			return mImageViewList.get(position);
    		}
    
    		@Override
    		public void destroyItem(ViewGroup container, int position, Object object) {
    			container.removeView((View) object);
    		}
    	}

    然后是 viewpager的滑动监听

    class GuidePageListener implements OnPageChangeListener {
    
    		// 滑动事件
    		@Override
    		public void onPageScrolled(int position, float positionOffset,
    				int positionOffsetPixels) {
    			// System.out.println("当前位置:" + position + ";百分比:" + positionOffset
    			// + ";移动距离:" + positionOffsetPixels);
    			int len = (int) (mPointWidth * positionOffset) + position
    					* mPointWidth;
    			RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint
    					.getLayoutParams();// 获取当前红点的布局参数
    			params.leftMargin = len;// 设置左边距
    
    			viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数
    		}
    

    当某个页面被选中的时候,例如第一页:


    // 某个页面被选中
    		@Override
    		public void onPageSelected(int position) {
    			if (position == mImageIds.length - 1) {// 最后一个页面
    				btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮
    			} else {
    				btnStart.setVisibility(View.INVISIBLE);
    			}
    		}
    
    		// 滑动状态发生变化
    		@Override
    		public void onPageScrollStateChanged(int state) {
    
    		}


    在闪屏页里面判断是否只出现一次,因为我们这个新手引导页在用户安装的时候只出现一次就可以了,显示完成之后点击“开始体验”直接跳转到主页面:

    那么我们如何判断用户只显示一次呢?

    **
    * 跳转下一个页面
    */
    private void jumpNextPage() {
    // 判断之前有没有显示过新手引导
    boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed",
    false);


    if (!userGuide) {
    // 跳转到新手引导页
    startActivity(new Intent(SplashActivity.this, GuideActivity.class));
    } else {
    startActivity(new Intent(SplashActivity.this, MainActivity.class));
    }


    finish();
    }


    然后再新手页中添加以下代码:如果“is_user_guide_showed"是true,则表示已经展示了新手引导页,那么我们下次就可以不用再展示了,下次进入的时候直接跳转主页面。

    btnStart.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				// 更新sp, 表示已经展示了新手引导
    				PrefUtils.setBoolean(GuideActivity.this,
    						"is_user_guide_showed", true);
    
    				// 跳转主页面
    				startActivity(new Intent(GuideActivity.this, MainActivity.class));
    				finish();
    			}
    		});
    
    		initViews();
    		vpGuide.setAdapter(new GuideAdapter());
    
    		vpGuide.setOnPageChangeListener(new GuidePageListener());




    导入相关的包,这个项目就可以成功运行了。



  • 相关阅读:
    再看到一则有关Anders的……
    arp好烦!123.8w8w8w,自己建了一个内网的nod32升级服务器。
    在看discuz nt 1.0。
    顺便说一下,这边速度好快?
    没什么可说。
    昨天看王建硕的blog,在说《胡适日记》的事。
    c# 深复制 浅复制(转)
    foreach yield
    Array
    JQuery.fn.extend(object) jQuery.extend(object) 转
  • 原文地址:https://www.cnblogs.com/xiaowangba/p/6314918.html
Copyright © 2011-2022 走看看