从零开始学Android （3）

横向滑动的图片浏览器页面

横向滑动的图片浏览界面在现在的触屏手机上应该也算是普遍，但是如何在Android上实现，着实耗费了我3天的时间。不过功夫不负有心人，在疯狂的抄袭和修改了各种高人在网上留下的代码片段之后，终于可以看到下面这个画面了

在做这个画面之前，跑到google上面，很努力地搜索了很多例子，最终选定一个画面看起来很像的用ViewPager做的例子（真的对不起作者，我把那个link搞没了，不过代码片段还在），于是开始copy-paste

 

粘来的代码

原始的画面布局xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <include layout="@layout/activity_page_header"/>
        
        <android.support.v4.view.ViewPager
            android:id="@+id/guidePages"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
    
    <LinearLayout 
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <RelativeLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            
            <LinearLayout
                android:id="@+id/viewGroup"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="40dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal">
                
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>  

 

SubPage的布局XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#0000" >    
     
		<ImageView 
		    android:id="@+id/mainpage_promotion_1_image"
		    android:layout_width="fill_parent"
		    android:layout_height="fill_parent" android:src="@drawable/p_1"/>
    
    
</LinearLayout>

 

原始的java代码

public class ViewPagerGuide extends Activity {
	
	private ViewPager viewPager;	
	private ArrayList<View> pageViews;	// 装分页显示的view的数组
	private ImageView imageView;
	private ImageView[] imageViews; // 将小圆点的图片用数组表示
	private ViewGroup viewPics;     // 包裹滑动图片的LinearLayout
	private ViewGroup viewPoints;   
	
	/** 
	 * @Summary Called when the activity is first created
	 */
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);  //设置无标题栏
		
		//将要分页显示的View装入数组中
		LayoutInflater inflater = getLayoutInflater();
		pageViews = new ArrayList<View>();
		pageViews.add(inflater.inflate(R.layout.activity_sub_page,null));
		pageViews.add(inflater.inflate(R.layout.activity_sub_page2,null));
		pageViews.add(inflater.inflate(R.layout.activity_sub_page3,null));
		
		//创建imageviews数组，大小是要显示的图片的数量
		imageViews=new ImageView[pageViews.size()];
		
		//从指定的XML文件加载视图
		viewPics=(ViewGroup)inflater.inflate(R.layout.activity_view_pager_guide,null);
		
		//实例化小圆点的linearLayout和viewpager
		viewPoints=(ViewGroup)viewPics.findViewById(R.id.viewGroup);
		viewPager=(ViewPager)viewPics.findViewById(R.id.guidePages);
		
		for(int i = 0; i < pageViews.size(); i++)
		{
			imageView = new ImageView(ViewPagerGuide.this);
			
			//设置小圆点imageview的参数
			imageView.setLayoutParams(new LayoutParams(20,20));//创建一个宽高均为20的布局
			imageView.setPadding(20, 0, 20, 0);
			
			//将小圆点layout添加到数组中
			imageViews[i]=imageView;
			
			//默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是
			if(0==i)
			{
				imageViews[i].setBackgroundResource(R.drawable.page_indicator_fouced);
			}
			else
			{
				imageViews[i].setBackgroundResource(R.drawable.page_indicator);
			}
		}
		
		//显示滑动图片的视图
		setContentView(viewPics);
		
		//设置viewpage的适配器和监听事件
		viewPager.setAdapter(new GuidePageAdapter());
		viewPager.setOnPageChangeListener(new GuidePageChangeListener());
	}


	
	class GuidePageAdapter extends PagerAdapter
	{
		//销毁position位置的界面
		@Override
		public void destroyItem(View v, int position, Object arg2)
		{
			//TODO Auto-generated method stub
			((ViewPager)v).removeView(pageViews.get(position));
		}
		
		@Override
		public void finishUpdate(View arg0)
		{
			//TODO Auto-generated method stub
		}
		
		//获取当前窗体界面数
		@Override
		public int getCount()
		{
			//TODO Auto-generated method stub
			return pageViews.size();
		}
		
		//初始化position位置的界面
		@Override
		public Object instantiateItem(View v, int position)
		{
			//TODO Auto-generated method stub
			((ViewPager)v).addView(pageViews.get(position));
			return pageViews.get(position);
		}
		
		//判断是否由对象生成界面
		@Override
		public boolean isViewFromObject(View v, Object arg1)
		{
			//TODO Auto-generated method stub
			return v ==arg1;
		}
		
		@Override
		public void startUpdate(View arg0)
		{
			//TODO Auto-generated method stub
		}
		
		@Override
		public int getItemPosition(Object object)
		{
			//TODO Auto-generate method stub
			return super.getItemPosition(object);
		}
		
		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1)
		{
			//TODO Auto-generated method stub
		}
		
		@Override
		public Parcelable saveState()
		{
			//TODO Auto-generated method stub
			return null;
		}
	}

	class GuidePageChangeListener implements OnPageChangeListener
	{
		@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
			
		}

		@Override
		public void onPageSelected(int position) {
			// TODO Auto-generated method stub
			for(int i = 0; i < imageViews.length; i++)
			{
				imageViews[position].setBackgroundResource(R.drawable.page_indicator_fouced);
				// 不是当前选中的page，其小圆点设置为未选中的状态
				if(position != i)
				{
					imageViews[i].setBackgroundResource(R.drawable.page_indicator);
				}
			}
		}
	}
}

调试

相信此代码一出，所有跟我一样的连基本控件和画面布局都不懂的新手们直接就晕过去了，我也是。程序一运行，毫无悬念的崩溃，跟所有在网上copy过来的代码一样，无法直接运行。于是痛苦的debug过程开始了。最后发现是设置无标题栏导致画面崩溃，于是果断删除。调通！

requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);  //设置无标题栏