Question

我想添加小页面位置指示器（屏幕底部的小圆圈），就像用于GridViewPager的Android Wear上的通知一样。

最好的方法是什么？对我来说一个小问题是我在垂直方向上使用我的GridViewPager，但我认为可以想出来。

我是否必须完全手动执行此操作，或者是否有任何有用的控件？

修改为清晰起见添加了我需要的图像。

Image of small circles

Answer 1

新版Wearable附带此功能。

您所要做的就是将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

这就是我解决它的方式。它可能不是最好的方式，但它的工作原理。如果有人有更好的解决方案，请编辑此帖或发新帖。

首先，我有一个可绘制的圆形物体。

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

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

在我的寻呼机上我添加了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) {}
 });

这就是它的样子：

enter image description here

Answer 3

你有正确的想法。

查看sdk/samples/android-20/wearable/JumpingJack项目。

enter image description here

以下是指标的布局：

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

Answer 4

为了有效地使用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"

GridViewPager的页面位置

4 个答案: