在Android应用程序介绍页面实现 (一)中实现了介绍页面的滑动显示,但是在大多数介绍页面正下方会通过圆点标签来表示当前页面是第几个页面,每当页面滑动时,圆点标签也会随之切换。
界面布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".ViewFlipperActivity" > <android.support.v4.view.ViewPager android:id="@+id/picture" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <LinearLayout android:id="@+id/point" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:layout_centerHorizontal="true" /> <ImageButton android:id="@+id/btnStart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/point" android:layout_marginBottom="20dp" android:layout_centerHorizontal="true" android:background="@drawable/flipper_button_start" android:visibility="gone"/> <ImageButton android:id="@+id/btnShare" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/btnStart" android:layout_marginBottom="30dp" android:layout_centerHorizontal="true" android:background="@drawable/flipper_button_share" android:visibility="gone"/></RelativeLayout>每个滑动页面都可以有自己的布局,这里的每个滑动页面就使用imageview来显示图片:
<?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" > <ImageView android:id="@+id/image1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitXY" android:src="@drawable/guide_1"/></LinearLayout>通过加载这里滑动页面的布局文件,并将这些视图添加到ViewPager中,通过ViewPager来实现页面滑动切换效果:
public class ShowActivity extends Activity{ private static final String TAG = "MainActivity"; private ViewPager mViewPager; private ArrayList<View> mPagers; private ImageView[] mImageViews; private LayoutInflater mInflater; private ViewGroup mPointGroup; private ViewGroup mMainGroup; private ImageButton mStartButton; private ImageButton mShareButton; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); mInflater = getLayoutInflater(); Util.Logi(ShowActivity.this, "onCreate", ""); /** * 设置窗口显示属性 */ requestWindowFeature(Window.FEATURE_NO_TITLE); /** * 加载布局文件,查找控件 */ mMainGroup = (ViewGroup)mInflater.inflate(R.layout.activity_main, null); mViewPager = (ViewPager)mMainGroup.findViewById(R.id.picture); mPointGroup = (ViewGroup)mMainGroup.findViewById(R.id.point); mStartButton =(ImageButton)mMainGroup.findViewById(R.id.btnStart); mStartButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub startActivity(new Intent(ShowActivity.this, LoginActivity.class)); } }); mShareButton =(ImageButton)mMainGroup.findViewById(R.id.btnShare); /** * 加载每个滑动页面的布局文件 */ mPagers = new ArrayList<View>(); mPagers.add(mInflater.inflate(R.layout.guide1, null)); mPagers.add(mInflater.inflate(R.layout.guide2, null)); mPagers.add(mInflater.inflate(R.layout.guide3, null)); mPagers.add(mInflater.inflate(R.layout.guide4, null)); /** * 创建滑动显示小圆点 */ mImageViews = new ImageView[mPagers.size()]; for (int i = 0; i < mImageViews.length; i++) { ImageView imageView = new ImageView(this); imageView.setLayoutParams(new LayoutParams(20,20)); imageView.setPadding(20, 0, 20, 0); mImageViews[i] = imageView; if (i == 0) { mImageViews[i].setBackgroundResource(R.drawable.green_point); }else { mImageViews[i].setBackgroundResource(R.drawable.gray_point); } mPointGroup.addView(mImageViews[i]); } /** * 设置页面滑动适配器及页面滑动监听器 */ mViewPager.setAdapter(new FlipperAdapter()); mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub Util.Logi(ShowActivity.this, "onPageSelected", arg0); //切换圆点标签,就是将指定的ImageView的图片换成高亮显示图片 for (int i = 0; i < mImageViews.length; i++) { mImageViews[i].setBackgroundResource(R.drawable.green_point); if (arg0 != i) { mImageViews[i].setBackgroundResource(R.drawable.gray_point); } } if (arg0 == mImageViews.length -1) { mStartButton.setVisibility(View.VISIBLE); mShareButton.setVisibility(View.VISIBLE); }else { mStartButton.setVisibility(View.GONE); mShareButton.setVisibility(View.GONE); } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); setContentView(mMainGroup); } /** * 返回按键处理 */ @Override public void onBackPressed() { // TODO Auto-generated method stub //通过返回键向前翻页 int index = mViewPager.getCurrentItem(); if ( index-- > 0) { mViewPager.setCurrentItem(index); }else {//如果翻到第一页,则弹出退出对话框 Util.Logi(ShowActivity.this, "onBackPressed", "退出应用"); View view = mInflater.inflate(R.layout.quit_dialog, null); new AlertDialog.Builder(ShowActivity.this) .setTitle("确定退出微博") .setIcon(R.drawable.ic_help) .setPositiveButton("确定", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub finish(); } }) .setNegativeButton("取消", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO Auto-generated method stub dialog.dismiss(); } }) .setView(view) .show(); } } /** * 按键处理 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub return super.onKeyDown(keyCode, event); } class FlipperAdapter extends PagerAdapter{ @Override public int getCount() { // TODO Auto-generated method stub return mPagers.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public int getItemPosition(Object object) { // TODO Auto-generated method stub return super.getItemPosition(object); } @Override public void destroyItem(View container, int position, Object object) { // TODO Auto-generated method stub ((ViewPager) container).removeView(mPagers.get(position)); } @Override public Object instantiateItem(View container, int position) { // TODO Auto-generated method stub Log.i(TAG, "FlipperAdapter"); ((ViewPager)container).addView(mPagers.get(position)); return mPagers.get(position); } }}