看到很多应用的设置界面都有圆角效果的列表,类似下面的
下面说说我的实现原理:继承LinearLayout,然后设置一个自定义的TabAdapter,类似于listview,添加一个setAdapter()方法,这个方法就是将子视图加入,然后设置背景选择器效果;还可以添加风格不同的视图,通过addview方法,最后一定要调用commit方法,设置子视图的背景,对于背景有三种情况,中间项四角都是圆角,顶部圆角和顶部圆角效果
自定义TabAdapter抽象类,是要继承即可:
package com.allen.tabview; import android.view.View; /** * @package:com.allen.tabview * @author:Allen * @email:jaylong1302@163.com * @data:2013-7-26 下午2:49:51 * @description:适配器 */ public abstract class TabAdapter { public abstract int getCount(); public abstract Object getItem(int position); public abstract View getView(int position); }
接下来是自定义的TabView
package com.allen.tabview; import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; /** * @package:com.allen.tabview * @author:Allen * @email:jaylong1302@163.com * @data:2013-7-26 下午2:48:36 * @description:圆角表格 */ public class TabView extends LinearLayout { TabAdapter adapter; /** 子视图数量 */ int size = 0; public TabView(Context context) { super(context); init(); } public TabView(Context context, AttributeSet attrs) { super(context, attrs); init(); } void init() { this.setOrientation(LinearLayout.VERTICAL); this.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS); this.setBackgroundResource(R.drawable.background_view_rounded_container); } /** 设置适配器 */ public void setAdapter(TabAdapter adapter) { this.adapter = adapter; // 遍历当前的adapter if (adapter != null) { size = adapter.getCount(); for (int i = 0; i < size; i++) { View child = adapter.getView(i); this.addView(child); } commit(); } } @Override public void addView(View child) { // TODO Auto-generated method stub super.addView(child); child.setClickable(true); } /** 调用addView之后执行的方法 */ public void commit() { int len = this.getChildCount(); if (len > 1) {// 多项内容 for (int i = 0; i < len; i++) { View child = this.getChildAt(i); if (i == 0) {// 顶部 child.setBackgroundResource(R.drawable.background_view_rounded_top); } else if (i > 0 && i < len - 1) {// 中间 child.setBackgroundResource(R.drawable.background_view_rounded_middle); } else if (i == len - 1) {// 底部 child.setBackgroundResource(R.drawable.background_view_rounded_bottom); } } } else if (len == 1) {// 一项内容 View child = this.getChildAt(0); child.setBackgroundResource(R.drawable.background_view_rounded_single); } } public interface TabItemClickListener { void onClick(int position, View v); } TabItemClickListener itemClick; public void setOnItemClickListener(final TabItemClickListener itemClick) { this.itemClick = itemClick; // 绑定监听事件 for (int i = 0; i < size; i++) { final int index = i; View childView = this.getChildAt(i); childView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub if (itemClick != null) { itemClick.onClick(index, v); } } }); } } }
最后有一点,对于整个最外层的圆角背景是使用inset,那样自动加入了分隔线效果
整个项目在github上面, 需要的可以clone和fok。。。