创建2D选择器(2D Picker)

以下内容翻译自android wear的官方教程,本人水平有限,如有错误欢迎指出
home
以下正文


在android wear中的2D Picker模式允许用户在一系列pages中浏览和选择。Wearable UI Library使你非常容易地实现这个模式。
为了实现这个模式,你需要添加 GridViewPager
元素到你的activity的layout上并实现一个提供数页信息的 FragmentGridPagerAdapter

添加一个网格纸(Page Grid)

在你的layout当中添加以下元素


你可以使用 定义android wear layouts中描述的技术来确保该控件在圆和方的表面上都显示良好。

实现Adapter

一个page adpater为 GridViewPager
提供了一系列页面。你需要继承 FragmentGridPagerAdapter
来实现你的adapter.
下面的代码展示了如何提供一系列带有自定义图片背景的静态页面。

public class SampleGridPagerAdapter extends FragmentGridPagerAdapter {  
  private final Context mContext;   
  private List mRows;   
  public SampleGridPagerAdapter(Context ctx, FragmentManager fm) {   
    super(fm);      
    mContext = ctx;    
  }   
 static final int[] BG_IMAGES = new int[] {  
    R.drawable.debug_background_1, ...  
    R.drawable.debug_background_5    
  };    
  // 一个用于每个页面的简单静态数据容器   
 private static class Page {      
 // static resources       
   int titleRes;        
   int textRes;       
   int iconRes;        
   ...   
 }    
 // 创建一个静态的二维pages表 
 private final Page[][] PAGES = { ... };    
 
 // 要重写(Override)的方法   
 ...
}

这个adapter将会调用 [getFragment()
](http://developer.android.youdaxue.com/reference/android/support/wearable/view/FragmentGridPagerAdapter.html#getFragment(int, int))和 getBackgroundForRow()
方法来检索(retrieve)每一行所要展示的内容

// 获取在特定位置的Fragment
@Override
public Fragment getFragment(int row, int col) {    
  Page page = PAGES[row][col];    
  String title = 
      page.titleRes != 0 ? mContext.getString(page.titleRes) : null; 
  String text =  
      page.textRes != 0 ? mContext.getString(page.textRes) : null; 
  CardFragment fragment = CardFragment.create(title, text, page.iconRes); 
   // 建议设置(card gravity, card expansion/scrolling)    
   fragment.setCardGravity(page.cardGravity); 
   fragment.setExpansionEnabled(page.expansionEnabled); 
   fragment.setExpansionDirection(page.expansionDirection);  
   fragment.setExpansionFactor(page.expansionFactor);
   return fragment;
}
// 获取每一行的背景图片
@Override
public Drawable getBackgroundForRow(int row) {   
   return mContext.getResources().getDrawable(
            (BG_IMAGES[row % BG_IMAGES.length]), null);
}

下面的例子展示了怎么检索(retrieve)特定页面的背景

// 为特定的page获取背景图片
@Override
public Drawable getBackgroundForPage(int row, int column) {  
  if( row == 2 && column == 1) {        
    // 返回特定的位置所要显示的背景图片        
    return mContext.getResources().getDrawable(R.drawable.bugdroid_large, null);   
  } else {   
     // 默认每一行所设定的背景图片 
     eturn GridPagerAdapter.BACKGROUND_NONE;   
 }
}

getRowCount()
告诉adapter有多少行内容, getColumnCount()
返回每一行由多少个内容。

// 获取页面的行数
@Override
public int getRowCount() {    
  return PAGES.length;
}
// 获取页面组对应行的Pages的个数
@Override
public int getColumnCount(int rowNum) {  
  return PAGES[rowNum].length;
}

apapter实现的细节依赖于你想要设计什么样的页面组。每个页面都是Fragment的子类。在这个例子当中,每个页面是 CardFragment
的实例。你也可以在一个2D Picker中指定不同类型的Pages,比如cards,action icon,或自定义。

创建2D选择器(2D Picker)_第1张图片
*GridViewPager*

并不是所有行都有相同数量的pages。你可以发现在本例中,每一行都有不同数量的pages,你也可以创建只有一行或一列的1D Picker.

GridViewPager
对于内容超出边界的页面提供了可以滚动内容的支持。在本例中,我们设置了当需要时自动拓展卡片,所以用户可以滚动卡片的内容。如果用户滚动到了底部,一个手柄(swipe)将会出现在同一方向来导航下一页的内容(如果下一页有的话)。

你可以用 [getBackgroundForPage()
](http://developer.android.youdaxue.com/reference/android/support/wearable/view/GridPagerAdapter.html#getBackgroundForPage(int, int)) 方法来指定每一个page的背景图片。在用户切换Page的时候,不同的背景图片就会自动出现平移和交叉淡化的效果。

给page grid分配一个adapter

在你的activity中,创建一个adapter的实例然后分配给GridViewPager

public class MainActivity extends Activity {    
@Override    
protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState);      
  setContentView(R.layout.activity_main);       
  ...        
  final GridViewPager pager = (GridViewPager) findViewById(R.id.pager); 
  pager.setAdapter(new SampleGridPagerAdapter(this, getFragmentManager()));  
  }
}

你可能感兴趣的:(创建2D选择器(2D Picker))