首页 > 代码库 > HorizontalScrollView水平滚动控件

HorizontalScrollView水平滚动控件

HorizontalScrollView水平滚动控件

一、简介

技术分享

用法ScrollView大致相同

 

二、方法

1)HorizontalScrollView水平滚动控件使用方法

1、在layout布局文件的最外层建立一个HorizontalScrollView控件

2、在HorizontalScrollView控件中加入一个LinearLayout控件,并且把它的orientation设置为horizontal

3、在LinearLayout控件中放入多个装有图片的ImageView控件

 

2)HorizontalScrollView和ScrollView混合使用方法

 以先垂直后水平为例

1、在layout布局文件的最外层建立一个ScrollView控件

2、在ScrollView控件中加入一个LinearLayout控件,并且把它的orientation设置为vertical

3、在这个LinearLayout中添加多个已经弄好的HorizontalScrollView水平滚动控件

 

三、代码实例

HorizontalScrollView水平滚动控件使用方法

1、水平滚动效果图:

技术分享

技术分享

 

2、水平滚动代码:

/Ex27ScrollView/res/layout/activity02.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:scrollbars="none"
 6     >
 7     <LinearLayout 
 8         android:layout_width="match_parent"
 9         android:layout_height="match_parent"
10         android:orientation="horizontal"
11         >
12         <ImageView 
13             android:layout_width="wrap_content"
14             android:layout_height="wrap_content"
15             android:src="@drawable/item1"
16             />
17         <ImageView 
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:src="@drawable/item2"
21             />
22         <ImageView 
23             android:layout_width="wrap_content"
24             android:layout_height="wrap_content"
25             android:src="@drawable/item3"
26             />
27         <ImageView 
28             android:layout_width="wrap_content"
29             android:layout_height="wrap_content"
30             android:src="@drawable/item4"
31             />
32         <ImageView 
33             android:layout_width="wrap_content"
34             android:layout_height="wrap_content"
35             android:src="@drawable/item5"
36             />
37     </LinearLayout>
38    
39 
40 </HorizontalScrollView>

 

3、水平竖直混合滚动效果图

技术分享技术分享

 

3、水平竖直混合滚动效果代码

/Ex27ScrollView/res/layout/activity03.xml

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="match_parent"
  5     android:scrollbars="none" >
  6 
  7     <LinearLayout
  8         android:layout_width="match_parent"
  9         android:layout_height="match_parent"
 10         android:orientation="vertical" >
 11 
 12         <HorizontalScrollView
 13             android:layout_width="match_parent"
 14             android:layout_height="match_parent"
 15             android:scrollbars="none" >
 16 
 17             <LinearLayout
 18                 android:layout_width="match_parent"
 19                 android:layout_height="match_parent"
 20                 android:orientation="horizontal" >
 21 
 22                 <ImageView
 23                     android:layout_width="wrap_content"
 24                     android:layout_height="wrap_content"
 25                     android:src="@drawable/item1" />
 26 
 27                 <ImageView
 28                     android:layout_width="wrap_content"
 29                     android:layout_height="wrap_content"
 30                     android:src="@drawable/item2" />
 31 
 32                 <ImageView
 33                     android:layout_width="wrap_content"
 34                     android:layout_height="wrap_content"
 35                     android:src="@drawable/item3" />
 36 
 37                 <ImageView
 38                     android:layout_width="wrap_content"
 39                     android:layout_height="wrap_content"
 40                     android:src="@drawable/item4" />
 41 
 42                 <ImageView
 43                     android:layout_width="wrap_content"
 44                     android:layout_height="wrap_content"
 45                     android:src="@drawable/item5" />
 46             </LinearLayout>
 47         </HorizontalScrollView>
 48         <HorizontalScrollView
 49             android:layout_width="match_parent"
 50             android:layout_height="match_parent"
 51             android:scrollbars="none" >
 52 
 53             <LinearLayout
 54                 android:layout_width="match_parent"
 55                 android:layout_height="match_parent"
 56                 android:orientation="horizontal" >
 57 
 58                 <ImageView
 59                     android:layout_width="wrap_content"
 60                     android:layout_height="wrap_content"
 61                     android:src="@drawable/item1" />
 62 
 63                 <ImageView
 64                     android:layout_width="wrap_content"
 65                     android:layout_height="wrap_content"
 66                     android:src="@drawable/item2" />
 67 
 68                 <ImageView
 69                     android:layout_width="wrap_content"
 70                     android:layout_height="wrap_content"
 71                     android:src="@drawable/item3" />
 72 
 73                 <ImageView
 74                     android:layout_width="wrap_content"
 75                     android:layout_height="wrap_content"
 76                     android:src="@drawable/item4" />
 77 
 78                 <ImageView
 79                     android:layout_width="wrap_content"
 80                     android:layout_height="wrap_content"
 81                     android:src="@drawable/item5" />
 82             </LinearLayout>
 83         </HorizontalScrollView>
 84         <HorizontalScrollView
 85             android:layout_width="match_parent"
 86             android:layout_height="match_parent"
 87             android:scrollbars="none" >
 88 
 89             <LinearLayout
 90                 android:layout_width="match_parent"
 91                 android:layout_height="match_parent"
 92                 android:orientation="horizontal" >
 93 
 94                 <ImageView
 95                     android:layout_width="wrap_content"
 96                     android:layout_height="wrap_content"
 97                     android:src="@drawable/item1" />
 98 
 99                 <ImageView
100                     android:layout_width="wrap_content"
101                     android:layout_height="wrap_content"
102                     android:src="@drawable/item2" />
103 
104                 <ImageView
105                     android:layout_width="wrap_content"
106                     android:layout_height="wrap_content"
107                     android:src="@drawable/item3" />
108 
109                 <ImageView
110                     android:layout_width="wrap_content"
111                     android:layout_height="wrap_content"
112                     android:src="@drawable/item4" />
113 
114                 <ImageView
115                     android:layout_width="wrap_content"
116                     android:layout_height="wrap_content"
117                     android:src="@drawable/item5" />
118             </LinearLayout>
119         </HorizontalScrollView>
120         <HorizontalScrollView
121             android:layout_width="match_parent"
122             android:layout_height="match_parent"
123             android:scrollbars="none" >
124 
125             <LinearLayout
126                 android:layout_width="match_parent"
127                 android:layout_height="match_parent"
128                 android:orientation="horizontal" >
129 
130                 <ImageView
131                     android:layout_width="wrap_content"
132                     android:layout_height="wrap_content"
133                     android:src="@drawable/item1" />
134 
135                 <ImageView
136                     android:layout_width="wrap_content"
137                     android:layout_height="wrap_content"
138                     android:src="@drawable/item2" />
139 
140                 <ImageView
141                     android:layout_width="wrap_content"
142                     android:layout_height="wrap_content"
143                     android:src="@drawable/item3" />
144 
145                 <ImageView
146                     android:layout_width="wrap_content"
147                     android:layout_height="wrap_content"
148                     android:src="@drawable/item4" />
149 
150                 <ImageView
151                     android:layout_width="wrap_content"
152                     android:layout_height="wrap_content"
153                     android:src="@drawable/item5" />
154             </LinearLayout>
155         </HorizontalScrollView>
156         <HorizontalScrollView
157             android:layout_width="match_parent"
158             android:layout_height="match_parent"
159             android:scrollbars="none" >
160 
161             <LinearLayout
162                 android:layout_width="match_parent"
163                 android:layout_height="match_parent"
164                 android:orientation="horizontal" >
165 
166                 <ImageView
167                     android:layout_width="wrap_content"
168                     android:layout_height="wrap_content"
169                     android:src="@drawable/item1" />
170 
171                 <ImageView
172                     android:layout_width="wrap_content"
173                     android:layout_height="wrap_content"
174                     android:src="@drawable/item2" />
175 
176                 <ImageView
177                     android:layout_width="wrap_content"
178                     android:layout_height="wrap_content"
179                     android:src="@drawable/item3" />
180 
181                 <ImageView
182                     android:layout_width="wrap_content"
183                     android:layout_height="wrap_content"
184                     android:src="@drawable/item4" />
185 
186                 <ImageView
187                     android:layout_width="wrap_content"
188                     android:layout_height="wrap_content"
189                     android:src="@drawable/item5" />
190             </LinearLayout>
191         </HorizontalScrollView>
192     </LinearLayout>
193 
194 </ScrollView>

 

四、注意点

 1、始终注意HorizontalScrollView和ScrollView的直接儿子只有一个,一般都是LinearOut,保证了这个,怎么用也不会错

 

五、易错点

 

HorizontalScrollView水平滚动控件