九、自定义Tab

左手的ㄟ右手 2022-09-25 04:27 108阅读 0赞

现在流行的主界面都是底部有几个tab，点击切换到不同的页面，下面我们自定义这个tab控件。

采用最简单的自定义控件的方法，继承自android自带控件，继承LinearLayout即可满足要求。

public class KengTabHost extends LinearLayout implements View.OnClickListener{
    
        private int tabNum;
    
        private KengTabListener mTabListener;
    
        public KengTabHost(Context context) {
            super(context);
        }
    
        public KengTabHost(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public KengTabHost(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
            tabNum = getChildCount();
            for (int i=0; i<tabNum; i++) {
                View view = getChildAt(i);
                view.setTag(i);
                view.setOnClickListener(this);
            }
        }
    
        @Override
        public void onClick(View v) {
            int index = (int) v.getTag();
            if (mTabListener != null) {
                mTabListener.onTabChanged(index);
            }
            for (int i=0; i<tabNum; i++) {
                if (i == index) {
                    // 点击项
                    v.setSelected(true);
                } else {
                    // 非点击项
                    getChildAt(i).setSelected(false);
                }
            }
        }
    
        public void setTabListener(KengTabListener mTabListener) {
            this.mTabListener = mTabListener;
        }
    
        /**
         * 单击回调接口
         */
        public interface KengTabListener {
            void onTabChanged(int position);
        }
    }

主要实现内容是单击时改变选中项，其他项设置为非选中状态，还有单击回调。

在布局文件中使用：

<com.hy.keng.ui.widget.tab.KengTabHost
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingTop="2dp"
            android:background="#f2f2f2">
    
            <TextView
                android:id="@+id/tv_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/home"
                android:gravity="center"
                android:textColor="@drawable/main_font_selector"
                android:textSize="@dimen/font_smallest"
                android:drawableTop="@drawable/main_home_selector" />
    
            <TextView
                android:id="@+id/tv_contact"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/contact"
                android:gravity="center"
                android:textColor="@drawable/main_font_selector"
                android:textSize="@dimen/font_smallest"
                android:drawableTop="@drawable/main_contact_selector" />
    
            <TextView
                android:id="@+id/tv_dynamic"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/dynamic"
                android:gravity="center"
                android:textColor="@drawable/main_font_selector"
                android:textSize="@dimen/font_smallest"
                android:drawableTop="@drawable/main_dynamic_selector" />
    
            <TextView
                android:id="@+id/tv_me"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/me"
                android:gravity="center"
                android:textColor="@drawable/main_font_selector"
                android:textSize="@dimen/font_smallest"
                android:drawableTop="@drawable/main_me_selector" />
    
        </com.hy.keng.ui.widget.tab.KengTabHost>

可以看到我放置了4个子控件选项。

效果图如下：

![Center][]

[Center]: /images/20220718/0d5425beb9c2418e8f87c2abbc72496f.png