GridViewPager的頁面位置

Question

我想添加小頁面位置指示器（屏幕底部的小圓圈），就像在Android Wear上用於GridViewPager的通知一樣。

這樣做的最好方法是什麼？對我來說一個小問題是我在垂直方向上使用了我的GridViewPager，但我認爲這可能會被計算出來。

我是否必須完全手動完成此操作，或者是否有任何可以幫助您的控件？

編輯： 添加圖片，我需要清晰。

Answer 1

可穿戴的新版本帶有此功能。

所有你所要做的就是更新您的的build.gradle依賴於：

compile "com.google.android.support:wearable:1.1.+" 

並執行以下操作：

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

<android.support.wearable.view.GridViewPager 
    android:id="@+id/pager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:keepScreenOn="true" /> 

<android.support.wearable.view.DotsPageIndicator 
    android:id="@+id/page_indicator" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal|bottom" /> 

</FrameLayout> 

，並在您的活動聲明它是這樣的：

DotsPageIndicator dotsIndicator = (DotsPageIndicator)findViewById(R.id.page_indicator); 

dotsIndicator.setPager(mViewPager); 

Answer 2

爲了有效地使用GridViewPager，你將需要實現一個GridPagerAdapter（你可能已經完成）。在適配器中，在您的instantiateItem中，根據行或列編號進行一些更改，具體取決於您的佈局。它可能是這樣的：

@Override 
    protected Object instantiateItem(ViewGroup viewGroup, int row, int col) { 
     Log.d("test", "instantiateItem: row=" + row + " col=" + col); 
     View v; 

     // row == 0 for col scroll 
     if(col == 0){ 
      v = View.inflate(mContext, R.layout.your_view, null); 
      TextView textView = (TextView) v.findViewById(R.id.your_text_view); 
      // Change the textView text based on the row or column number 
     } else { 
      v = View.inflate(mContext, R.layout.your_other_view, null); 
     } 
     viewGroup.addView(v); 
     return v; 
    } 

注：如果你想整個頁面佈局是一樣的，但每個以顯示正確的頁碼，你可以做到這一點。只需膨脹相同的佈局，但將其各自的textView更改爲適當的文本。

編輯（迴應圖片和澄清）也許你可以有一個小白點的可繪製資源。在你的意見，你的說了LinearLayout或ListView，並根據你在列點數添加陣列，您縮放適當的點，使用類似

// Read your drawable from somewhere 
Drawable dr = getResources().getDrawable(R.drawable.somedrawable); 
Bitmap bitmap = ((BitmapDrawable) dr).getBitmap(); 
// Scale it to 50 x 50 
Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, 50, 50, true)); 
// Set your new, scaled drawable "d" 

Answer 3

這是我如何解決它。它可能不是最好的方法，但它的工作原理。如果有人有更好的解決方案，請編輯這篇文章或發表一篇新文章。

首先，我創建了一個可繪製的圓形對象。

<?xml version="1.0" encoding="utf-8"?> 

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#eeffffff" /> 
    <corners android:bottomRightRadius="200dip" 
     android:bottomLeftRadius="200dip" 
     android:topRightRadius="200dip" 
     android:topLeftRadius="200dip"/> 
</shape> 

然後在我的佈局中，我創建了以下結構，在我的情況下我需要垂直點。但是也可以創建一個水平版本。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="horizontal"> 
    <RelativeLayout 
     android:layout_alignParentRight="true" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:orientation="vertical"> 
     <LinearLayout 
      android:layout_width="15dp" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:id="@+id/dotlayout" 
      android:orientation="vertical"> 
     </LinearLayout> 
    </RelativeLayout> 
    <android.support.wearable.view.GridViewPager 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:id="@+id/pager"> 
    </android.support.wearable.view.GridViewPager> 
</RelativeLayout> 

我試着儘可能地使點與Google版本相似。因爲點之間的距離是一個或兩個像素，所以我覺得它非常接近但並不完美。我使用的按鈕的時刻，但它可以是任何觀點，你可以做一輪也許圖片效果會更好：

我加點我dotlayout

for(int i = 0; i < numberOfDots; i++){ 
    Button b = new Button(this); 
    configDot(b, 4, 2); 
    dotLayout.addView(b); 
} 

記住要啓動按鈕大：

configDot((Button) dotLayout.getChildAt(0), 6, 1); 

而且配置方法：

private void configDot(Button b, int size, int margin){ 
    b.setBackground(getResources().getDrawable(R.drawable.roundbutton)); 
    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(getPxFromDp(size), getPxFromDp(size)); 
    p.gravity = Gravity.CENTER_HORIZONTAL; 
    p.setMargins(0, margin, 0, margin); 
    b.setLayoutParams(p); 
} 
private int getPxFromDp(int dp){ 
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics()); 
} 

在我的尋呼機上，我添加了一個onPageChangeListener我在哪裏重新配置所有視圖以具有正確的大小。

pager.setOnPageChangeListener(new GridViewPager.OnPageChangeListener() { 
     @Override 
     public void onPageScrolled(int i, int i2, float v, float v2, int i3, int i4) {} 

     @Override 
     public void onPageSelected(int i, int i2) { 
      for(int j = 0; j < dotLayout.getChildCount(); j++){ 
       configDot((Button) dotLayout.getChildAt(j), 4, 2); 
      } 
      if(dotLayout.getChildCount() > i) { 
       configDot((Button) dotLayout.getChildAt(i), 6, 1); 
      } 
     } 

     @Override 
      public void onPageScrollStateChanged(int i) {} 
}); 

這是什麼樣子：

Answer 4

你有正確的理念。

檢出sdk/samples/android-20/wearable/JumpingJack項目。

這裏是他們的標識佈局：

<LinearLayout 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true" 
    android:layout_marginBottom="10dp" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <ImageView 
     android:id="@+id/indicator_0" 
     android:layout_marginRight="5dp" 
     android:src="@drawable/full_10" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
    <ImageView 
     android:id="@+id/indicator_1" 
     android:src="@drawable/empty_10" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 
</LinearLayout> 

那麼活動：

mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 

    @Override 
    public void onPageSelected(int i) { 
     setIndicator(i); 
    } 
    ... 
} 

private void setIndicator(int i) { 
    switch (i) { 
     case 0: 
      mFirstIndicator.setImageResource(R.drawable.full_10); 
      mSecondIndicator.setImageResource(R.drawable.empty_10); 
      break; 
     case 1: 
      mFirstIndicator.setImageResource(R.drawable.empty_10); 
      mSecondIndicator.setImageResource(R.drawable.full_10); 
      break; 
    } 
}