您的位置:首页 > 移动开发 > Android开发

android ListView实现圆角(两种解决方案)

2013-07-13 00:48 225 查看
首先呢,我们还是看几个示图:(这是360推出的一款天气预报APP(墨迹),很不错的一款哦,这里为她们做一个免费广告,哈哈.)

[java] view
plaincopy







这种带有圆角的listview' 看起来很棒吧,确实是这样,其实也不能这么说,主要方形太多了,斯通见惯就不值钱了,“物以稀为贵嘛”. 就好比学java都搞androd,很明显嘛,为了多赚点钱,可是供过于求的话,就不这么乐观了,就好比现在这个圆角,如果太多太多的话,我想若干时间段,肯定会被新的视图所代替.所以“跟随潮流,放宽眼线”很重要.不扯了,(网上实现例子很多)下面简单介绍下实现方法:(两种方法)

第一种:我们通过配置文件也就是shape自己实现圆角的背景,以及selector选中某项的背景.

首先我们要实现一个完整的圆角背景,用于默认与listview的background.

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<stroke

android:width="1dp"

android:color="@color/gray" />

<solid android:color="@color/white" />

<corners android:radius="8dp" />

</shape>

接下来我们要实现也就是listview的第一项selector后背景的shape.

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<stroke

android:width="1dp"

android:color="@color/gray" />

<solid android:color="@color/gray" />

<corners

android:topLeftRadius="8dp"

android:topRightRadius="8dp" />

</shape>

下面呢,我们也要实现中间的shape,以及末尾的shape等等配置.这里就不写了.按照上面模仿就ok了.

第二种方法:我们用.9.png完全代替上面那些配置,(因为.9.png可以拉伸不毁容

所以listview的第一项,中间项,最后一项,以及就一项,我们都可以通过图片来实现.

这里我运用第一种方法:(也巩固下shape)

创建自定义的listview,用于实现setSelector及选中的效果.

代码片段:

[java] view
plaincopy

package com.jj.listview;

import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.widget.AdapterView;

import android.widget.ListView;

/***

* 自定义listview

*

* @author Administrator

*

*/

public class MyListView extends ListView {

public MyListView(Context context) {

super(context);

}

public MyListView(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.list_round);

} else {

// 第一项

setSelector(R.drawable.list_top_round);

}

} else if (itemnum == (getAdapter().getCount() - 1))

// 最后一项

setSelector(R.drawable.list_bottom_round);

else {

// 中间项

setSelector(R.drawable.list_center_round);

}

}

break;

case MotionEvent.ACTION_UP:

break;

}

return super.onInterceptTouchEvent(ev);

}

}

这段代码网上很多,几乎全部都是这么实现的,这里我简单介绍,如果说错了,请大家指出,

首先我们是实现了onInterceptTouchEvent这个方法,在这里我们也可以用onTouchEvent事件,都可以实现我们想要的效果.

onInterceptTouchEvent和onTouchEvent的区别:简单的来说前者可以拦截后者.

详细的请大家参考http://blog.csdn.net/jj120522/article/details/7944916 强烈建议大家看看.

下面一些逻辑虽说没有见过,我想大家都看得懂,(就是获取坐标(x,y),然后根据坐标获取listview相应的position值,没有返回-1,然后根据相应的position设置相应的setSelector ).有时间得好好研究下listview.对灵活运用很有帮助.

在这里我还要在说名一点,上面那个图形很显然不是一个listview,是三个listview,另外重要的是我们一个屏幕显示不完全,这时我们就用到了ScrollView,一提到这个我想大家都知道ScrollView和listview是冤家,不可能同时存在,不过网上有解决办法,原理就是我们动态show 我们的listview,

实现方法:

[java] view
plaincopy

/***

* 动态设置listview的高度

*

* @param listView

*/

public void setListViewHeightBasedOnChildren(ListView listView) {

ListAdapter listAdapter = listView.getAdapter();

if (listAdapter == null) {

return;

}

int totalHeight = 0;

for (int i = 0; i < listAdapter.getCount(); i++) {

View listItem = listAdapter.getView(i, null, listView);

listItem.measure(0, 0);

totalHeight += listItem.getMeasuredHeight();

}

ViewGroup.LayoutParams params = listView.getLayoutParams();

params.height = totalHeight

+ (listView.getDividerHeight() * (listAdapter.getCount() - 1));

// params.height += 5;// if without this statement,the listview will be

// a

// little short

// listView.getDividerHeight()获取子项间分隔符占用的高度

// params.height最后得到整个ListView完整显示需要的高度

listView.setLayoutParams(params);

}

我们在Listview的setAdapter后,在调用下这个方法就OK了,代码内容,我想大家都看的明白,就不多介绍了.

效果图:







样子虽丑陋了点,但是实现效果就行了,如果在项目中就另当别论了。

哈哈,实现起来简单吧,睡觉去.

下面介绍另外一种解决方法:(TableLayout)

/************************************************************************************************************************************/

对于简短的listview,加上如上面这些比较死的数据,我们完全没有必要用listview来实现,TableLout完全够了.主要是我们怎么实现带有弧度的边罢了,不过这也完全得力于shape的功劳,至于点击效果效果嘛,我们有selector,哈哈,下面介绍下实现:

配置文件部分代码:

[java] view
plaincopy

<ScrollView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="none" >

<LinearLayout

android:id="@+id/ll_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:orientation="vertical"

android:paddingLeft="10dp"

android:paddingRight="10dp" >

</LinearLayout>

</ScrollView>

很简单,我们主要用这个Linerlayout来呈放我们的Table.

实现代码:

[java] view
plaincopy

package com.jj.corner;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.Map;

import android.R.color;

import android.app.Activity;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.view.Window;

import android.widget.ArrayAdapter;

import android.widget.LinearLayout;

import android.widget.ListAdapter;

import android.widget.ListView;

import android.widget.RelativeLayout;

import android.widget.SimpleAdapter;

import android.widget.TableLayout;

import android.widget.TableRow;

import android.widget.TextView;

public class MainActivity2 extends Activity {

private LinearLayout ll_main;

private TableLayout tableLayout;

private LinearLayout.LayoutParams layoutParams;

private static final String MSG_0[] = { "jjhappyforever" };

private static final String MSG_1[] = { "天气动画", "通知栏天气" };

private static final String MSG_2[] = { "桌面插件", "绑定微博", "天气分享", "通知与提示",

"定时播报" };

private static final String MSG_3[] = { "检查新版本", "发送建议", "帮助", "关于" };

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.main2);

ll_main = (LinearLayout) findViewById(R.id.ll_main);

showTable();

}

/***

* 显示table

*/

public void showTable() {

layoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT);

layoutParams.bottomMargin = 30;

layoutParams.topMargin = 10;

ll_main.addView(getTable(MSG_0), layoutParams);

ll_main.addView(getTable(MSG_1), layoutParams);

ll_main.addView(getTable(MSG_2), layoutParams);

ll_main.addView(getTable(MSG_3), layoutParams);

}

/***

* 获取Table

*

* @param array

* @return

*/

public TableLayout getTable(String[] array) {

tableLayout = new TableLayout(this);

tableLayout.setLayoutParams(layoutParams);

tableLayout.setStretchAllColumns(true);

for (int i = 0; i < array.length; i++) {

TableRow tableRow = new TableRow(this);

View view = getView(array[i], i, array.length);

tableRow.addView(view);

tableLayout.addView(tableRow);

}

return tableLayout;

}

/****

*

* @param msg

* 显示信息

* @param current_Id

* 当前个数

* @param totle_Num

* 总个数

* @return

*/

public View getView(String msg, int current_Id, int totle_Num) {

LinearLayout linearLayout = new LinearLayout(this);

LinearLayout.LayoutParams layoutParams1 = new LinearLayout.LayoutParams(

LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

layoutParams1.height = 1;

linearLayout.setOrientation(1);

// 创建分割线

View line = new View(this);

line.setLayoutParams(layoutParams1);

line.setBackgroundColor(getResources().getColor(R.color.black));

View view = LayoutInflater.from(MainActivity2.this).inflate(

R.layout.item, null);

view.setBackgroundDrawable(new BitmapDrawable());

view.setFocusable(true);

view.setClickable(true);

TextView textView = (TextView) view.findViewById(R.id.tv_list_item);

textView.setText(msg);

textView.setTextSize(20);

// 只有一项

if (totle_Num == 1) {

view.setBackgroundResource(R.drawable.default_selector);

return view;

}

// 第一项

else if (current_Id == 0) {

view.setBackgroundResource(R.drawable.list_top_selector);

}

// 最后一项

else if (current_Id == totle_Num - 1) {

view.setBackgroundResource(R.drawable.list_bottom_selector);

line.setVisibility(View.GONE);

} else

view.setBackgroundResource(R.drawable.list_center_selector);

linearLayout.addView(view);

linearLayout.addView(line);

return linearLayout;

}

}

主要是getView有些复杂,不过都很好理解,相信大家都可以明白,只是没有动手做而已,小弟我只是想用这个练练手.

不过不要忘记我们的背景实现

这个是只有一项的背景,

default_selector.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<item android:state_pressed="true"><shape>

<stroke android:width="1dp" android:color="@color/gray" />

<solid android:color="@color/gray" />

<corners android:radius="8dp" />

</shape></item>

<item><shape>

<stroke android:width="1dp" android:color="@color/gray" />

<solid android:color="@color/white" />

<corners android:radius="8dp" />

</shape></item>

</selector>

list_top_selector.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<item android:state_pressed="true"><shape>

<stroke android:width="1dp" android:color="@color/gray" />

<solid android:color="@color/gray" />

<corners android:topLeftRadius="8dp" android:topRightRadius="8dp" />

</shape></item>

<item><shape>

<solid android:color="@color/white" />

<corners android:topLeftRadius="8dp" android:topRightRadius="8dp" />

</shape></item>

</selector>

list_bottom_selector.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<item android:state_pressed="true"><shape>

<stroke android:width="1dp" android:color="@color/gray" />

<solid android:color="@color/gray" />

<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />

</shape></item>

<item><shape>

<solid android:color="@color/white" />

<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />

</shape></item>

</selector>

list_center_selector.xml

[java] view
plaincopy

<?xml version="1.0" encoding="utf-8"?>

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

<item android:state_pressed="true"><shape>

<stroke android:width="1dp" android:color="@color/gray" />

<solid android:color="@color/gray" />

</shape></item>

<item><shape>

<solid android:color="@color/white" />

</shape></item>

</selector>

主要就这么多了,下面我们来看下实现效果:







怎么样,效果和上面一样吧,自我感觉这样实现比上面方面点,不过最重要的是因人而异,达成目的就OK了.

有不足的地方请留言指出.

源码下载
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: