本文内容:
1、横向ListView的所有实现思路;
2、其中一个最通用的思路HorizontalListView,并基于横向ListView开发一个简单的相册;
3、实现的横向ListView在点击、浏览时item背景会变色,并解决了listview里setSelected造成item的选择状态混乱的问题。
众所周知,ListView默认的方向是垂直的,但有些时候人们更喜欢横向ListView。纵观整个网络,横向ListView的实现思路如下:
1、在布局里用HorizontalScrollView包含一个ListView,参考这里;
2、利用GridView,把它的行数设为1行;
3、有人继承ListView构造了一个HorizontalScrollListView,参见:这里
4、国外一位大牛继承AdapterView<ListAdapter>构造的HorizontalListView,这是以上所有方法里本人认为最正统的方法,本文即基于此方法,参见:这里
下面看源码:
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”><RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
- xmlns:tools=“http://schemas.android.com/tools”
- android:layout_width=“match_parent”
- android:layout_height=“match_parent”
- android:paddingBottom=“@dimen/activity_vertical_margin”
- android:paddingLeft=“@dimen/activity_horizontal_margin”
- android:paddingRight=“@dimen/activity_horizontal_margin”
- android:paddingTop=“@dimen/activity_vertical_margin”
- tools:context=“.MainActivity”
- >
- <org.yanzi.ui.HorizontalListView
- android:id=“@+id/horizon_listview”
- android:layout_width=“match_parent”
- android:layout_height=“150dip”
- android:layout_alignParentTop=“true”
- >
- </org.yanzi.ui.HorizontalListView>
- <ImageView
- android:id=“@+id/image_preview”
- android:layout_width=“wrap_content”
- android:layout_height=“wrap_content”
- android:layout_below=“@id/horizon_listview”
- android:layout_centerInParent=“true”
- android:clickable=“true”
- android:background=“@drawable/selector_imageview_background”
- />
- <!– android:background=”@android:drawable/ic_menu_gallery” –>
- </RelativeLayout></span>
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”><?xml version=“1.0” encoding=“utf-8″?>
- <LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
- android:layout_width=“wrap_content”
- android:layout_height=“wrap_content”
- android:paddingLeft=“2dip”
- android:paddingRight=“2dip”
- android:paddingTop=“2dip”
- android:paddingBottom=“2dip”
- android:orientation=“vertical”
- android:gravity=“center”
- android:clickable=“true”
- android:background=“@drawable/selector_item_background”>
- <ImageView
- android:id=“@+id/img_list_item”
- android:layout_width=“wrap_content”
- android:layout_height=“wrap_content”/>
- <TextView
- android:id=“@+id/text_list_item”
- android:layout_width=“match_parent”
- android:layout_height=“wrap_content”
- android:gravity=“center”/>
- </LinearLayout>
- </span>
下面文件是selector_imageview_background.xml,这是大图片你点击浏览时背景发生变化的selector,没有啥实际作用。
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”><?xml version=“1.0” encoding=“utf-8″?>
- <selector xmlns:android=“http://schemas.android.com/apk/res/android”>
- <item android:drawable=“@android:color/holo_green_light” android:state_pressed=“true”/>
- <item android:drawable=“@android:color/holo_green_light” android:state_focused=“true”/>
- <item android:drawable=“@drawable/image_background”></item>
- <!– android:drawable=”@android:color/transparent” –>
- </selector></span>
下面是每个item的selector,在focus和select时颜色会发生变化:selector_item_background.xml
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”><?xml version=“1.0” encoding=“utf-8″?>
- <selector xmlns:android=“http://schemas.android.com/apk/res/android”>
- <item android:drawable=“@android:color/holo_red_light” android:state_selected=“true”/>
- <item android:drawable=“@android:color/holo_green_dark” android:state_pressed=“true”/>
- <item android:drawable=“@android:color/transparent”/>
- </selector></span>
主程序:MainActivity.java
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”>package org.yanzi.testhorizontallistview;
- import org.yanzi.ui.HorizontalListView;
- import org.yanzi.ui.HorizontalListViewAdapter;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.Menu;
- import android.view.View;
- import android.widget.AdapterView;
- import android.widget.AdapterView.OnItemClickListener;
- import android.widget.ImageView;
- public class MainActivity extends Activity {
- HorizontalListView hListView;
- HorizontalListViewAdapter hListViewAdapter;
- ImageView previewImg;
- View olderSelectView = null;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- initUI();
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- // Inflate the menu; this adds items to the action bar if it is present.
- getMenuInflater().inflate(R.menu.main, menu);
- return true;
- }
- public void initUI(){
- hListView = (HorizontalListView)findViewById(R.id.horizon_listview);
- previewImg = (ImageView)findViewById(R.id.image_preview);
- String[] titles = {“怀师”, “南怀瑾军校”, “闭关”, “南怀瑾”, “南公庄严照”, “怀师法相”};
- final int[] ids = {R.drawable.nanhuaijin_miss, R.drawable.nanhuaijin_school,
- R.drawable.nanhuaijin_biguan, R.drawable.nanhuaijin,
- R.drawable.nanhuaijin_zhuangyan, R.drawable.nanhuaijin_faxiang};
- hListViewAdapter = new HorizontalListViewAdapter(getApplicationContext(),titles,ids);
- hListView.setAdapter(hListViewAdapter);
- // hListView.setOnItemSelectedListener(new OnItemSelectedListener() {
- //
- // @Override
- // public void onItemSelected(AdapterView<?> parent, View view,
- // int position, long id) {
- // // TODO Auto-generated method stub
- // if(olderSelected != null){
- // olderSelected.setSelected(false); //上一个选中的View恢复原背景
- // }
- // olderSelected = view;
- // view.setSelected(true);
- // }
- //
- // @Override
- // public void onNothingSelected(AdapterView<?> parent) {
- // // TODO Auto-generated method stub
- //
- // }
- // });
- hListView.setOnItemClickListener(new OnItemClickListener() {
- @Override
- public void onItemClick(AdapterView<?> parent, View view,
- int position, long id) {
- // TODO Auto-generated method stub
- // if(olderSelectView == null){
- // olderSelectView = view;
- // }else{
- // olderSelectView.setSelected(false);
- // olderSelectView = null;
- // }
- // olderSelectView = view;
- // view.setSelected(true);
- previewImg.setImageResource(ids[position]);
- hListViewAdapter.setSelectIndex(position);
- hListViewAdapter.notifyDataSetChanged();
- }
- });
- }
- }
- </span>
HorizontalListView.java 这就是自定义的横向listview
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”>package org.yanzi.ui;
- /*
- * HorizontalListView.java v1.5
- *
- *
- * The MIT License
- * Copyright (c) 2011 Paul Soucy ([email protected])
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the “Software”), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- *
- */
- import java.util.LinkedList;
- import java.util.Queue;
- import android.content.Context;
- import android.database.DataSetObserver;
- import android.graphics.Rect;
- import android.util.AttributeSet;
- import android.view.GestureDetector;
- import android.view.GestureDetector.OnGestureListener;
- import android.view.MotionEvent;
- import android.view.View;
- import android.widget.AdapterView;
- import android.widget.ListAdapter;
- import android.widget.Scroller;
- public class HorizontalListView extends AdapterView<ListAdapter> {
- public boolean mAlwaysOverrideTouch = true;
- protected ListAdapter mAdapter;
- private int mLeftViewIndex = -1;
- private int mRightViewIndex = 0;
- protected int mCurrentX;
- protected int mNextX;
- private int mMaxX = Integer.MAX_VALUE;
- private int mDisplayOffset = 0;
- protected Scroller mScroller;
- private GestureDetector mGesture;
- private Queue<View> mRemovedViewQueue = new LinkedList<View>();
- private OnItemSelectedListener mOnItemSelected;
- private OnItemClickListener mOnItemClicked;
- private OnItemLongClickListener mOnItemLongClicked;
- private boolean mDataChanged = false;
- public HorizontalListView(Context context, AttributeSet attrs) {
- super(context, attrs);
- initView();
- }
- private synchronized void initView() {
- mLeftViewIndex = -1;
- mRightViewIndex = 0;
- mDisplayOffset = 0;
- mCurrentX = 0;
- mNextX = 0;
- mMaxX = Integer.MAX_VALUE;
- mScroller = new Scroller(getContext());
- mGesture = new GestureDetector(getContext(), mOnGesture);
- }
- @Override
- public void setOnItemSelectedListener(AdapterView.OnItemSelectedListener listener) {
- mOnItemSelected = listener;
- }
- @Override
- public void setOnItemClickListener(AdapterView.OnItemClickListener listener){
- mOnItemClicked = listener;
- }
- @Override
- public void setOnItemLongClickListener(AdapterView.OnItemLongClickListener listener) {
- mOnItemLongClicked = listener;
- }
- private DataSetObserver mDataObserver = new DataSetObserver() {
- @Override
- public void onChanged() {
- synchronized(HorizontalListView.this){
- mDataChanged = true;
- }
- invalidate();
- requestLayout();
- }
- @Override
- public void onInvalidated() {
- reset();
- invalidate();
- requestLayout();
- }
- };
- @Override
- public ListAdapter getAdapter() {
- return mAdapter;
- }
- @Override
- public View getSelectedView() {
- //TODO: implement
- return null;
- }
- @Override
- public void setAdapter(ListAdapter adapter) {
- if(mAdapter != null) {
- mAdapter.unregisterDataSetObserver(mDataObserver);
- }
- mAdapter = adapter;
- mAdapter.registerDataSetObserver(mDataObserver);
- reset();
- }
- private synchronized void reset(){
- initView();
- removeAllViewsInLayout();
- requestLayout();
- }
- @Override
- public void setSelection(int position) {
- //TODO: implement
- }
- private void addAndMeasureChild(final View child, int viewPos) {
- LayoutParams params = child.getLayoutParams();
- if(params == null) {
- params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
- }
- addViewInLayout(child, viewPos, params, true);
- child.measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.AT_MOST),
- MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.AT_MOST));
- }
- @Override
- protected synchronized void onLayout(boolean changed, int left, int top, int right, int bottom) {
- super.onLayout(changed, left, top, right, bottom);
- if(mAdapter == null){
- return;
- }
- if(mDataChanged){
- int oldCurrentX = mCurrentX;
- initView();
- removeAllViewsInLayout();
- mNextX = oldCurrentX;
- mDataChanged = false;
- }
- if(mScroller.computeScrollOffset()){
- int scrollx = mScroller.getCurrX();
- mNextX = scrollx;
- }
- if(mNextX <= 0){
- mNextX = 0;
- mScroller.forceFinished(true);
- }
- if(mNextX >= mMaxX) {
- mNextX = mMaxX;
- mScroller.forceFinished(true);
- }
- int dx = mCurrentX – mNextX;
- removeNonVisibleItems(dx);
- fillList(dx);
- positionItems(dx);
- mCurrentX = mNextX;
- if(!mScroller.isFinished()){
- post(new Runnable(){
- @Override
- public void run() {
- requestLayout();
- }
- });
- }
- }
- private void fillList(final int dx) {
- int edge = 0;
- View child = getChildAt(getChildCount()-1);
- if(child != null) {
- edge = child.getRight();
- }
- fillListRight(edge, dx);
- edge = 0;
- child = getChildAt(0);
- if(child != null) {
- edge = child.getLeft();
- }
- fillListLeft(edge, dx);
- }
- private void fillListRight(int rightEdge, final int dx) {
- while(rightEdge + dx < getWidth() && mRightViewIndex < mAdapter.getCount()) {
- View child = mAdapter.getView(mRightViewIndex, mRemovedViewQueue.poll(), this);
- addAndMeasureChild(child, -1);
- rightEdge += child.getMeasuredWidth();
- if(mRightViewIndex == mAdapter.getCount()-1) {
- mMaxX = mCurrentX + rightEdge – getWidth();
- }
- if (mMaxX < 0) {
- mMaxX = 0;
- }
- mRightViewIndex++;
- }
- }
- private void fillListLeft(int leftEdge, final int dx) {
- while(leftEdge + dx > 0 && mLeftViewIndex >= 0) {
- View child = mAdapter.getView(mLeftViewIndex, mRemovedViewQueue.poll(), this);
- addAndMeasureChild(child, 0);
- leftEdge -= child.getMeasuredWidth();
- mLeftViewIndex–;
- mDisplayOffset -= child.getMeasuredWidth();
- }
- }
- private void removeNonVisibleItems(final int dx) {
- View child = getChildAt(0);
- while(child != null && child.getRight() + dx <= 0) {
- mDisplayOffset += child.getMeasuredWidth();
- mRemovedViewQueue.offer(child);
- removeViewInLayout(child);
- mLeftViewIndex++;
- child = getChildAt(0);
- }
- child = getChildAt(getChildCount()-1);
- while(child != null && child.getLeft() + dx >= getWidth()) {
- mRemovedViewQueue.offer(child);
- removeViewInLayout(child);
- mRightViewIndex–;
- child = getChildAt(getChildCount()-1);
- }
- }
- private void positionItems(final int dx) {
- if(getChildCount() > 0){
- mDisplayOffset += dx;
- int left = mDisplayOffset;
- for(int i=0;i<getChildCount();i++){
- View child = getChildAt(i);
- int childWidth = child.getMeasuredWidth();
- child.layout(left, 0, left + childWidth, child.getMeasuredHeight());
- left += childWidth + child.getPaddingRight();
- }
- }
- }
- public synchronized void scrollTo(int x) {
- mScroller.startScroll(mNextX, 0, x – mNextX, 0);
- requestLayout();
- }
- @Override
- public boolean dispatchTouchEvent(MotionEvent ev) {
- boolean handled = super.dispatchTouchEvent(ev);
- handled |= mGesture.onTouchEvent(ev);
- return handled;
- }
- protected boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
- float velocityY) {
- synchronized(HorizontalListView.this){
- mScroller.fling(mNextX, 0, (int)-velocityX, 0, 0, mMaxX, 0, 0);
- }
- requestLayout();
- return true;
- }
- protected boolean onDown(MotionEvent e) {
- mScroller.forceFinished(true);
- return true;
- }
- private OnGestureListener mOnGesture = new GestureDetector.SimpleOnGestureListener() {
- @Override
- public boolean onDown(MotionEvent e) {
- return HorizontalListView.this.onDown(e);
- }
- @Override
- public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
- float velocityY) {
- return HorizontalListView.this.onFling(e1, e2, velocityX, velocityY);
- }
- @Override
- public boolean onScroll(MotionEvent e1, MotionEvent e2,
- float distanceX, float distanceY) {
- synchronized(HorizontalListView.this){
- mNextX += (int)distanceX;
- }
- requestLayout();
- return true;
- }
- @Override
- public boolean onSingleTapConfirmed(MotionEvent e) {
- for(int i=0;i<getChildCount();i++){
- View child = getChildAt(i);
- if (isEventWithinView(e, child)) {
- if(mOnItemClicked != null){
- mOnItemClicked.onItemClick(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId( mLeftViewIndex + 1 + i ));
- }
- if(mOnItemSelected != null){
- mOnItemSelected.onItemSelected(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId( mLeftViewIndex + 1 + i ));
- }
- break;
- }
- }
- return true;
- }
- @Override
- public void onLongPress(MotionEvent e) {
- int childCount = getChildCount();
- for (int i = 0; i < childCount; i++) {
- View child = getChildAt(i);
- if (isEventWithinView(e, child)) {
- if (mOnItemLongClicked != null) {
- mOnItemLongClicked.onItemLongClick(HorizontalListView.this, child, mLeftViewIndex + 1 + i, mAdapter.getItemId(mLeftViewIndex + 1 + i));
- }
- break;
- }
- }
- }
- private boolean isEventWithinView(MotionEvent e, View child) {
- Rect viewRect = new Rect();
- int[] childPosition = new int[2];
- child.getLocationOnScreen(childPosition);
- int left = childPosition[0];
- int right = left + child.getWidth();
- int top = childPosition[1];
- int bottom = top + child.getHeight();
- viewRect.set(left, top, right, bottom);
- return viewRect.contains((int) e.getRawX(), (int) e.getRawY());
- }
- };
- }
- </span>
HorizontalListViewAdapter.java 横向listview的适配器,我将他单独写到一个java文件里。
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”>package org.yanzi.ui;
- import org.yanzi.testhorizontallistview.R;
- import org.yanzi.util.BitmapUtil;
- import android.content.Context;
- import android.graphics.Bitmap;
- import android.graphics.drawable.Drawable;
- import android.media.ThumbnailUtils;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.ImageView;
- import android.widget.TextView;
- public class HorizontalListViewAdapter extends BaseAdapter{
- private int[] mIconIDs;
- private String[] mTitles;
- private Context mContext;
- private LayoutInflater mInflater;
- Bitmap iconBitmap;
- private int selectIndex = -1;
- public HorizontalListViewAdapter(Context context, String[] titles, int[] ids){
- this.mContext = context;
- this.mIconIDs = ids;
- this.mTitles = titles;
- mInflater=(LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);//LayoutInflater.from(mContext);
- }
- @Override
- public int getCount() {
- return mIconIDs.length;
- }
- @Override
- public Object getItem(int position) {
- return 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 = mInflater.inflate(R.layout.horizontal_list_item, null);
- holder.mImage=(ImageView)convertView.findViewById(R.id.img_list_item);
- holder.mTitle=(TextView)convertView.findViewById(R.id.text_list_item);
- convertView.setTag(holder);
- }else{
- holder=(ViewHolder)convertView.getTag();
- }
- if(position == selectIndex){
- convertView.setSelected(true);
- }else{
- convertView.setSelected(false);
- }
- holder.mTitle.setText(mTitles[position]);
- iconBitmap = getPropThumnail(mIconIDs[position]);
- holder.mImage.setImageBitmap(iconBitmap);
- return convertView;
- }
- private static class ViewHolder {
- private TextView mTitle ;
- private ImageView mImage;
- }
- private Bitmap getPropThumnail(int id){
- Drawable d = mContext.getResources().getDrawable(id);
- Bitmap b = BitmapUtil.drawableToBitmap(d);
- // Bitmap bb = BitmapUtil.getRoundedCornerBitmap(b, 100);
- int w = mContext.getResources().getDimensionPixelOffset(R.dimen.thumnail_default_width);
- int h = mContext.getResources().getDimensionPixelSize(R.dimen.thumnail_default_height);
- Bitmap thumBitmap = ThumbnailUtils.extractThumbnail(b, w, h);
- return thumBitmap;
- }
- public void setSelectIndex(int i){
- selectIndex = i;
- }
- }</span>
下面是效果图:
![Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)](http://img.e-com-net.com/image/product/d4ebc8a1d78b4ea9b073d81ba01aca01.jpg)
![Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)](http://img.e-com-net.com/image/product/d4c53131b08b4de48bc1a6d19a86310a.jpg)
![Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)](http://img.e-com-net.com/image/product/fe40ecee5f3a4400a62ee5417d829ccb.jpg)
要点如下:
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:drawable=”@android:color/holo_red_light” android:state_selected=”true”/>
<item android:drawable=”@android:color/holo_green_dark” android:state_pressed=”true”/>
<item android:drawable=”@android:color/transparent”/>
</selector>
- <span style=“font-family: ‘Comic Sans MS'; font-size: 18px;”>// if(olderSelectView == null){
- // olderSelectView = view;
- // }else{
- // olderSelectView.setSelected(false);
- // olderSelectView = null;
- // }
- // olderSelectView = view;
- // view.setSelected(true);</span>
即在click监听里,保存上一个选中的view。遗憾的是这种方法会造成item的选中状态造成混乱,比如第一个item选中了,同时第5个item也莫名其妙的被选中了。上述情况发生在滑动时,即一屏显示不完的情况下。当我横屏时,在所有的item都能一次性显示出来情况下,用上述方法么问题。后来我想到,这可以是适配器里的缓存机制造成的,最好不要再listview适配器外对item作修改,即便修改则一定要调适配器的: hListViewAdapter.notifyDataSetChanged();通知刷新view,毕竟适配器才是view的提供者。参考这位大大的文章:http://longyi-java.iteye.com/blog/976067 在适配器里加了一个接口保存选中的索引,然后再getView函数里进行判断。如果是选中的item,则将布局设为选中状态即可,horizontal_list_item.xml里的Linearlayout就会自动加载那个selector了。而无需像这个参考链接里对每个item的元素分别设置状态。