在实现横向的类似Gallery的效果中做了实现Gallery的尝试,但是效果不好。使用的是TableLayout,出现了横向拖动图片的时候,因为有倾斜(轻微的竖向拖动),会整个列表竖向滚动。其实这个问题可以将TableRow中条目设置为clickable来解决。但是效果依然不好。
这次尝试通过GridView来解决问题,效果很好,见截图:
基本思路是:
- 每个可选的图,包括文字部分,是GridView中的一个条目;
- 一个GridView条目是相对布局(RelativeLayout),里面包含一个图片(ImageView)和一个文字(TextView);
- 关键点是GridView如何保持横向,默认的情况下会折行的,首先要用一个HorizontalScrollView提供横向滚动容器,然后内部放置一个FrameLayout,如果不放置FrameLayout布局,直接放入下面的布局或者视图,GridView将会变成单列纵向滚动,在FrameLayout布局中加入横向的LinearLayout布局,要设置它的layout_width,要足够大,这样在其中加入GridView就能横向排列了。
首先看一下GridView中条目的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingBottom="10.0dip" android:layout_width="90.0dip"
android:layout_height="140.0dip">
<ImageView android:id="@+id/ItemImage" android:layout_width="80.0dip"
android:layout_height="108.0dip" android:layout_marginLeft="10.0dip"
android:layout_centerHorizontal="true">
</ImageView>
<TextView android:layout_below="@+id/ItemImage" android:id="@+id/ItemText"
android:ellipsize="end" android:layout_width="80.0dip"
android:layout_height="26.0dip" android:layout_marginTop="5.0dip"
android:singleLine="true" android:layout_centerHorizontal="true">
</TextView>
</RelativeLayout>
这里使用了相对布局的特性,android:layout_below,表示TextView在ImageView下面。这里的图都是用的res/drawable目录下的静态图形文件,正式情况下,应该是从网络获取,可参见用Java concurrent编写异步加载图片功能的原型实现,二者结合可用于正式生产环境。
ListView的Header使用了自定义视图,更简单的示例可参见为ListView增加Header。表头(ListView Header)的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="200dp">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="最近访问人物" />
<HorizontalScrollView android:layout_width="fill_parent"
android:layout_height="160dp">
<FrameLayout android:layout_width="fill_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="1100dp"
android:layout_height="match_parent" android:orientation="horizontal">
<GridView android:id="@+id/grid" android:layout_width="fill_parent"
android:gravity="center" android:layout_height="fill_parent"
android:horizontalSpacing="1.0dip" android:verticalSpacing="1.0dip"
android:stretchMode="spacingWidthUniform" android:numColumns="auto_fit"
android:columnWidth="80dip">
</GridView>
</LinearLayout>
</FrameLayout>
</HorizontalScrollView>
</LinearLayout>
这是比较关键的布局文件,GridView能实现横向滚动主要靠它了。其中:
<LinearLayout android:layout_width="1100dp"
我是写死了1100dp,正式使用的时候,因为图片都可能是动态从服务器上获取的,可以根据数量以及图片的宽度,空白边动态计算这个长度。
GridView和ListView类似,都需要ViewAdapter来适配数据和视图。
见Activity的源代码:
package com.easymorse.grid.demo;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class GridDemoActivity extends ListActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LayoutInflater layoutInflater = (LayoutInflater) this
.getSystemService("layout_inflater");
View headerView=layoutInflater.inflate(R.layout.list_header, null);
setGridView(headerView);
ListView listView=(ListView) this.findViewById(android.R.id.list);
listView.addHeaderView(headerView);
listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,new String[]{"隋","唐","宋","元","明","清"}));
}
private void setGridView(View view) {
GridView gridView = (GridView) view.findViewById(R.id.grid);
gridView.setNumColumns(10);
ArrayList<HashMap<String, Object>> items = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < 10; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", R.drawable.k);
map.put("ItemText", "清.康熙" + "(" + i + ")");
items.add(map);
}
SimpleAdapter adapter = new SimpleAdapter(this, items, R.layout.item,
new String[] { "ItemImage", "ItemText" }, new int[] {
R.id.ItemImage, R.id.ItemText });
gridView.setAdapter(adapter);
}
}
全部源代码:
http://easymorse.googlecode.com/svn/tags/grid.demo-0.1.0/
分享到:
相关推荐
用GridView实现的Gallery效果,由于Gallery实现起来效果不好,所以用GridView实现了,有点击选中效果
gridView实现gallery效果防止gallery滑动过快效果
本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能。分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以...
android 使用GridView实现Gallery的效果,并且从最左边开始
RecylerView常见用法,包含了: 系统提供了几种LayoutManager的使用;...横向ListView的功能,参考Android 自定义RecyclerView 实现真正的Gallery效果 横向ScrollView的功能 瀑布流效果 便于添加Item增加和移除动画
RecyclerView提供了一个耦合度更低的方式来复用ViewHolder,并且可以轻松的实现ListView、GridView以及瀑布流的效果。 RecyclerView使用的基本思路 首先我们要gradle的依赖库中添加 compile ‘com.
采用:Gallery和GridView实现的效果。详情请看代码
本文主要讲解Android 组件Gallery和GridView,这里详细介绍组件Gallery和GridView的知识要点,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下
Tab的点击切换和滑动切换实现,内部添加了Gif动画的显示,GridView自定义适配器以及Gallery的3D画廊效果可自定义时间的进行切换
android图片特效,图片过滤 首先实选择列表从最左边开始排序并且默认选中第一项,这里为了实现从最左边开始所以使用HorizontalScrollView结合GridView实现Gallery view 图片效果图
Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果。 Gallery常用的XML属性 属性名称 描述 android:animationDuration 设置布局变化时动画的转换所需的时间(毫秒...
46、Gallery3d效果 47、ListView 上拉加载更多效果 48、异步加载图片的二级缓存技术 49、QQ的好友列表展示效果 50、Fragment + ViewPager实现tab滑动切换 51、能够显示在桌面前面的的歌词效果 52、activity切换...
46、Gallery3d效果 47、ListView 上拉加载更多效果 48、异步加载图片的二级缓存技术 49、QQ的好友列表展示效果 50、Fragment + ViewPager实现tab滑动切换 51、能够显示在桌面前面的的歌词效果 52、activity切换...
6.4 TextView实现跑马灯效果 6.5 EditText输入表情图像 6.6 EditText中输入特定的字符 6.7 AutoCompleteTextView完成输入 6.8 Button按钮的焦点变化 6.9 Button图文混排的按钮 6.10 RadioButton单选按钮的使用 6.11 ...
使用Gallery实现Tab 仿QQ--tab切换动画实例 Android 小项目之---猜扑克牌游戏 (附源码) fleep滑动切换tab(切换带动画) 通过SurfaceView实现像Gallery手势滑动图片效果 Android自定义Gallery,实现CoverFlow...
从效果看,大概就能猜出用什么控件类(支持左右滑动的控件类+GridView),支持左右滑动的控件类,有很多了比如常用的Gallery,ViewPager,ViewFlipper,ViewFlow等等,本例自定义继承ViewGroup的。看过launcher源码的人...
PS:上传的只是一个GridView demo,实现起来的话应该都不难。在大图情况下,点击回退到小图,此时需要考虑到滑动之后小图的改变位置。demo中我只考虑了<= 9张的情况。————————————————最近项目中...
16.3.3 使用Camera实现2D图像的深度效果 16.3.4 探索AnimationListener类 16.3.5 关于变换矩阵的一些说明 16.4 资源 16.5 小结 第17章 地图和基于位置的服务 17.1 地图包 17.1.1 从Google获取...
16.3.3 使用Camera实现2D图像的深度效果 16.3.4 探索AnimationListener类 16.3.5 关于变换矩阵的一些说明 16.4 资源 16.5 小结 第17章 地图和基于位置的服务 17.1 地图包 17.1.1 从Google获取...