我们在首次安装app时,往往会发现会有导航页。
导航页一般用于介绍功能和引导使用,那我们其实可以用ViewPager实现。
ViewPager用于实现多页面的滑动切换效果,使用时需要引入“android.support.v4”包。
好了,我们现在开始就来做一个简单的导航页引导。
首先我们新建一个Android Application Project,我们把自动生成的MainActivity作为应用程序的主界面:
其布局文件我们简单设置下:
activity_main.xml:
<span style="font-size:14px;"><RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
android:paddingBottom= "@dimen/activity_vertical_margin"
android:paddingLeft= "@dimen/activity_horizontal_margin"
android:paddingRight= "@dimen/activity_horizontal_margin"
android:paddingTop= "@dimen/activity_vertical_margin"
tools:context="com.example.guidepage.MainActivity" >
<TextView
android:layout_width= "wrap_content"
android:layout_height ="wrap_content"
android:text ="主界面"
android:textSize ="22dp"
android:layout_centerInParent ="true"
/>
</RelativeLayout>
</span>
我们在Layout下新建一个guide.xml作为导航页的布局:
guide.xml:
<span style="font-size:14px;"><?xml version= "1.0" encoding ="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
android:orientation= "vertical" >
<FrameLayout
android:layout_width= "match_parent"
android:layout_height="match_parent"
android:background= "#ff1874CD"
>
<android.support.v4.view.ViewPager
android:id= "@+id/guide_viewpager"
android:layout_width= "match_parent"
android:layout_height="match_parent"
/>
<!-- 假设导航页有5页 -->
<!-- 下面这里是设置五个导航点指示 -->
<LinearLayout
android:layout_width= "wrap_content"
android:layout_height="wrap_content"
android:orientation= "horizontal"
android:layout_gravity="center|bottom"
android:gravity= "center"
>
<ImageView
android:id= "@+id/dot_01"
android:layout_width= "0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src= "@drawable/dot_img_selected"
android:layout_margin="2dp"
/>
<ImageView
android:id= "@+id/dot_02"
android:layout_width= "0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src= "@drawable/dot_img"
android:layout_margin="2dp"
/>
<ImageView
android:id= "@+id/dot_03"
android:layout_width= "0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src= "@drawable/dot_img"
android:layout_margin="2dp"
/>
<ImageView
android:id= "@+id/dot_04"
android:layout_width= "0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src= "@drawable/dot_img"
android:layout_margin="2dp"
/>
<ImageView
android:id= "@+id/dot_05"
android:layout_width= "0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:src= "@drawable/dot_img"
android:layout_margin="2dp"
/>
</LinearLayout >
</FrameLayout >
</LinearLayout>
</span>
注意:ViewPager组件用的时候一定要写成<android.support.v4.view.ViewPager/>,这个组件中放置的是切换的页面,我们这里还要使用FrameLayout布局,以便于把导航点放置在上面,“导航点”图片dot_img和dot_img_selected分别如下图所示,这个可以自己随便制作一下:
好了,到了这里导航页的布局算是写完了,很简单吧~ O(∩_∩)O
既然需要页面切换,所以我们还需要有五个页面进行介绍。
所以我们再新建五个布局,用于承载五个导航介绍页面,新建scene1.xml:
<span style="font-size:14px;"><?xml version= "1.0" encoding ="utf-8"?>
<LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
android:orientation= "vertical"
android:gravity="center"
>
<TextView
android:layout_width= "wrap_content"
android:layout_height ="0dp"
android:gravity= "center"
android:text ="一款手机操作系统"
android:textColor= "#ffffffff"
android:textSize= "22sp"
android:layout_weight ="1.0"
/>
<LinearLayout
android:layout_width= "match_parent"
android:layout_height ="0dp"
android:layout_weight ="5.0"
android:gravity= "center"
>
<ImageView
android:layout_width= "wrap_content"
android:layout_height ="wrap_content"
android:background= "@drawable/android_logo"
/>
</LinearLayout >
</LinearLayout>
</span>
android_logo是一张图片。
这里我们简单起见,一个scenne只放一张图和一行文字,依照这样的方法,分别又新建了scene2、scene3、scene4。
scene5我们可以加个按钮,点击可以进入应用程序的主界面。scene5.xml:
<span style="font-size:14px;"><? xml version= "1.0" encoding = "utf-8"?>
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:layout_width= "match_parent"
android:layout_height= "match_parent"
android:orientation= "vertical"
android:gravity= "center"
>
<TextView
android:layout_width= "wrap_content"
android:layout_height ="0dp"
android:gravity= "center"
android:text ="欢迎您的使用"
android:textSize= "22sp"
android:layout_weight ="1.0"
android:textColor= "#ffffffff"
/>
<LinearLayout
android:layout_width= "match_parent"
android:layout_height ="0dp"
android:layout_weight ="5.0"
android:gravity= "center"
>
<ImageView
android:layout_width= "wrap_content"
android:layout_height ="wrap_content"
android:background= "@drawable/android_cicle"
/>
</LinearLayout >
<LinearLayout
android:layout_width= "wrap_content"
android:layout_height ="0dp"
android:layout_weight ="1.0"
android:gravity= "center_horizontal"
>
<Button
android:id= "@+id/enter_button"
android:background= "@drawable/enter_button_bg"
android:layout_width= "160dp"
android:layout_height ="wrap_content"
android:text ="马上体验"
android:textColor= "#ffffffff"
android:layout_marginBottom ="40dp"
/>
</LinearLayout >
</ LinearLayout>
</span>
上面代码中的Button,我们可以看到background属性设置为“android:background="@drawable/enter_button_bg",enter_button_bg.xml是自定义的一个drawable资源文件,主要是控制Button的形状,这里我将它设置为白色边框圆角背景透明:
enter_button_bg.xml:
<? xml version= "1.0" encoding = "utf-8"?>
< shape xmlns:android ="http://schemas.android.com/apk/res/android" >
<stroke
android:width= "1.0dp"
android:color= "#ffffffff"
/>
<corners
android:radius= "1.0dp"
/>
<solid
android:color= "#00000000"
/>
</ shape>
下面我们正式开始Activity部分了:
新建
GuidePageActivity,
等等,在这之前,我们先写一个适配器,ViewPager和ListView一样,同样也需要适配器,这个适配器应该继承PagerAdapter。
所以我们先新建一个ViewPagerAdapter.java:
public class ViewPagerAdapter extends PagerAdapter{
List<View> views; //用于放置导航页
private Context context;
public ViewPagerAdapter(List<View> views, Context context) {
super();
this. views = views;
this. context = context;
}
// 获取需要滑动的控件数量
public int getCount() {
// TODO Auto-generated method stub
return views.size();
}
// 判断是否是同一个元素
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
// 超出了缓存数量,销毁
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager)container).removeView( views.get(position));
}
// 初始化显示加载图片
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView( views.get(position));
return views.get(position);
}
}
写完了适配器之后,我们就新建GuidePageActivity:
public class GuidePageActivity extends Activity implements OnPageChangeListener{
private ViewPager viewPager;
private List<View> views; //放置需要切换的页面
private ViewPagerAdapter vpAdater; //适配器
private int[] layoutIds; //切换页面的布局id
private int[] dotsIds; //导航点的id
private ImageView[] dots; //导航点集合
private Button enterButton;
protected void onCreate (Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window. FEATURE_NO_TITLE); //隐藏标题
setContentView(R.layout. guide);
getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN,
WindowManager.LayoutParams. FLAG_FULLSCREEN); //设置全屏
initViews(); //初始化组件
}
void initViews(){
LayoutInflater inflater = LayoutInflater. from(this);
layoutIds = new int[]{R.layout. scene1, R.layout.scene2, R.layout.scene3 ,
R.layout. scene4, R.layout. scene5};
dotsIds = new int[]{R.id. dot_01, R.id. dot_02, R.id.dot_03,
R.id. dot_04, R.id. dot_05};
// 初始化views集合
views = new ArrayList<View>();
for( int i=0; i< layoutIds. length; i++){
views.add(inflater.inflate( layoutIds[i], null));
}
// 初始化dots
dots = new ImageView[ dotsIds. length];
for( int i=0; i< dotsIds. length; i++){
dots[i] = (ImageView)findViewById( dotsIds[i]);
}
viewPager = (ViewPager)findViewById(R.id.guide_viewpager );
vpAdater = new ViewPagerAdapter( views, this);
viewPager.setAdapter( vpAdater); //为viewPager设置适配器
//同时需要监听ViewPager滑动的情况,根据滑动的状态设置导航点
viewPager.setOnPageChangeListener( this);
enterButton = (Button)( views.get( views.size() - 1)).findViewById(R.id.enter_button );
enterButton.setOnClickListener(
new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent(GuidePageActivity.this , MainActivity.class);
startActivity(intent);
finish();
}
}
);
}
@Override
public void onPageScrollStateChanged( int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled( int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
//根据选定的页面状态设置导航点
public void onPageSelected( int arg0) {
//选定arg0位置的页面
for( int i=0; i< views.size(); i++){
if(i == arg0){
dots[i].setImageResource(R.drawable. dot_img_selected);
}
else{
dots[i].setImageResource(R.drawable. dot_img);
}
}
}
}
注意:requestWindowFeature必须放在setContentView前面,否则会报错:
android.util.AndroidRuntimeException: requestFeature() must be called before adding content.
最后别忘了设置AndroidManifest.xml,把GuidePageActivity设为主活动,原先的MainActivity也需要注册一下。
应该来说,看着注释是不难看懂的。
最后得到的效果:
对了,如果你想要实现只有第一次安装时才导航的效果,其实也很简单,只要设置一个标志isFirst,利用SharedPreference进行存储,每次启动时判断下就行了,这里不再赘述。