首先呢,我们还是看几个示图:(这是360推出的一款天气预报APP(墨迹),很不错的一款哦,这里为她们做一个免费广告,哈哈.)
这种带有圆角的listview' 看起来很棒吧,确实是这样,其实也不能这么说,主要方形太多了,斯通见惯就不值钱了,“物以稀为贵嘛”. 就好比学java都搞androd,很明显嘛,为了多赚点钱,可是供过于求的话,就不这么乐观了,就好比现在这个圆角,如果太多太多的话,我想若干时间段,肯定会被新的视图所代替.所以“跟随潮流,放宽眼线”很重要.不扯了,(网上实现例子很多)下面简单介绍下实现方法:(两种方法)
第一种:我们通过配置文件也就是shape自己实现圆角的背景,以及selector选中某项的背景.
首先我们要实现一个完整的圆角背景,用于默认与listview的background.
<?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.
<?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及选中的效果.
代码片段:
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,
实现方法:
/***
* 动态设置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,哈哈,下面介绍下实现:
配置文件部分代码:
<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.
实现代码:
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
<?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
<?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
<?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
<?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了.
有不足的地方请留言指出.
分享到:
相关推荐
Android ListView边框圆角美化,可以用来仿iphone的个别界面。相当有用。美观。
android listview实现圆角。 有注释能看懂。
android ListView圆角显示的效果
Android实现iphone圆角ListView和点击的效果 Android实现iphone圆角ListView和点击的效果
android listview 圆角的实现方案,模仿Iphone的UITableView 对应的工程
Android为ListView添加圆角边框效果,安卓UI设计的例子,默认情况下ListView的外框是直角的,也就是大家习惯的样式,但为了美化更突出,或者与你的应用风格更吻合,有时候可能修饰成圆角边框,本例子就是实现了这一...
android listview嵌套listview实现折叠列表
博客的ListView的圆角的效果的代码资源
Android ListView实现各种版面设计功能 源码
android 布局中网格视图 ListView的简单运用 采用的是最简单的ArrayAdapter适配器
android用Listview实现时间轴的效果
Android ListView 实现分批加载
通过自定义listView实现表格,动态添加行列
用ListView组件实现树形结构 主界面是继承Activity类 而不像网络上大多数都是继承ListActivity类
使用实现ListView实现微信好友列表 android ListView 微信 好友列表 自定义ImageView 自定义ListView
Android listview viewpager 滑动 跳动 冲突解决 ListView中嵌套ViewPage有或者滑动手势冲突解决 blog 地址 : http://blog.csdn.net/aaawqqq/article/details/43824631
Android使用ListView实现时间轴
android studio实现listview的增加,左滑删除 listview以表格样式实现
Android ListView分类实现 - 第二种实现方式