新浪微博客户端开发之引导界面的实现

在我这个项目中没有用到引导页面，但是后面我学习到了它，所以也做下笔记，这个完全可以自行加入到这个模块。这个引导页面是我在做音乐播放器时加入的。。放上面可以参考下。

当我们使用一个软件时，一般第一次进入的时候就是一个引导页面下面就是我实现的效果：

                             

实现步骤：

1.      实现第一次进入的操作页面。效果图如下：

 

实现思路：

当我们使用时，首先进入的是第一个Activity也就是FirstActivity

这个Activity布局就一张图片而已故此可以省略布局文件这是启动页面这个页面有3秒钟的延时操作，并且判断是进入主页面还是引导页面。那么如何判断呢。。我们这里通过SharedPreferences进入操作。如果第一次的话就修改配置文件的值，然后每次启动的时候就读取配置文件的信息。这个比较简单

代码（FirstActivity）：

package  cn.otcyan.music.activity;   import  android.app.Activity; import  android.content.Context; import android.content.Intent; import  android.content.SharedPreferences; import  android.os.Bundle; import  android.os.Handler; import  android.view.Window; import  android.view.WindowManager; import  cn.otcyan.music.tools.Constant;   /**  * 这是第一个Activity这个Activity判断是进入哪一个Activity  * true 表示已经登录  false表示还没有登录  * @author otc_yan  *  */ public class  FirstActivity extends Activity {            private boolean isLogin = false ;          @Override          protected void onCreate(Bundle  savedInstanceState) {                    super.onCreate(savedInstanceState);                    //设置全屏                    requestWindowFeature(Window.FEATURE_NO_TITLE);                    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  WindowManager.LayoutParams.FLAG_FULLSCREEN);                    setContentView(R.layout.first_login)  ;                                        isLogin = this.getCheckFlag() ;                     //延时3秒后启动发送消息                     handler.sendEmptyMessageDelayed(0, 3000) ;          }                   Handler handler = new Handler(){                                       public void  handleMessage(android.os.Message msg) {                             if(isLogin){                                      //已经使用过启动主界面                                      startActivity(new  Intent(FirstActivity.this, MainActivity.class)) ;                             }else {                                      //未使用过启动引导界面                                      startActivity(new  Intent(FirstActivity.this, GuideActivity.class)) ;                             }                             FirstActivity.this.finish()  ;  //将这个Activity从栈中删除掉                    } ;                             } ;                   /**           * 获取启动配置信息看是否是第一次登录           * @return           */          private boolean getCheckFlag() {                    SharedPreferences preferences = this.getSharedPreferences(Constant.CHECK_LOGIIN_NAME, Context.MODE_PRIVATE) ;                    boolean b =  preferences.getBoolean(Constant.CHECK_LOGIIN_VALUE, false) ;                    return b;          } }

 

2.      引导页面的实现

实现完上面的第一个启动页面后，接下来我们要做的就是实现GuideActivity.效果图如所示。图片是随便找的，自己可以去换，主要讲下加点及切换的实现。

整个布局是一个Viewpagger加一个存入图片的Linearlayout

Guide.xml布局：

<?xmlversion="1.0" encoding="utf-8"?> <RelativeLayoutxmlns: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/viewpager"          android:layout_width="match_parent"          android:layout_height="match_parent"          android:layout_gravity="center"         >      </android.support.v4.view.ViewPager>           <LinearLayout         android:id="@+id/ll"         android:layout_width="match_parent"         android:gravity="center_horizontal"         android:layout_alignParentBottom="true"         android:layout_marginBottom="25dp"         android:layout_height="wrap_content"         android:orientation="horizontal"         >              </LinearLayout>   </RelativeLayout>

每一个子界面是一个view

<?xmlversion="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent">           <ImageView         android:id="@+id/guide_view_imageview"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:padding="0dp"         android:scaleType="fitXY"/>           <Button         android:id="@+id/guide_view_startmusic"         android:layout_width="wrap_content"         android:layout_height="wrap_content"          android:layout_alignParentBottom="true"          android:layout_marginBottom="45dp"          android:layout_centerHorizontal="true"           android:visibility="gone"           android:background="@drawable/butten_highlighted"         />   </RelativeLayout>

Button是隐藏的。如果我们判断在最后一页的时候就显示出来点击进入主页面。

实现思路：

 其实它和我们平时使用的那些ListView，GridView一样，也都是使用适配器来实现的，不同的是。ViewPagger需要使用的适配器要继承PagerAdapter这个类。那我们实现里面的方法就可以显示出每一个View了。

引导适配器(GuideAdapter):

package  cn.otcyan.music.adapter;   import java.util.List;   import  android.support.v4.view.PagerAdapter; import  android.support.v4.view.ViewPager; import  android.view.View;   public class  GuideAdapter extends PagerAdapter {            private List<View> views ;          public GuideAdapter(List<View>  views){                    this.views =  views ;          }          //显示有多少个选项卡          @Override          public int getCount() {                    return views.size();          }            //？？官网是这样写的          @Override          public boolean isViewFromObject(View  arg0, Object arg1) {                    return arg0==arg1;          }          //移除一个view组件 container代表这个组件是什么  position是当前的索引          @Override          public void destroyItem(View  container, int position, Object object) {                    ((ViewPager)container).removeView(views.get(position))  ;          }          //初始化当前的这个组件 container代表这个组件是什么  position是当前的索引          @Override          public Object instantiateItem(View  container, int position) {                    //将view加入到viewpagger                    ((ViewPager)container).addView(views.get(position))  ;                    return views.get(position)  ;          }                     }

很简单吧，这样适配器就实现了。对于不懂ViewPagger的同学可以耐心看这个代码。我做之前也不懂。我是看一位同仁的博客才学会的。反正现在要的就是自学。

之后我们实现GuideActivity，在这个Activity里最难搞定的就是加点操作。我们必须实现一个监听器，刚好有一个监听器是ViewPagger改变时会触发的OnPageChangeListener。

在这个里面我们可以获取改变View的索引，通过这个索引我们不断的变换圆点的图片，是不是可以呢？当然可以。接下来实现它，代码有详尽的注释，应该看得懂。

 

引导页面（GuideActivity）：

package  cn.otcyan.music.activity;   import  java.util.ArrayList; import  java.util.List;   import  cn.otcyan.music.adapter.GuideAdapter; import  cn.otcyan.music.tools.Constant;   import  android.app.Activity; import  android.content.Context; import  android.content.Intent; import  android.content.SharedPreferences; import  android.content.SharedPreferences.Editor; import  android.content.res.Resources; import  android.graphics.Matrix; import  android.os.Bundle; import  android.os.Handler; import  android.support.v4.view.ViewPager; import  android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import  android.view.View; import  android.view.ViewGroup; import  android.view.View.OnClickListener; import  android.view.ViewGroup.LayoutParams; import  android.view.Window; import  android.view.WindowManager; import  android.widget.Button; import  android.widget.ImageView; import  android.widget.LinearLayout; import  android.widget.RelativeLayout; import  android.widget.Toast;   public class  GuideActivity extends Activity implements OnPageChangeListener ,  OnClickListener{            private ViewPager viewPager  ;          private List<View> views = new  ArrayList<View>();          Resources resources  ;          @Override          protected void onCreate(Bundle  savedInstanceState) {                    super.onCreate(savedInstanceState);                    //设置全屏                    requestWindowFeature(Window.FEATURE_NO_TITLE)  ;  //没有标题                   getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  WindowManager.LayoutParams.FLAG_FULLSCREEN) ;                    setContentView(R.layout.guide)  ;                    //初始化组件                    this.init();                    GuideAdapter adapter = new  GuideAdapter(views) ;                    viewPager.setAdapter(adapter)  ;                    //设置监听                    viewPager.setOnPageChangeListener(this)  ;          }            /**           * 布局初始化           */          private void init() {                    resources =  this.getResources() ;                    viewPager =  (ViewPager)findViewById(R.id.viewpager) ;                    //组件初始化                    this.initView();                    //组件圆点                    this.initDot(0);          }            //组件圆点 position表示的是这个位置需换成一个别的颜色的圆点          private void initDot(int position) {                    //找到布局文件                    LinearLayout ll  = (LinearLayout)this.findViewById(R.id.ll)  ;                    ll.removeAllViews() ; //移除ll中的所有组件                    //在布局文件中加入圆点                    for (int i = 0; i <  views.size(); i++) {                             ImageView iv = new  ImageView(this) ;                             if(position==i){                                      //这个位置的圆点为橙色                                      iv.setImageDrawable(resources.getDrawable(R.drawable.userhelp_pages))  ;                             }else {                                      iv.setImageDrawable(resources.getDrawable(R.drawable.userhelp_pages_focus))  ;                             }                             //将imageview加入到LinearLayout中                             ll.addView(iv) ;                    }                             }            /**           * 组件初始化           */          private void initView() {                    LayoutInflater inflater =  (LayoutInflater)this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);                    //加载4个view                                       for (int i = 0; i < 4;  i++) {                             View v = inflater.inflate(R.layout.guide_view,  null) ;                             ImageView iv =  (ImageView)v.findViewById(R.id.guide_view_imageview) ;                             iv.setImageDrawable(resources.getDrawable(R.drawable.guide_1+i))  ;                             //设置margin ??? //                         RelativeLayout.LayoutParams  lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,  RelativeLayout.LayoutParams.MATCH_PARENT) ; //                         lp.setMargins(0, 0,  20, 0) ; //                         iv.setLayoutParams(lp)  ;                             //最后一个ImageView                             if(i==3){                                      Button  startMusic = (Button)v.findViewById(R.id.guide_view_startmusic) ;                                      startMusic.setVisibility(ViewGroup.VISIBLE)  ;                                      startMusic.setOnClickListener(this)  ;                             }                                                         views.add(v) ;                    }                             }                     //这个是改变的事件          @Override          public void  onPageScrollStateChanged(int arg0) {                             }            @Override          public void onPageScrolled(int arg0,  float arg1, int arg2) {                             }            @Override          public void onPageSelected(int arg0)  {                    //Toast.makeText(this,  arg0+"-----------", 1000).show() ;                    //arg0表示的是第几页中的索引从0开始                    initDot(arg0) ;                    //到了第四页 //               if(views.size()-1==arg0){ //                         //最后一个卡片 //                         handler.sendEmptyMessage(0)  ; //               }          }            @Override          public void onClick(View v) {                    //监听的是开始微博                    //将状态标志修改                    SharedPreferences  preferences = this.getSharedPreferences(Constant.CHECK_LOGIIN_NAME,  Context.MODE_PRIVATE) ;                    Editor edit =  preferences.edit() ;                    edit.putBoolean(Constant.CHECK_LOGIIN_VALUE,  true) ;                    edit.commit() ;                    //跳转                    startActivity(new  Intent(this, MainActivity.class)) ;                    this.finish() ;          }          }

这里有一个问题：我在设置加点margin硬是不起作用，不知大家有什么好的方法没？

 

不知道为什么csdn为什么上传不了图片。

说网址为 http://write.blog.csdn.net/article/uploadimg?parenthost=write.blog.csdn.net 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。

不知道是不是今天的原因，后面再上传效力图。