`

android UI进阶之弹窗的使用

 
阅读更多

最近有很多事情要忙,一直没有更新博客,今天得空来写一写。话说春天什么时候来,还是冷兮兮的。

 今天还是来讲下Tab的实现。android自带的Tab在有比较多条目的时候会显得非常挤,这样不仅不美观,更加影响操作。如果Tab能做成左右滑动的,那就非常好了。其实实现这种效果并不难,而且方法也不少。今天给大家介绍下用gallery这个组件来实现的方法。

 首先我们需要写Gallery的适配器。这里我们要注意的是Gallery有一个特点,就是起始一个元素的左边会留下一块空位,如下图所示:

  这样我们的Tab显然不是很完美,如何解决?开始想的就是去看gallery的源码,重写他。不过既然我们做的是滑动的,让他左右都可滑动不就ok了?要实现左右滑动,要做的事情就是让里面的元素循环。Gallery是即时显示图像的,可以通过两点来做到:

  1.让getCount()方法返回一个非常大的值。

  2.在getView()中显示的时候通过循环取余来实现一直显示数组中的有限值。

  而且Gallery还提供了一个setSelection()方法,用来设置当前选择的条目,我们将显示的位置放在比较靠后的位置,这样就不会在左滑的时候滑到头,那样就可以以假乱真了。

  下面来看下适配器代码:

  1. publicclassTabAdapterextendsBaseAdapter{
  2. privateContextmContext;
  3. privateList<String>mList;
  4. privateintmSelectedTab;
  5. publicTabAdapter(Contextcontext,List<String>list){
  6. mContext=context;
  7. /*使用attrs里的<declare-styleable>属性*/
  8. TypedArraya=obtainStyledAttributes(R.styleable.Gallery);
  9. a.recycle();//重复使用对象的styleable属性
  10. if(list==null)
  11. list=Collections.emptyList();
  12. mList=list;
  13. }
  14. /*
  15. *设置选中的Tab,并且刷新界面
  16. */
  17. publicvoidsetSelectedTab(inttab){
  18. if(tab!=mSelectedTab){
  19. mSelectedTab=tab;
  20. notifyDataSetChanged();
  21. }
  22. }
  23. publicintgetSelectedTab(){
  24. returnmSelectedTab;
  25. }
  26. publicintgetCount(){
  27. returnInteger.MAX_VALUE;//返回最大值
  28. }
  29. publicObjectgetItem(intposition){
  30. returnmList.get(position);
  31. }
  32. publiclonggetItemId(intposition){
  33. returnposition;
  34. }
  35. publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
  36. TextViewtext=null;//这里只放一个TextView,可以根据需要来定制
  37. if(convertView==null){
  38. text=newTextView(mContext);
  39. }else{
  40. text=(TextView)convertView;
  41. }
  42. text.setTextColor(Color.WHITE);
  43. text.setText(mList.get(position%mList.size()));//循环取余设置显示内容
  44. text.setLayoutParams(newGallery.LayoutParams(102,40));
  45. text.setGravity(Gravity.CENTER);
  46. /*
  47. *对于选中的Tab,给他一个选中的背景
  48. */
  49. if(position==mSelectedTab)
  50. text.setBackgroundResource(R.drawable.tab_button_select);
  51. else
  52. text.setBackgroundResource(R.drawable.tab_button_unselect);
  53. returntext;
  54. }
  55. }

注释已经写的很清楚了,应该没什么问题。

这里程序中使用了

  1. TypedArraya=obtainStyledAttributes(R.styleable.Gallery);
  2. a.recycle();//重复使用对象的styleable属性

这是一个引用自制layout 元素的用法,必须在res/values 下面添加一个attrs.xml,并在其中定义 <declare-styleable> 标签TAG,目的是自定义layout 的背景风格,并且通过TypeArray 的特性,让相同的Layout 元素可以重复用于每一张图片,大家可以看下apiDemos里gallery1s的用法,这里也是参考它的用法。看下attrs.xml的代码:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <resources>
  3. <declare-styleablename="Gallery">
  4. <attrname="android:galleryItemBackground"/>
  5. </declare-styleable>
  6. </resources>

还要说一点的是,对于选中和未选中的背景处理。我们在onItemClick中得到选中的Tab,然后为选中的和未选中的设置一个背景。这个背景这里用自定义图形shape的方法来定义,在res/drawable下新建xml文件,tab_button_select.xml中内容如下:


  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <shapexmlns:android="http://schemas.android.com/apk/res/android">
  3. <gradientandroid:startColor="#FFA2A2A2"android:endColor="#FF5F5F5F"
  4. android:angle="90.0">
  5. </gradient>
  6. </shape>

  其中的gradient标签实现一个从startColor到endColor角度为90渐变色。其实我们经常用这种方式来自定义我们的控件,可以用来实现圆角,渐变,描边等效果,分别在shape根节点下用gradient,corners,stroke标签实现,大家可以自己去试试,效果还是很好的,也很简单。

  下面来看下MainActivity的代码,显示layout的方法和我以前一篇仿Iphone效果的Tab中一样,通过隐藏和显示相应的layout来实现。当然,也可以通过intent来指向不同的Activity等方法来做。注意定义要显示的Tab数组的时候,因为我们第一个显示的不是第一个Tab,所以适当调整下数组的定义顺序,同样对应的layou也是。

  1. publicclassMainActivityextendsActivity{
  2. privateGallerygallery;
  3. privateTabAdaptertextAdapter;
  4. privatestaticfinalString[]TAB_NAMES={
  5. "第四个",
  6. "第一个",
  7. "第二个",
  8. "第三个",
  9. };//注意调整顺序
  10. privateLinearLayoutmTabLayout_One;
  11. privateLinearLayoutmTabLayout_Two;
  12. privateLinearLayoutmTabLayout_Three;
  13. privateLinearLayoutmTabLayout_Four;
  14. @Override
  15. publicvoidonCreate(BundlesavedInstanceState){
  16. super.onCreate(savedInstanceState);
  17. setContentView(R.layout.main);
  18. gallery=(Gallery)findViewById(R.id.gallery);
  19. textAdapter=newTabAdapter(this,Arrays.asList(TAB_NAMES));
  20. gallery.setAdapter(textAdapter);
  21. gallery.setSelection(34);//这里根据你的Tab数自己算一下,让左边的稍微多一点,不要一滑就滑到头
  22. mTabLayout_One=(LinearLayout)this.findViewById(R.id.TabLayout_One);
  23. mTabLayout_Two=(LinearLayout)this.findViewById(R.id.TabLayout_Two);
  24. mTabLayout_Three=(LinearLayout)this.findViewById(R.id.TabLayout_Three);
  25. mTabLayout_Four=(LinearLayout)this.findViewById(R.id.TabLayout_Four);
  26. mTabLayout_One.setVisibility(View.GONE);
  27. mTabLayout_Two.setVisibility(View.VISIBLE);
  28. mTabLayout_Three.setVisibility(View.GONE);
  29. mTabLayout_Four.setVisibility(View.GONE);
  30. gallery.setOnItemClickListener(newOnItemClickListener(){
  31. @Override
  32. publicvoidonItemClick(AdapterView<?>parent,Viewview,intposition,
  33. longid){
  34. TabAdapteradapter=(TabAdapter)parent.getAdapter();
  35. adapter.setSelectedTab(position);
  36. switch(position%TAB_NAMES.length){
  37. case0:
  38. mTabLayout_One.setVisibility(View.VISIBLE);
  39. mTabLayout_Two.setVisibility(View.GONE);
  40. mTabLayout_Three.setVisibility(View.GONE);
  41. mTabLayout_Four.setVisibility(View.GONE);
  42. break;
  43. case1:
  44. mTabLayout_One.setVisibility(View.GONE);
  45. mTabLayout_Two.setVisibility(View.VISIBLE);
  46. mTabLayout_Three.setVisibility(View.GONE);
  47. mTabLayout_Four.setVisibility(View.GONE);
  48. break;
  49. case2:
  50. mTabLayout_One.setVisibility(View.GONE);
  51. mTabLayout_Two.setVisibility(View.GONE);
  52. mTabLayout_Three.setVisibility(View.VISIBLE);
  53. mTabLayout_Four.setVisibility(View.GONE);
  54. break;
  55. case3:
  56. mTabLayout_One.setVisibility(View.GONE);
  57. mTabLayout_Two.setVisibility(View.GONE);
  58. mTabLayout_Three.setVisibility(View.GONE);
  59. mTabLayout_Four.setVisibility(View.VISIBLE);
  60. }
  61. }
  62. });
  63. }

最后就是main.xml布局文件了:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:background="#C5CCD4FF">
  6. <LinearLayout
  7. android:id="@+id/TabLayout_One"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent"
  10. android:layout_below="@+id/gallery"
  11. >
  12. <ScrollViewandroid:layout_width="fill_parent"android:layout_height="wrap_content">
  13. <RelativeLayout
  14. android:layout_width="fill_parent"
  15. android:layout_height="fill_parent"
  16. android:visibility="visible"
  17. >
  18. <TextView
  19. android:textColor="@android:color/black"
  20. android:textSize="30sp"
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:text="这是第四个布局"
  24. />
  25. </RelativeLayout>
  26. </ScrollView>
  27. </LinearLayout>
  28. <LinearLayout
  29. android:id="@+id/TabLayout_Two"
  30. android:layout_width="fill_parent"
  31. android:layout_height="fill_parent"
  32. android:layout_below="@+id/gallery"
  33. >
  34. <ScrollViewandroid:layout_width="fill_parent"android:layout_height="wrap_content">
  35. <RelativeLayout
  36. android:layout_width="fill_parent"
  37. android:layout_height="fill_parent"
  38. android:visibility="visible"
  39. android:layout_above="@+id/Tabs"
  40. >
  41. <Button
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:text="这是第一个布局"
  45. android:textSize="30sp"
  46. />
  47. </RelativeLayout>
  48. </ScrollView>
  49. </LinearLayout>
  50. <LinearLayout
  51. android:id="@+id/TabLayout_Three"
  52. android:layout_width="fill_parent"
  53. android:layout_height="fill_parent"
  54. android:layout_below="@+id/gallery"
  55. >
  56. <ScrollViewandroid:layout_width="fill_parent"android:layout_height="wrap_content">
  57. <RelativeLayout
  58. android:layout_width="fill_parent"
  59. android:layout_height="fill_parent"
  60. android:visibility="visible"
  61. android:layout_above="@+id/Tabs"
  62. >
  63. <TextView
  64. android:layout_width="fill_parent"
  65. android:layout_height="fill_parent"
  66. android:textSize="25sp"
  67. android:textColor="#ffffff"
  68. android:text="dddddddddddddddddddddddddddddddddddd"
  69. />
  70. </RelativeLayout>
  71. </ScrollView>
  72. </LinearLayout>
  73. <LinearLayout
  74. android:id="@+id/TabLayout_Four"
  75. android:layout_width="fill_parent"
  76. android:layout_height="fill_parent"
  77. android:layout_below="@+id/gallery"
  78. >
  79. <ScrollViewandroid:layout_width="fill_parent"android:layout_height="wrap_content">
  80. <RelativeLayout
  81. android:id="@+id/TabLayout_Four"
  82. android:layout_width="fill_parent"
  83. android:layout_height="fill_parent"
  84. android:visibility="visible"
  85. android:layout_above="@+id/Tabs"
  86. >
  87. <TextView
  88. android:textColor="@android:color/black"
  89. android:layout_width="wrap_content"
  90. android:layout_height="wrap_content"
  91. android:text="很简单,是么"
  92. />
  93. </RelativeLayout>
  94. </ScrollView>
  95. </LinearLayout>
  96. <Gallery
  97. android:id="@+id/gallery"
  98. android:layout_alignParentTop="true"
  99. android:layout_width="fill_parent"
  100. android:layout_height="wrap_content"
  101. android:unselectedAlpha="1"
  102. android:spacing="1dip"/>
  103. </RelativeLayout>

这样我们用gallery实现的可滑动的Tab就完成了,看下最后的效果。

大家有什么问题可以留言交流哈。特别是对让左边不留空的方法有好的解决办法的话,希望能提出来,大家一起学习交流。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics