Android控件GridView之仿支付宝钱包首页带有分割线九宫格实现
代码清晰,分包来实现。解耦。。
MainActivity的布局
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <ScrollView
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:fillViewport="true"
- android:scrollbars="none" >
- <com.finddreams.alipay.MyGridView
- android:id="@+id/gridview"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:horizontalSpacing="0.0dip"
- android:listSelector="@null"
- android:numColumns="3"
- android:scrollbars="none"
- android:stretchMode="columnWidth"
- android:verticalSpacing="0.0dip" />
- </ScrollView>
- </LinearLayout>
当gridView或listView被srollview嵌套时,只会显示第一行数据,这时
- public class MyGridView extends GridView {
- public MyGridView(Context context, AttributeSet attrs) {
- super(context, attrs);
- }
- public MyGridView(Context context) {
- super(context);
- }
- public MyGridView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- }
- @Override
- public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
- MeasureSpec.AT_MOST);
- super.onMeasure(widthMeasureSpec, expandSpec);
- }
- }
重写onMeasure方法。。。。解决。。。
定义item分割线背景布局在drawable下selector.xml。
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true"><shape android:shape="rectangle">
- <stroke android:width="1.0px" android:color="@color/line" />
- <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />
- </shape></item>
- <item android:state_focused="true"><shape android:shape="rectangle">
- <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />
- <stroke android:width="1.0px" android:color="@color/line" />
- </shape></item>
- <item><shape android:shape="rectangle">
- <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />
- <stroke android:width="1.0px" android:color="@color/line" />
- </shape></item>
- </selector>
item_gridView布局
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_margin="0.0dip"
- android:background="@color/griditems_bg" >
- <RelativeLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_centerInParent="true"
- android:background="@drawable/bg_gv"
- android:padding="12.0dip" >
- <ImageView
- android:id="@+id/iv_item"
- android:layout_width="58.0dip"
- android:layout_height="58.0dip"
- android:layout_centerHorizontal="true"
- android:contentDescription="@string/app_name" />
- <TextView
- android:id="@+id/tv_item"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/iv_item"
- android:layout_centerHorizontal="true"
- android:layout_marginTop="5.0dip"
- android:maxLines="1"
- android:textColor="@color/commo_text_color"
- android:textSize="14.0sp" />
- </RelativeLayout>
- </RelativeLayout>
其中第一个relativelayout的background为灰色,第二个为selector.xml。。。
其中ViewHolder优化
public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder = null; //如果缓存convertView为空,则需要创建View if(convertView == null) { holder = new ViewHolder(); //根据自定义的Item布局加载布局 convertView = LayoutInflater.from(context).inflate(R.layout.item_gridview, null); holder.img = (ImageView)convertView.findViewById(R.id.iv_item); holder.title = (TextView)convertView.findViewById(R.id.tv_item); //将设置好的布局保存到缓存中,并将其设置在Tag里,以便后面方便取出Tag convertView.setTag(holder); }else { holder = (ViewHolder)convertView.getTag(); } holder.img.setBackgroundResource(imgs[position]); holder.title.setText(img_text[position]); return convertView; }
ViewHolder代码简单
public class ViewHolder { public ImageView img; public TextView title; }