android自定义TabView实现圆角列表

看到很多应用的设置界面都有圆角效果的列表,类似下面的

下面说说我的实现原理:继承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);
                    }
                }
            });
        }
    }
}
View Code

最后有一点,对于整个最外层的圆角背景是使用inset,那样自动加入了分隔线效果

整个项目在github上面, 需要的可以clone和fok。。。

posted @ 2013-07-29 16:01  流星剑  阅读(4534)  评论(0编辑  收藏  举报