当前位置: 代码迷 >> Android >> Android应用程序引见页面实现 (二)
  详细解决方案

Android应用程序引见页面实现 (二)

热度:4   发布时间:2016-04-28 08:16:01.0
Android应用程序介绍页面实现 (二)

在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);  		}		}}

  相关解决方案