Android 实现横向滑动效果

在做android开发的时候，很多时候我们要使用水平滑动的效果，同时再滑动栏中的对象可能会作为选择对象的存在，在这里给大家做一个水平滚动的例子。

首先我们要想象一下，一个水平滑动选择器的样子：

接下来是布局的实现: 外层这里我们使用普通的 HorizontalScrollView, scroll view的内部内容我们使用GridView来显示多个像，并且这些对象是在一行显示的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns : android = "http://schemas.android.com/apk/res/android"      android : layout_width = "match_parent"      android : layout_height = "match_parent"      android : background = "#ccc"      android : orientation = "vertical" >           < ! -- 关于是否加属性 android : orientation = "horizontal"， 我在单独测试的时候就不需要，但是我在项目中复杂一些的页面使用的时候，有时候要加上。                              至于为什么目前因为项目忙 没有去研究。目前是个使用 android时间很短的开发者，所以不对之处 请指出。 -- >              < HorizontalScrollView                  android : id = "@+id/scrollView"                  android : layout_width = "match_parent"                  android : layout_height = "56dp"                  android : layout_marginTop = "72dp"                  android : layout_gravity = "center"                                   android : background = "#fff" >                    < LinearLayout                      android : layout_width = "wrap_content"                      android : layout_height = "wrap_content"                      >                        < GridView                          android : id = "@+id/gridview"                          android : layout_width = "fill_parent"                          android : layout_height = "wrap_content" / >                  < / LinearLayout >              < / HorizontalScrollView > < / LinearLayout >

每个具体的对象的布局，也就是我们通常说的Item布局的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"      android : id = "@+id/box_1"      android : layout_width = "72dp"      android : layout_height = "72dp"      android : padding = "2dp" >      < ImageView          android : id = "@+id/record_box_icon"          android : layout_width = "32dp"          android : layout_height = "32dip"          android : layout_centerHorizontal = "true"          android : layout_marginLeft = "10dp"          android : background = "@drawable/h_jiluxiang" >      < / ImageView >      < TextView          android : id = "@+id/record_boxname"          android : layout_width = "wrap_content"          android : layout_height = "wrap_content"          android : layout_below = "@id/record_box_icon"          android : layout_centerHorizontal = "true"          android : layout_marginTop = "1dp"          android : gravity = "center"          android : singleLine = "true"          android : text = "水果记录篮水果记录篮水果记录篮"          android : textColor = "#000"          android : textSize = "12sp" / > < / RelativeLayout >

布局实现了，接下来是Activity中代码的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

package com . coolbeetle . widget ;   import java . util . ArrayList ; import java . util . List ;   import android . app . Activity ; import android . os . Bundle ; import android . view . LayoutInflater ; import android . view . View ; import android . widget . LinearLayout . LayoutParams ; import android . widget . AdapterView ; import android . widget . AdapterView . OnItemClickListener ; import android . widget . GridView ; import android . widget . HorizontalScrollView ; import android . widget . Toast ;   import com . coolbeetle . widget . adapter . GridAdapter ; import com . coolbeetle . widget . model . GridModel ;   /** * Horizontal scroller to implements selection. * @author coolbeetle.net * @since 1.0 * */ public class HorizontalScrollerSelction extends Activity {           private GridView gridView ;      private HorizontalScrollView scrollView ;           private LayoutInflater inflater ;           private List <GridModel> grids = new ArrayList <GridModel> ( ) ;           private GridAdapter gridAdapter ;             @Override      protected void onCreate ( Bundle savedInstanceState ) {          super . onCreate ( savedInstanceState ) ;          inflater = LayoutInflater . from ( this ) ;                   this . initMockData ( ) ;          this . setContentView ( R . layout . horizontal_scroller_selection ) ;          this . gridView = ( GridView ) findViewById ( R . id . gridview ) ;          this . scrollView = ( HorizontalScrollView ) this . findViewById ( R . id . scrollView ) ;          /**          * 如果想要隐藏scroller bar的话 直接设置为false 就好了。          */          //this.scrollView.setHorizontalScrollBarEnabled(false);          initHorizontalView ( ) ;      }           /**      * 初始化 数据      */      private void initMockData ( ) {                   for ( int i = 0 ; i < 10 ; i ++ ) {                           GridModel grid = new GridModel ( ) ;              grid . setId ( String . valueOf ( i ) ) ;              grid . setName ( "记录栏:" + i ) ;              grids . add ( grid ) ;                       }      }           private void initHorizontalView ( ) {                   this . gridAdapter = new GridAdapter ( inflater , grids ) ;          if ( ! grids . isEmpty ( ) ) {                           gridAdapter . setCurrentGrid ( grids . get ( 0 ) ) ; //设置默认的选中的item                       }          gridView . setAdapter ( gridAdapter ) ;                   /**          * 初始化grid view的布局，这里很重要。这里根据数据的多少，和单个item的宽度来动态设置grid view的长度。          *          */          LayoutParams layoutParams = new LayoutParams ( gridAdapter . getCount ( ) * ( 110 ) , LayoutParams . WRAP_CONTENT ) ;                   gridView . setLayoutParams ( layoutParams ) ;          gridView . setColumnWidth ( 100 ) ;          gridView . setHorizontalSpacing ( 10 ) ;          gridView . setStretchMode ( GridView . NO_STRETCH ) ;          gridView . setNumColumns ( gridAdapter . getCount ( ) ) ; //因为现实在一行，所以这里设置列数就是数据的多少                   /**          * 当点击水平滑动篮中的某个对象的时候，就切换对象的图片效果，这样就造成了选择者为一种，其他的效果为另外一种。          * 这里可以根据用户自身的徐柳来完成。          */          gridView . setOnItemClickListener ( new OnItemClickListener ( ) {                @Override              public void onItemClick ( AdapterView < ? > parent , View view ,                      int position , long id ) {                                   GridModel selectGrid = grids . get ( position ) ;                  gridAdapter . setCurrentGrid ( selectGrid ) ;                  gridAdapter . notifyDataSetInvalidated ( ) ;                  Toast . makeText ( HorizontalScrollerSelction . this , "你正在选择 '" + selectGrid . getName ( ) , Toast . LENGTH_SHORT ) . show ( ) ;              }                       } ) ;               }   }

同时与Grid View 相辅的Adapter的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

package com . coolbeetle . widget . adapter ;   import java . util . ArrayList ; import java . util . List ;   import android . view . LayoutInflater ; import android . view . View ; import android . view . ViewGroup ; import android . widget . BaseAdapter ; import android . widget . ImageView ; import android . widget . TextView ;   import com . coolbeetle . widget . R ; import com . coolbeetle . widget . model . GridModel ;   /** * Adapter created for horizontal grid. * @author coolbeetle.net * @since 1.0 * */ public class GridAdapter extends BaseAdapter {           private LayoutInflater inflater ;                private List <GridModel> grids = new ArrayList <GridModel> ( ) ;           private GridModel currentGrid ;                public GridAdapter ( LayoutInflater inflater , List <GridModel> grids ) {          this . inflater = inflater ;          this . grids = grids ;               }      @Override      public int getCount ( ) {          return grids . size ( ) ;      }        @Override      public Object getItem ( int position ) {          return grids . get ( position ) ;      }        @Override      public long getItemId ( int position ) {          return position ;      }        @Override      public View getView ( int position , View convertView , ViewGroup parent ) {          ViewHolder holder ;          if ( convertView == null ) {              holder = new ViewHolder ( ) ;              convertView = inflater . inflate ( R . layout . grid_item , null ) ;                       } else {              holder = ( ViewHolder ) convertView . getTag ( ) ;          }                   GridModel grid = grids . get ( position ) ;          holder . img = ( ImageView ) convertView . findViewById ( R . id . record_box_icon ) ;          if ( currentGrid != null && grid . getId ( ) . equals ( currentGrid . getId ( ) ) ) {                           holder . img . setBackgroundResource ( R . drawable . h_jiluxiang_green ) ;          } else {              holder . img . setBackgroundResource ( R . drawable . h_jiluxiang ) ;          }                   holder . text = ( TextView ) convertView . findViewById ( R . id . record_boxname ) ;          holder . text . setText ( grid . getName ( ) ) ;          convertView . setTag ( holder ) ;          return convertView ;      }        static class ViewHolder {          ImageView img ;          TextView text ;      }        public GridModel getCurrentGrid ( ) {          return currentGrid ;      }      public void setCurrentGrid ( GridModel currentGrid ) {          this . currentGrid = currentGrid ;      } }

最后我们来运行看一下效果：