Android 实现横向滑动效果

来源：互联网发布：怎么查淘宝客编辑：程序博客网时间：2024/05/17 06:41

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

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

接下来是布局的实现: 外层这里我们使用普通的 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
<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns: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
packagecom.coolbeetle.widget.adapter;
 
importjava.util.ArrayList;
importjava.util.List;
 
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.BaseAdapter;
importandroid.widget.ImageView;
importandroid.widget.TextView;
 
importcom.coolbeetle.widget.R;
importcom.coolbeetle.widget.model.GridModel;
 
/**
* Adapter created for horizontal grid.
* @author coolbeetle.net
* @since 1.0
*
*/
publicclassGridAdapterextendsBaseAdapter{
    
    privateLayoutInflaterinflater;
    
    
    privateList<GridModel>grids=newArrayList<GridModel>();
    
    privateGridModelcurrentGrid;
    
    
    publicGridAdapter(LayoutInflaterinflater,List<GridModel>grids){
        this.inflater=inflater;
        this.grids=grids;
        
    }
    @Override
    publicintgetCount(){
        returngrids.size();
    }
 
    @Override
    publicObjectgetItem(intposition){
        returngrids.get(position);
    }
 
    @Override
    publiclonggetItemId(intposition){
        returnposition;
    }
 
    @Override
    publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
        ViewHolderholder;
        if(convertView==null){
            holder=newViewHolder();
            convertView=inflater.inflate(R.layout.grid_item,null);
            
        }else{
            holder=(ViewHolder)convertView.getTag();
        }
        
        GridModelgrid=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);
        returnconvertView;
    }
 
    staticclassViewHolder{
        ImageViewimg;
        TextViewtext;
    }
 
    publicGridModelgetCurrentGrid(){
        returncurrentGrid;
    }
    publicvoidsetCurrentGrid(GridModelcurrentGrid){
        this.currentGrid=currentGrid;
    }
}

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

0 0