码迷,mamicode.com
首页 > 移动开发 > 详细

Android只有一行的GridView

时间:2014-08-07 18:08:20      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   color   java   使用   os   

前段时间因为项目需要,需要一个只有一行的GridView,而且当一行内容较多的时候,可以左右滑动。一开始想到使用Gallery,但是现在已经过时了。于是决定自定义一个。

 

基本思路是用一个HorizonScrollView包住一个GridView,然后根据数据的长度,动态计算GridView的宽度。

 

先看下效果:

bubuko.com,布布扣

 

具体实现如下:

 

首先是布局文件

 

bubuko.com,布布扣
<?xml version="1.0" encoding="utf-8"?>

 <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"

         android:id="@+id/grid_view_container"

         android:layout_width="match_parent"

         android:layout_height="match_parent" >

 

         <LinearLayout

                    android:layout_width="match_parent"

                 android:layout_height="wrap_content">

                 <GridView

                          android:id="@+id/grid_view"

                          android:layout_width="match_parent"

                          android:layout_height="wrap_content"

                     android:gravity="center"/>

         </LinearLayout>

         

 </HorizontalScrollView>
View Code

 

然后在Activity中加载GridView所需要填充的数据并动态设置他的宽度

bubuko.com,布布扣
         oneRowGridView = (GridView) findViewById(R.id.grid_view);

         oneRowGridView.setOnItemClickListener(this);

         

         GetDataAsyncTask getDataAsyncTask = new GetDataAsyncTask();

         getDataAsyncTask.execute(this.getApplicationContext());
View Code

 

这里使用一个AsyncTask来加载数据,因为一般来说数据加载是一个比较耗时的操作,如果在Android UI线程直接加载,可能会阻塞UI线程,带来不好的用户体验。AsyncTask详细代码如下:

bubuko.com,布布扣
     private class GetDataAsyncTask extends AsyncTask<Context, Void, LinkedList<OneRowGridItem>> {

         private Context context;

         

         @Override

         protected LinkedList<OneRowGridItem> doInBackground(Context... arg0) {

             LinkedList<OneRowGridItem> dataList = new LinkedList<OneRowGridItem>();

             this.context = arg0[0];

             

             OneRowGridItem itemKfc = new OneRowGridItem();

             itemKfc.setText("kfc");

             itemKfc.setImage(context.getResources().getDrawable(R.drawable.kfc));

             dataList.add(itemKfc);

             

             //为了方便,此处直接加载drawable下面图片

             

             return dataList;

         }

 

         @Override

         protected void onPostExecute(LinkedList<OneRowGridItem> result) {

             oneRowGridAdapter = new OneRowGridAdapter(context, result);

             oneRowGridView.setAdapter(oneRowGridAdapter);

             

             int itemWidth = (int)(70 * context.getResources().getDisplayMetrics().density);

             int itemSize = result.size();

             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(itemSize * itemWidth, LinearLayout.LayoutParams.WRAP_CONTENT);

             oneRowGridView.setLayoutParams(params);

             oneRowGridView.setNumColumns(itemSize);

             

         }

         

     }
View Code

 

可以看到在onPostExecute方法中,动态设置了GridView的宽度,以保证一行显示OneRowGridAdapter是自定义了GridView中每个Item的显示。

bubuko.com,布布扣
package com.cchen.myviews;

 

import android.content.Context;

import android.graphics.Color;

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 java.util.LinkedList;

import java.util.List;

 

/**

* Created by cchen on 2014/7/24.

*/

public class OneRowGridAdapter extends BaseAdapter {

        private List<OneRowGridItem> itemList = new LinkedList<OneRowGridItem>();

        private Context context;

        private int selectedItemIndex = -1;

 

        public OneRowGridAdapter(Context context, List<OneRowGridItem> categoryIconList) {

                this.itemList = categoryIconList;

                this.context = context;

        }

 

        public void setSelection(int index) {

                this.selectedItemIndex = index;

                this.notifyDataSetChanged();

        }

 

        public int getSelection() { return this.selectedItemIndex; }

 

        @Override

        public int getCount() {

                return itemList.size();

        }

 

        @Override

        public Object getItem(int position) {

                return itemList.get(position);

        }

 

        @Override

        public long getItemId(int position) {

                return position;

        }

 

        @Override

        public View getView(int position, View convertView, ViewGroup parent) {

                convertView = LayoutInflater.from(context).inflate(R.layout.one_row_grid_item, null);

                ImageView imageView = (ImageView) convertView.findViewById(R.id.one_row_grid_item_image);

                imageView.setImageDrawable(itemList.get(position).getImage());

                TextView textView = (TextView) convertView.findViewById(R.id.one_row_grid_item_text);

                textView.setText(itemList.get(position).getText());

 

                if(position == selectedItemIndex) {

                        convertView.setBackgroundColor(context.getResources().getColor(R.color.one_row_grid_item_bg));

                } else {

                        convertView.setBackgroundColor(Color.TRANSPARENT);

                }

 

                return convertView;

        }

}
View Code

 

其中,R.layout.one_row_grid_item就是没一个Item的布局文件。可以看到新添加了一个selectedItemIndex,这是为了实现在某个Item选中的时候,改变他的背景颜色,使得该Item突出显示。虽然可以使用selector定义Item选中和未选中时候的样式,但那只限于手指接触到该控件,手指离开时,会恢复到初始样式。Item的布局如下:

bubuko.com,布布扣
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/one_row_grid_item"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        android:gravity="center" >

        

        <ImageView

                android:id="@+id/one_row_grid_item_image"

                android:src="@drawable/kfc"

                android:layout_width="70dp"

                android:layout_height="70dp"

                android:duplicateParentState="true"/>

 

        <TextView

                android:id="@+id/one_row_grid_item_text"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:duplicateParentState="true"

                android:ellipsize="end"

                android:singleLine="true"

                android:textColor="#ff000000"

                android:textSize="16sp"

                android:text="@string/kfc"

                android:layout_gravity="center"/>

 

</LinearLayout>
View Code

 

这样我们就基本实现了一行显示的GridView,至于他的事件可以参考GridView的事件处理,这里需要提示下,在GridViewOnItemClickListeneronClick方法中,需要调用adaptorsetSelection以改变选中Item的背景颜色。

Android只有一行的GridView,布布扣,bubuko.com

Android只有一行的GridView

标签:android   style   blog   http   color   java   使用   os   

原文地址:http://www.cnblogs.com/cchen/p/3897473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!