Vị trí trang cho GridViewPager

Question

Tôi muốn thêm các chỉ báo vị trí trang nhỏ (các vòng tròn nhỏ ở cuối màn hình) giống như các chỉ báo được sử dụng cho thông báo trong Android Wear cho GridViewPager.

Cách tốt nhất để làm điều này là gì? Một vấn đề nhỏ đối với tôi là tôi sử dụng GridViewPager theo hướng thẳng đứng nhưng tôi nghĩ rằng có thể được tìm ra.

Tôi có phải thực hiện việc này hoàn toàn theo cách thủ công hoặc có bất kỳ điều khiển nào có thể trợ giúp không?

Chỉnh sửa: Đã thêm hình ảnh về những gì tôi cần để làm rõ.

Answer 1

Phiên bản mới của Wearable đi kèm với tính năng này.

Tất cả bạn phải làm là cập nhật phụ thuộc vào build.gradle tới:

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

và thực hiện như sau:

<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> 

và trong hoạt động của bạn khai báo nó như thế này:

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

dotsIndicator.setPager(mViewPager); 

Answer 2

Để sử dụng GridViewPager hiệu quả, bạn sẽ cần phải thực hiện một GridPagerAdapter (mà bạn có thể đã thực hiện). Trong bộ điều hợp, trong số instantiateItem, hãy thực hiện một số thay đổi dựa trên số hàng hoặc cột, tùy thuộc vào bố cục của bạn. Có thể như sau:

@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; 
    } 

lưu ý: nếu bạn muốn bố cục trên các trang giống nhau, nhưng mỗi trang hiển thị số trang chính xác, bạn cũng có thể làm như vậy. Chỉ cần thổi phồng cùng một bố cục, nhưng thay đổi textView tương ứng của chúng thành văn bản thích hợp.

Chỉnh sửa (trả lời ảnh và làm rõ) Có lẽ bạn có thể có một tài nguyên có thể vẽ được của một chấm nhỏ màu trắng. Trong quan điểm của bạn, bạn thêm một mảng nói chấm với một LinearLayout hoặc ListView và dựa trên các cột bạn đang ở, bạn mở rộng dấu chấm thích hợp, sử dụng cái gì đó như

// 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

Đây là cách tôi giải quyết nó. Nó có thể không phải là cách tốt nhất nhưng nó hoạt động. Nếu có ai có giải pháp tốt hơn, vui lòng chỉnh sửa bài đăng này hoặc tạo bài đăng mới.

Trước tiên, tôi có thể vẽ được đối tượng tròn.

<?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> 

Sau đó, trong bố cục của tôi, tôi cần phải có các dấu chấm theo chiều dọc. Nhưng cũng có thể tạo phiên bản theo chiều ngang.

<?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> 

Tôi đã cố gắng tạo các dấu chấm tương tự nhất có thể với phiên bản Google. Và tôi nhận được nó khá gần nhưng không hoàn hảo vì khoảng cách giữa các chấm là một hoặc hai điểm ảnh. Tôi đã sử dụng các nút vào lúc này nhưng nó có thể là bất kỳ quan điểm cho rằng bạn có thể làm tròn có lẽ hình ảnh sẽ tốt hơn:

tôi đã thêm các dấu chấm để tôi dotlayout

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

Hãy nhớ để làm cho các nút khởi động lớn:

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

Và phương pháp Config:

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()); 
} 

Trên máy nhắn tin của tôi, tôi đã thêm onPageChangeListener Nơi tôi định cấu hình lại tất cả các chế độ xem để có kích thước chính xác.

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) {} 
}); 

Đây là những gì nó trông giống như:

Answer 4

Bạn đã có ý tưởng đúng đắn.

Khám phá dự án sdk/samples/android-20/wearable/JumpingJack.

Dưới đây là cách bố trí của họ đối với các chỉ số:

<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> 

Sau đó, trong Hoạt động:

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; 
    } 
}