标签：
今天周六，在家好好码代码。。。。。
今天实现的是界面优化的一个简单功能：加圆点的引导页的实现
虽然简单，不过步骤我们还是一步一步来吧
第一步：实现几个View之间的左右滑动，我这次用了四个View（ViewPager）
以下是我的Guide 的布局页面：
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 6 <android.support.v4.view.ViewPager 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" 9 android:id="@+id/viewpager"> 10 11 </android.support.v4.view.ViewPager> 12 13 </RelativeLayout>
然后就是实现Guide里面的代码：
1 package com.oysd.myviewpager; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.app.Activity; 7 import android.content.Intent; 8 import android.os.Bundle; 9 import android.support.v4.view.ViewPager; 10 import android.support.v4.view.ViewPager.OnPageChangeListener; 11 import android.view.LayoutInflater; 12 import android.view.View; 13 import android.view.View.OnClickListener; 14 import android.widget.Button; 15 import android.widget.ImageView; 16 17 public class Guide extends Activity implements OnPageChangeListener { 18 19 private ViewPager vp; 20 private ViewPagerAdapter vpAdapter; 21 private List<View> views; 22 23 @Override 24 protected void onCreate(Bundle savedInstanceState) { 25 // TODO Auto-generated method stub 26 super.onCreate(savedInstanceState); 27 setContentView(R.layout.activity_guide); 28 initView(); 29 } 30 31 /** 32 * 初始化View 33 */ 34 private void initView(){ 35 LayoutInflater inflater = LayoutInflater.from(this); 36 views = new ArrayList<View>(); 37 // 添加四个View 38 views.add(inflater.inflate(R.layout.one, null)); 39 views.add(inflater.inflate(R.layout.two, null)); 40 views.add(inflater.inflate(R.layout.three, null)); 41 views.add(inflater.inflate(R.layout.four, null)); 42 43 vpAdapter = new ViewPagerAdapter(views, this); 44 vp = (ViewPager) findViewById(R.id.viewpager); 45 vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定 46 } 47 }
以上需要自己手动再次创四个布局文件one.xml two.xml three.xml four.xml
我这里就给出前面三个的其中一个吧，其他三个只是src的图片不一样而已:
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <ImageView 8 android:layout_width="fill_parent" 9 android:layout_height="fill_parent" 10 android:background="@drawable/one"/> 11 12 </LinearLayout>
以下是第四个four.xml的布局文件，多了一个进入 的按钮：
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 6 <ImageView 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" 9 android:background="@drawable/four"/> 10 11 <LinearLayout 12 android:layout_width="fill_parent" 13 android:layout_height="wrap_content" 14 android:gravity="center_horizontal" 15 android:layout_alignParentBottom="true" 16 android:orientation="horizontal"> 17 18 <Button 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:id="@+id/btnStart" 22 android:text="进入"/> 23 24 </LinearLayout> 25 26 </RelativeLayout>
这里面需要自己实现ViewPagerAdapter,以下是实现代码：
1 package com.oysd.myviewpager; 2 3 import java.util.List; 4 5 import android.content.Context; 6 import android.support.v4.view.PagerAdapter; 7 import android.support.v4.view.ViewPager; 8 import android.view.View; 9 10 public class ViewPagerAdapter extends PagerAdapter { 11 12 private List<View> views; 13 private Context context; 14 15 public ViewPagerAdapter(List<View> views , Context context) { 16 this.views = views; 17 this.context = context; 18 } 19 20 @Override 21 public void destroyItem(View container, int position, Object object) { 22 ((ViewPager)container).removeView(views.get(position)); 23 } 24 25 @Override 26 public Object instantiateItem(View container, int position) { 27 // TODO Auto-generated method stub 28 ((ViewPager) container).addView(views.get(position)); 29 30 return views.get(position); 31 } 32 33 @Override 34 public int getCount() { 35 // TODO Auto-generated method stub 36 return views.size(); 37 } 38 39 @Override 40 public boolean isViewFromObject(View arg0, Object arg1) { 41 // TODO Auto-generated method stub 42 return arg0 == arg1; 43 } 44 45 }
这个Adapter的实现不外乎就是实现这个方法：getCount、isViewFromObject、destroyItem、instantiateItem
和View中的Adapter其实差不多:
getCount()：返回的是数据源对象的个数，即列表项数
Object getItem(int position)：返回指定位置position上的列表
long getItemId(int position)：返回指定位置处的行ＩＤ
View getView()：返回列表项对应的视图
好了，废话先不多说了，第一步的视图之间的滑动基本上完成了
第二步：添加圆点，来标识一下当前view以及view的总过数量，以及在最后一个View上面添加一个进入主页面的按钮
在Guide的原先布局下进行改动，改动之后的布局文件是（完整的）：
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 6 <android.support.v4.view.ViewPager 7 android:layout_width="fill_parent" 8 android:layout_height="fill_parent" 9 android:id="@+id/viewpager"> 10 11 </android.support.v4.view.ViewPager> 12 13 <LinearLayout 14 android:layout_width="fill_parent" 15 android:layout_height="wrap_content" 16 android:id="@+id/ll" 17 android:orientation="horizontal" 18 android:gravity="center_horizontal" 19 android:layout_alignParentBottom="true"> 20 21 <ImageView 22 android:layout_width="wrap_content" 23 android:layout_height="wrap_content" 24 android:id="@+id/iv1" 25 android:src="@drawable/white_dot"/> 26 <ImageView 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:id="@+id/iv2" 30 android:src="@drawable/dark_dot"/> 31 <ImageView 32 android:layout_width="wrap_content" 33 android:layout_height="wrap_content" 34 android:id="@+id/iv3" 35 android:src="@drawable/dark_dot"/> 36 <ImageView 37 android:layout_width="wrap_content" 38 android:layout_height="wrap_content" 39 android:id="@+id/iv4" 40 android:src="@drawable/dark_dot"/> 41 </LinearLayout> 42 43 </RelativeLayout>
然后Guide的改动，改动之后的代码如下：
1 package com.oysd.myviewpager; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.app.Activity; 7 import android.content.Intent; 8 import android.os.Bundle; 9 import android.support.v4.view.ViewPager; 10 import android.support.v4.view.ViewPager.OnPageChangeListener; 11 import android.view.LayoutInflater; 12 import android.view.View; 13 import android.view.View.OnClickListener; 14 import android.widget.Button; 15 import android.widget.ImageView; 16 17 public class Guide extends Activity implements OnPageChangeListener { 18 19 private ViewPager vp; 20 private ViewPagerAdapter vpAdapter; 21 private List<View> views; 22 private Button btnStart; 23 private ImageView dots[]; 24 private int ids[] = {R.id.iv1, 25 R.id.iv2, 26 R.id.iv3, 27 R.id.iv4}; 28 29 30 @Override 31 protected void onCreate(Bundle savedInstanceState) { 32 // TODO Auto-generated method stub 33 super.onCreate(savedInstanceState); 34 setContentView(R.layout.activity_guide); 35 initView(); 36 initDots(); 37 } 38 39 /** 40 * 初始化View 41 */ 42 private void initView(){ 43 LayoutInflater inflater = LayoutInflater.from(this); 44 views = new ArrayList<View>(); 45 views.add(inflater.inflate(R.layout.one, null)); 46 views.add(inflater.inflate(R.layout.two, null)); 47 views.add(inflater.inflate(R.layout.three, null)); 48 views.add(inflater.inflate(R.layout.four, null)); 49 50 vpAdapter = new ViewPagerAdapter(views, this); 51 btnStart = (Button) views.get(3).findViewById(R.id.btnStart); 52 btnStart.setOnClickListener(new OnClickListener() { 53 54 @Override 55 public void onClick(View v) { 56 // TODO Auto-generated method stub 57 Intent intent = new Intent(Guide.this , MainActivity.class); 58 startActivity(intent); 59 finish(); 60 } 61 }); 62 63 vp = (ViewPager) findViewById(R.id.viewpager); 64 vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定 65 vp.setOnPageChangeListener(this);//添加回调 66 } 67 68 /** 69 * 初始化小圆点控件 70 */ 71 private void initDots(){ 72 73 dots = new ImageView[views.size()]; 74 for(int i = 0 ; i < ids.length ; i++){ 75 dots[i] = (ImageView) findViewById(ids[i]); 76 } 77 78 } 79 80 /** 81 * 当滑动状态被改变的时候调用 82 */ 83 @Override 84 public void onPageScrollStateChanged(int arg0) { 85 // TODO Auto-generated method stub 86 87 } 88 89 /** 90 * 当页面滑动的时候调用 91 */ 92 @Override 93 public void onPageScrolled(int arg0, float arg1, int arg2) { 94 // TODO Auto-generated method stub 95 96 } 97 98 /** 99 * 当页面被选择的时候调用 100 */ 101 @Override 102 public void onPageSelected(int arg0) { 103 // TODO Auto-generated method stub 104 for(int i = 0 ; i < ids.length ; i++){ 105 //当此页面被选择的时候，将小圆点设置成亮点（white_dot） 106 //其他小圆点设置成黑点 107 if(arg0 == i){ 108 dots[i].setImageResource(R.drawable.white_dot); 109 }else{ 110 dots[i].setImageResource(R.drawable.dark_dot); 111 } 112 } 113 } 114 }
到这里，圆点以及进入按钮的添加也基本上完成了。
第三步：实现判断用户是否是第一次进入手机应用，如果是第一次跳转到引导页面，如果不是，直接跳转到主页面
额外添加一个Welcome 的Activity,以下是布局文件（仅仅是用一个ImageView来显示以下图片）：
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <ImageView 8 android:layout_width="fill_parent" 9 android:layout_height="fill_parent" 10 android:src="@drawable/welcome"/> 11 </LinearLayout>
然后就是实现Welcom里面的代码了：
1 package com.oysd.myviewpager; 2 3 import android.app.Activity; 4 import android.content.Intent; 5 import android.content.SharedPreferences; 6 import android.content.SharedPreferences.Editor; 7 import android.os.Bundle; 8 import android.os.Handler; 9 10 public class Welcome extends Activity { 11 12 private static final int TIME = 2000;//设置跳转的延迟时间 13 private static final int GO_HOME = 1000;//设置跳转到主页面的识别代码 14 private static final int GO_GUIDE = 1001;//设置跳转到引导页面的识别代码 15 private boolean isFirstIn = false;//判断用户是否是第一次进入 16 17 private Handler mHandler = new Handler(){ 18 19 public void handleMessage(android.os.Message msg) { 20 21 switch(msg.what){ 22 case GO_HOME: 23 goHome(); 24 break; 25 case GO_GUIDE: 26 goGuide(); 27 break; 28 } 29 }; 30 }; 31 32 @Override 33 protected void onCreate(Bundle savedInstanceState) { 34 // TODO Auto-generated method stub 35 super.onCreate(savedInstanceState); 36 setContentView(R.layout.activity_welcome); 37 init(); 38 } 39 40 private void init(){ 41 42 SharedPreferences preferences = getSharedPreferences("oy", MODE_PRIVATE); 43 isFirstIn = preferences.getBoolean("flag", true); 44 if(!isFirstIn){ 45 mHandler.sendEmptyMessageDelayed(GO_HOME, TIME); 46 }else{ 47 mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME); 48 Editor editor = preferences.edit();//给予修改的权限 49 editor.putBoolean("flag", false);//修改isFirstIn的值 50 editor.commit();//修改完之后进行提交 51 52 } 53 } 54 /** 55 * 执行跳转到主页面 56 */ 57 private void goHome(){ 58 Intent intent = new Intent(Welcome.this , MainActivity.class); 59 startActivity(intent); 60 finish(); 61 } 62 63 /** 64 * 执行跳转到引导页面 65 */ 66 private void goGuide(){ 67 Intent intent = new Intent(Welcome.this , Guide.class); 68 startActivity(intent); 69 finish(); 70 } 71 72 }
到这里，这个小功能也成功完成了。
以下附上AndroidMainifest.xml文件：
1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="com.oysd.myviewpager" 4 android:versionCode="1" 5 android:versionName="1.0" > 6 7 <uses-sdk 8 android:minSdkVersion="14" 9 android:targetSdkVersion="14" /> 10 11 <application 12 android:allowBackup="true" 13 android:icon="@drawable/ic_launcher" 14 android:label="@string/app_name" 15 android:theme="@style/AppTheme" > 16 <activity 17 android:name=".MainActivity" 18 android:label="@string/app_name" > 19 20 </activity> 21 <activity 22 android:name="com.oysd.myviewpager.Guide" 23 android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> 24 25 </activity> 26 <activity 27 android:name="com.oysd.myviewpager.Welcome" 28 android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> 29 <intent-filter> 30 <action android:name="android.intent.action.MAIN" /> 31 32 <category android:name="android.intent.category.LAUNCHER" /> 33 </intent-filter> 34 </activity> 35 </application> 36 37 </manifest>
简单也要坚持。。。。。
标签：
原文地址：http://www.cnblogs.com/ouyangduoduo/p/4620929.html
