Android中ViewPager中动态生成…

在Android  APP设计中，经常会用到引导菜单，关于引导页面的设计，大家都很熟悉会用ViewPager。看下下面这个例子，今天要说的就是最下面的小圆点。一般的设计思路是：在ViewPager下直接写上小圆点的布局就ok啊。且看下面代码：

<?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
    </android.support.v4.view.ViewPager>
    
    <!-- set the layout bottom  little circle -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            >
            <ImageView android:id="@+id/imview0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:src="@drawable/page_now"/>
             <ImageView android:id="@+id/imview1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:layout_marginLeft="10dp"
                android:src="@drawable/page"/>
             <ImageView android:id="@+id/imview2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:layout_marginLeft="10dp"
                android:src="@drawable/page"/>
             <ImageView android:id="@+id/imview3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:layout_marginLeft="10dp"
                android:src="@drawable/page"/>
             <ImageView android:id="@+id/imview4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:layout_marginLeft="10dp"
                android:src="@drawable/page"/>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

 

        但是这样设计有一个缺陷，就是当我们的引导页数目变化时不好操作，需要每次都去更改下xml文件里的圆点数目，这样无疑不利于后期开发。所以我们可以考虑采用动态生成下面的圆点的方法来解决这个问题，这样当上面的引导页数目变化时，不需要去修改xml文件。
     

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.page);  
           for (int i =0; i < mArrayList.size(); i++) {  
             Button bt = new Button(this);  
             bt.setLayoutParams(new ViewGroup.LayoutParams(bitmap.getWidth(),bitmap.getHeight()));  
             bt.setBackgroundResource(R.drawable.page);  
             bt.setRight(10);
             mLinearLayout.addView(bt);  
           }  

这里的mViewList就是指上边的引导页，

ArrayList<View> mArrayList = new ArrayList<View>();

完整实现代码：

public class Welcome extends Activity{
	
	private ViewPager pager;
	
	ArrayList<View> mArrayList = new ArrayList<View>();
	LayoutInflater mInflater;
	LinearLayout mLinearLayout;
	
	Button mSeletedButton;
	
	 @Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
	       pager = (ViewPager) findViewById(R.id.welcome);
		
		mInflater = getLayoutInflater();
		
		View view1 = mInflater.inflate(R.layout.wel1, null);
		View view2 = mInflater.inflate(R.layout.wel2, null);
		View view3 = mInflater.inflate(R.layout.wel3, null);
		View view4 = mInflater.inflate(R.layout.wel5, null);
		
		mArrayList.add(view1);
		mArrayList.add(view2);
		mArrayList.add(view3);
		mArrayList.add(view4);
		
		
		
		mLinearLayout = (LinearLayout) findViewById(R.id.ll_num);
		
		PagerAdapter mPagerAdapter = new PagerAdapter() {
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return mArrayList.size();
			}

			@Override
			public void destroyItem(View container, int position, Object object) {
				// TODO Auto-generated method stub
				((ViewPager)container).removeView(mArrayList.get(position));
			}

			@Override
			public Object instantiateItem(View container, int position) {
				// TODO Auto-generated method stub
				((ViewPager)container).addView(mArrayList.get(position));
				return mArrayList.get(position);
			}
		};
		
		pager.setAdapter(mPagerAdapter);
		
		Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.page);  
	           for (int i =0; i < mArrayList.size(); i++) {  
	           Button bt = new Button(this);  
	           bt.setLayoutParams(new ViewGroup.LayoutParams(bitmap.getWidth(),bitmap.getHeight()));  
	           bt.setBackgroundResource(R.drawable.page);  
	           bt.setRight(10);
	           mLinearLayout.addView(bt);  
	       }  
	       
	        pager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				if (mSeletedButton != null) {
					mSeletedButton.setBackgroundResource(R.drawable.page);
				}
				
				Button currentButton = (Button) mLinearLayout.getChildAt(position);
				currentButton.setBackgroundResource(R.drawable.page_now);
				mSeletedButton = currentButton;
				
				Log.i("lyc", "current item:"+position);
			}
			
			
			
			@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
				
			}
		});
		
	}
}