在android上开发项目,如果仅仅是采用默认的样式可能不是很美观,需要编写响应的样式来使界面美观,在iphone上常用的圆角ListView的实现。
本人实现的原理如下:
通过重写ListView中拦截触摸的事件方式,在生成ListView时候根据不同行采用不同的样式。如第一个行,最末一行,和中建行。(特殊的情况下只有一行的时候,四个角均为圆角考虑)。
实现如下:
最后一行为时候,下方两个角为圆角样式如下:
app_list_corner_round_bottom.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient android:startColor="#BFEEFF"
- android:endColor="#40B9FF"
- android:angle="270"/>
- <corners android:bottomLeftRadius="6dip"
- android:bottomRightRadius="6dip" />
- </shape>
第一行为圆角且仅仅为一条记录使用样式:
app_list_corner_round.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient android:startColor="#BFEEFF"
- android:endColor="#40B9FF"
- android:angle="270"/>
- <corners android:topLeftRadius="6dip"
- android:topRightRadius="6dip"
- android:bottomLeftRadius="6dip"
- android:bottomRightRadius="6dip"/>
- </shape>
第一行为圆角且有多条记录使用样式:
app_list_corner_round_top.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient android:startColor="#BFEEFF"
- android:endColor="#40B9FF"
- android:angle="270"/>
- <corners android:topLeftRadius="6dip"
- android:topRightRadius="6dip"/>
- </shape>
多行记录非第一行和最末一行使用的样式:
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient android:startColor="#BFEEFF"
- android:endColor="#40B9FF"
- android:angle="270"/>
- </shape>
重写的ListView
- package com.easyway.listview.corner;
- import android.content.Context;
- import android.util.AttributeSet;
- import android.view.MotionEvent;
- import android.widget.AdapterView;
- import android.widget.ListView;
- /**
- * 圆角ListView
- * 重写ListView的样式实现相关的样式
- * app_list_corner_round_top.xml
- * <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <gradient android:startColor="#BFEEFF"
- android:endColor="#40B9FF"
- android:angle="270"/>
- <corners android:topLeftRadius="6dip"
- android:topRightRadius="6dip"/>
- </shape>
- *
- * android:shape 配置的是图形的形式,主要包括方形、圆形等,上边代码为方形。
- * gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度(90度为上下渐变,0为左右渐变),
- * padding节点主要配置上下左右边距,
- * corners节点配置四周园角的半径。
- *
- *
- * @Title:
- * @Description: 实现TODO
- * @Copyright:Copyright (c) 2011
- * @Company:易程科技股份有限公司
- * @Date:2012-7-16
- * @author longgangbai
- * @version 1.0
- */
- public class CornerListView extends ListView {
- public CornerListView(Context context) {
- super(context);
- }
- public CornerListView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- }
- public CornerListView(Context context, AttributeSet attrs) {
- super(context, attrs);
- }
- /**
- * 重写此方式实现不同行的样式不一样
- *
- */
- @Override
- public boolean onInterceptTouchEvent(MotionEvent ev) {
- switch (ev.getAction()) {
- //
- case MotionEvent.ACTION_DOWN:
- int x = (int) ev.getX();
- int y = (int) ev.getY();
- //返回记录数据行数
- int itemnum = pointToPosition(x, y);
- if (itemnum == AdapterView.INVALID_POSITION)
- break;
- else{
- if(itemnum==0){
- if(itemnum==(getAdapter().getCount()-1)){
- setSelector(R.drawable.app_list_corner_round); //仅仅一行记录的样式
- }else{
- setSelector(R.drawable.app_list_corner_round_top); //多行且第一行的样式
- }
- }else if(itemnum==(getAdapter().getCount()-1)) //最后一行的样式
- setSelector(R.drawable.app_list_corner_round_bottom);
- else{
- setSelector(R.drawable.app_list_corner_shape);
- }
- }
- break;
- case MotionEvent.ACTION_UP:
- break;
- }
- return super.onInterceptTouchEvent(ev);
- }
- }
主要布局类main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:id="@+id/listview_layout"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <LinearLayout
- android:id="@+id/linearLayout1"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="vertical"
- android:paddingBottom="5dp"
- android:paddingLeft="25dp"
- android:paddingTop="15dp" >
- <TextView
- android:id="@+id/menu_1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="@string/setting"
- android:textColor="@color/gray" />
- </LinearLayout>
- <com.easyway.listview.corner.CornerListView
- android:id="@+id/list1"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginLeft="15dp"
- android:layout_marginRight="15dp"
- android:background="@drawable/shape_bg_listview"
- android:cacheColorHint="@null"/>
- </LinearLayout>
每行的布局:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <RelativeLayout
- android:id="@+id/relativeLayout1"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:paddingBottom="10dip"
- android:paddingLeft="15dip"
- android:paddingRight="5dip"
- android:paddingTop="10dip" >
- <TextView
- android:id="@+id/item_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentLeft="true"
- android:layout_alignParentTop="true"
- android:textColor="@color/gray"
- android:textSize="15sp" />
- <ImageView
- android:id="@+id/imageView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentRight="true"
- android:layout_centerVertical="true"
- android:layout_marginRight="16dp"
- android:src="@drawable/right" />
- </RelativeLayout>
- </LinearLayout>
主要类:
- package com.easyway.listview.corner;
- import java.util.ArrayList;
- import java.util.HashMap;
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.View;
- import android.widget.AdapterView;
- import android.widget.AdapterView.OnItemClickListener;
- import android.widget.LinearLayout;
- import android.widget.SimpleAdapter;
- /**
- * Android实现圆角ListView示例
- * 实现圆角ListView原理主要采用添加相关的样式布局。
- * 通过重写ListView中特定的方法
- * 拦截触摸事件的方法。
- * public boolean onInterceptTouchEvent(MotionEvent ev)
- * 根据横轴坐标计算行数,并实现
- *
- * @Title:
- * @Description: 实现TODO
- * @Copyright:Copyright (c) 2011
- * @Company:易程科技股份有限公司
- * @Date:2012-7-16
- * @author longgangbai
- * @version 1.0
- */
- public class RoundCornerActivity extends Activity {
- private CornerListView cornerListView = null;
- private ArrayList<HashMap<String, String>> maplist = null;
- private LinearLayout linearLayout;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- //设置布局
- setContentView(R.layout.main);
- //获取布局对象
- linearLayout=(LinearLayout)findViewById(R.id.listview_layout);
- //设置壁纸为背景图片
- linearLayout.setBackgroundDrawable(getWallpaper());
- //获取初始化数据
- maplist=getData();
- //创建一个适配器对象
- SimpleAdapter adapter1 = new SimpleAdapter(this, maplist,
- R.layout.simple_list_item_1, new String[] { "item" },
- new int[] { R.id.item_title });
- //创建ListView对象
- cornerListView = (CornerListView) findViewById(R.id.list1);
- //设置适配器
- cornerListView.setAdapter(adapter1);
- initListener();
- }
- private void initListener() {
- //添加响应时间
- cornerListView.setOnItemClickListener(new OnItemClickListener() {
- @Override
- public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
- long arg3) {
- if (arg2 == 0) {
- System.out.println("0");
- }else{
- System.out.println("1");
- }
- }
- });
- }
- /**
- * 模拟数据
- * @return
- */
- public ArrayList<HashMap<String, String>> getData() {
- maplist = new ArrayList<HashMap<String, String>>();
- HashMap<String, String> map1 = new HashMap<String, String>();
- HashMap<String, String> map2 = new HashMap<String, String>();
- HashMap<String, String> map3 = new HashMap<String, String>();
- HashMap<String, String> map4 = new HashMap<String, String>();
- map1.put("item", "公交");
- map2.put("item", "火车");
- map3.put("item", "地铁");
- map4.put("item", "航空");
- maplist.add(map1);
- maplist.add(map2);
- maplist.add(map3);
- maplist.add(map4);
- return maplist;
- }
- }