使用滑動的CirclePage指示器到圖像查看

Question

我想在圖像從一個圖像更改爲另一個圖像時向圖像添加圓圈指示器。圓圈指示器必須同時更改。

Answer 1

您可以使用ViewPager和Fragment來執行此操作。活動佈局應該包含一個ViewPager裏面。和Fragment佈局只需要ImageView。

在Java代碼中的片段需要一個適配器，它應該是這樣的：

private class MyPagerAdapter extends FragmentPagerAdapter { 

     private ArrayList<String> imageList; 
     private int imagePosition; 

     public MyPagerAdapter(FragmentManager fragmentManager, ArrayList<String> imageList, int imagePosition) { 
      super(fragmentManager); 

      this.imageList = imageList; 
      this.imagePosition = imagePosition; 
     } 

     @Override 
     public Fragment getItem(int index) { 
      return new GalleryFragment(imageList.get(index)); 
     } 

     @Override 
     public int getCount() { 
      return imageList.size(); 
     } 

    } 

imageList用於保存要顯示圖片的URL。如果要顯示的圖片位於可繪製文件夾中，您可以將其替換爲ArrayList<Integer> imageList。

對於指標部分，帶有文本「●」的TextView會很好。它可能看起來有點奇怪，但它非常簡潔。您可以根據需要更改指示燈的大小和顏色。

那麼剩下的就是僅僅把Fragment到ViewPager

gallery_pager.setAdapter(new MyPagerAdapter(GalleryActivity.this.getSupportFragmentManager(), 
       curImageList, imagePosition)); 
     gallery_pager.setCurrentItem(imagePosition); 
     gallery_pager.setOnPageChangeListener(new OnPageChangeListener() { 

      @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 

      } 

      @Override 
      public void onPageSelected(int index) { 
       // TODO Auto-generated method stub 
       for (int i = 0; i < curImageList.size(); i++) { 
        PagerIndicator[i].setVisibility(View.VISIBLE); 
        PagerIndicator[i].setTextColor(0xff666666); 

        if (i == index) { 
         PagerIndicator[i].setTextColor(0xffffffff); 
        } 
       } 
      } 

     }); 

在onPageSelected可以CONTROLL點怎麼會拍攝照片時滑到像方法。

---

編輯

已經在上面添加

大部分的代碼部分，你可能需要的是碎片的代碼：

public class GalleryFragment extends Fragment{ 

    private Context context; 
    private String imageUrl; 

    public GalleryFragment(String imageUrl) 
    { 
     this.imageUrl = imageUrl; 
    } 

    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
     super.onActivityCreated(savedInstanceState); 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 

     context = GalleryFragment.this.getActivity(); 

     ImageView image = new ImageView(context); 
     LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 
     image.setLayoutParams(params); 
     image.setScaleType(ScaleType.FIT_CENTER); 

     //TODO use the imageUrl to load and display the image; 

     LinearLayout layout = new LinearLayout(context); 
     layout.setGravity(Gravity.CENTER); 
     layout.addView(image); 

     return layout; 
    } 


} 

和活動的XML應該是像這樣：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#222222" > 

    <android.support.v4.view.ViewPager 
       android:id="@+id/gallery_pager" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_centerVertical="true" /> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="30dp" 

       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:orientation="horizontal" > 

       <TextView 
        android:id="@+id/dot1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="●" 
        android:textColor="#15EDE2" 
        android:textSize="13sp" /> 

       <!--add as many dots here as you need. If the size of the imageList changes, just keep the same amount of dots VISIBLE and others GONE--> 
      </LinearLayout> 

</RelativeLayout>