CirclePageIndicator在ViewPager上

Question

在我的佈局中，我試圖讓CirclePageIndicator坐在我的圖像的底部，並讓我的圖像在屏幕頂部對齊。無論我嘗試什麼都行不通。這裏是我希望它看起來像：

什麼它結束了看起來像本

這裏是我的這段代碼。

<RelativeLayout android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight="1" 
    android:layout_gravity="top"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_marginTop="3dp"/> 

    <com.viewpagerindicator.CirclePageIndicator 
     android:id="@+id/indicator" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignBottom="@+id/pager"/> 

</RelativeLayout> 

而且因爲它是一個ViewPager我添加了滾動瀏覽每個圖像的能力。這是代碼。

public class SectionsPagerAdapter extends FragmentPagerAdapter {   
    private int[] Images = new int[] { R.drawable.homephoneicon1, R.drawable.homephoneicon2, 
      R.drawable.homephoneicon3, R.drawable.homephoneicon4, R.drawable.homephoneicon5}; 

    public SectionsPagerAdapter(FragmentManager fm) { 
     super(fm); 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return SlideshowFragment.newInstance(Images[position]); 
    } 

    @Override 
    public int getCount() { 
     return NUM_SLIDES; 
    } 
} 

這裏是幻燈片代碼

public class SlideshowFragment extends Fragment { 
int imageResourceId; 

public static SlideshowFragment newInstance(int i) { 
    SlideshowFragment fragment = new SlideshowFragment(); 
    fragment.imageResourceId = i; 

    return fragment; 
} 

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

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { 
    ImageView image = new ImageView(getActivity()); 
    image.setImageResource(imageResourceId); 

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT); 

    LinearLayout layout = new LinearLayout(getActivity()); 
    layout.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)); 
    layout.setGravity(Gravity.TOP); 
    layout.addView(image, params); 

    return layout; 
} 
} 

感謝您的幫助！

Answer 1

這裏是我是如何做到的

代碼

public static SlideshowFragment newInstance(int i) { 
    SlideshowFragment fragment = new SlideshowFragment(); 
    fragment.imageResourceId = i; 

    return fragment; 
} 

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

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { 
    ImageView image = new ImageView(getActivity()); 
    image.setImageResource(imageResourceId); 
    image.setScaleType(ImageView.ScaleType.FIT_XY); 

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); 

    RelativeLayout layout = new RelativeLayout(getActivity()); 
    layout.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)); 

    layout.addView(image, params); 

    return layout; 
} 

佈局

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_weight="1.5"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

    <com.viewpagerindicator.CirclePageIndicator 
     android:id="@+id/indicator" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:padding="5dp" 
     android:layout_alignParentBottom="true"/> 

</RelativeLayout> 

Answer 2

後來者，但似乎一個更好的解決辦法

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/height"/> 

    <com.viewpagerindicator.CirclePageIndicator 
     android:id="@+id/indicator" 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:padding="5dp" 
     android:layout_alignBottom="@+id/pager"/> 

Answer 3

activity_main.xml中： -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context=".MainActivity"> 

<RelativeLayout 
    android:layout_width="fill_parent" 
    android:background="#ffffff" 
    android:layout_height="300dp"> 

    <android.support.v4.view.ViewPager 

     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="300dp"></android.support.v4.view.ViewPager> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_marginBottom="10dp" 
     android:background="@android:color/transparent" 
     android:gravity="center_horizontal" 
     android:textSize="50sp" /> 

</RelativeLayout> 

view_pager_item.xml： -

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

<TextView 
    android:id="@+id/pagerItem" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:textAlignment="center" /> 

</RelativeLayout> 

ViewPagerAdapter.java:-

public class ViewPagerAdapter extends PagerAdapter { 
Context con; 
String[] data; 

public ViewPagerAdapter(Context con, String[] data) { 
    this.data = data; 
    this.con = con; 
} 

@Override 
public int getCount() { 
    return data.length; 
} 

@Override 
public boolean isViewFromObject(View view, Object o) { 
    return view == o; 
} 

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
    LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
    View view = inflater.inflate(R.layout.view_pager_item, container, false); 
    try { 

     TextView textView = (TextView) view.findViewById(R.id.pagerItem); 
     textView.setText(data[position]); 
     ((ViewPager) container).addView(view); 
    } catch (Exception ex) { 
     ex.printStackTrace(); 
    } 
    return view; 
} 

@Override 
public void destroyItem(ViewGroup container, int position, Object object) { 
    ((ViewPager) container).removeView((RelativeLayout) object); 
} 
} 

MainActivity.java:-

public class MainActivity extends Activity { 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    try { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     String[] data = new String[]{ 
       "page 1", 
       "page 2", 
       "page 3", 
       "page 4" 
     }; 
     final ViewPagerAdapter adapter = new ViewPagerAdapter(this, data); 
     final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager); 
     viewPager.setOffscreenPageLimit(2); 
     viewPager.setAdapter(adapter); 

     final TextView textView = (TextView) findViewById(R.id.textView); 

     viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
      @Override 
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
       textView.setText(""); 
       for (int i = 0; i < adapter.getCount(); i++) { 
        Spannable word = new SpannableString(" " + "."); 
        if (i == position) { 
         word.setSpan(new ForegroundColorSpan(Color.RED), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
        } else { 
         word.setSpan(new ForegroundColorSpan(Color.BLUE), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
        } 
        textView.append(word); 
       } 
      } 

      @Override 
      public void onPageSelected(int position) { 

      } 

      @Override 
      public void onPageScrollStateChanged(int state) { 

      } 
     }); 
    } catch (Exception ex) { 
     ex.printStackTrace(); 
    } 

} 


@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
    // Inflate the menu; this adds items to the action bar if it is present. 
    getMenuInflater().inflate(R.menu.menu_main, menu); 
    return true; 
} 

@Override 
public boolean onOptionsItemSelected(MenuItem item) { 
    // Handle action bar item clicks here. The action bar will 
    // automatically handle clicks on the Home/Up button, so long 
    // as you specify a parent activity in AndroidManifest.xml. 
    int id = item.getItemId(); 

    //noinspection SimplifiableIfStatement 
    if (id == R.id.action_settings) { 
     return true; 
    } 

    return super.onOptionsItemSelected(item); 
} 
} 

Answer 4

簡單的方式進口pagerlibrary並使用此代碼到.xml文件。

<RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal" 
      android:layout_above="@+id/twoImage" 
      android:id="@+id/slideLay" 
      > 
      <android.support.v4.view.ViewPager 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:id="@+id/offer_pager" 
       /> 
      <com.viewpagerindicator.CirclePageIndicator 
       android:id="@+id/page_indicatorr" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:background="@null" 
       app:fillColor="#000000" 
       android:layout_alignParentBottom="true" 
       android:layout_alignParentLeft="true" 
       android:layout_alignParentStart="true" 
       android:layout_marginBottom="10dp" 
       android:padding="5dip" 
       > 
      </com.viewpagerindicator.CirclePageIndicator> 

     </RelativeLayout>