[原創]自定義控件之AndroidSegmentControlView,仿IOS平臺UISegmentControlView,繼承自View

版權聲明:本文爲博主原創文章,轉載請註明出處。android

控件簡介

UISegmentControl在IOS平臺的App中很是常見,其控件以下圖所示:git

IOS平臺的UISegmentControl

這種控件的主要做用是動態的更改界面的顯示內容,通常應用於內容較多的界面,且分屏顯示不一樣種類的內容。github

      在Android開發過程當中,有時須要實現相似UISegmentControl的效果,這裏我將本身的代碼開源在github上了,命名爲SegmentControlView,下面是實現的效果: 數組

 

項目地址可點擊以下連接: 
https://github.com/Carbs0126/AndroidSegmentControlView微信

 

控件說明

1 SegmentControlView extends View

      這個SegmentControlView是繼承自View的,而非組合控件,所以實現起來雖然有點繁瑣,可是靈活性反而比組合控件要高不少,而且能夠加上過分效果等,且比組合控件更加輕量化。app

控件特色

      我實現的這個SegmentControlView具備以下特色:ide

  1.SegmentControlView可設置與ViewPager聯動,在segment切換時具備顏色漸變效果,相似微信。   2.能夠自定義SegmentControlView的四個corner的半徑。   3.自定義背景顏色與字體顏色、字體大小等等。   4.在xml中設置SegmentControlView中的多個titles,自動按照titles生成多個segment。   5.設置按下顏色與normal顏色的色值對比度。   6.具備AT_MOST的適配功能,即具備wrap_content模式   7.能夠設置回調響應事件

使用方法

屬性文件說明

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

    <declare-styleable name="SegmentControlView">
        <attr name="scv_BackgroundSelectedColor" format="reference|color" />//選中segment的背景顏色
        <attr name="scv_BackgroundNormalColor" format="reference|color" />//未選中segment的背景顏色
        <attr name="scv_TextSelectedColor" format="reference|color" />//選中segment的文字顏色
        <attr name="scv_TextNormalColor" format="reference|color" />//未選中segment的文字顏色
        <attr name="scv_FrameColor" format="reference|color" />//segment邊框的顏色
        <attr name="scv_FrameWidth" format="reference|dimension" />//segment邊框的寬度
        <attr name="scv_FrameCornerRadius" format="reference|dimension" />//segment四個圓角的半徑大小
        <attr name="scv_TextSize" format="reference|dimension" />//文字大小
        <attr name="scv_TextArray" format="reference" />//string數組,每個string都會填充到一個segment中
        <attr name="scv_SelectedIndex" format="reference|integer" />//默認選中的segment
        <attr name="scv_SegmentPaddingHorizontal" format="reference|dimension" />//每個segment內部的水平padding
        <attr name="scv_SegmentPaddingVertical" format="reference|dimension" />每個Segment的豎直方向的padding
        <attr name="scv_Gradient" format="reference|boolean" />//Segment改變時是否使用顏色漸變效果
    </declare-styleable>

</resources>

 

佈局文件建立SegmentControlView

<cn.carbs.android.segmentcontrolview.library.SegmentControlView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        app:scv_FrameCornerRadius="6dp"
        app:scv_FrameWidth="1dp"
        app:scv_Gradient="true"
        app:scv_SegmentPaddingVertical="5dp"
        app:scv_TextArray="@array/segment_control_arrays_0"/>

 

使用方法佈局

dependencies {
    compile 'cn.carbs.android:SegmentControlView:1.0.0'
}
 segmentcontrolview.setOnSegmentChangedListener(new SegmentControlView.OnSegmentChangedListener() {
        @Override
        public void onSegmentChanged(int newSelectedIndex) {
            if(viewpager != null){
                //change the second argument to true if you want the gradient effect when viewpager is changing
                viewpager.setCurrentItem(newSelectedIndex, false);//viewpager changing without animation
            }
        }
    });
    //set viewpager to change segment according to the state of viewpager
    segmentcontrolview.setViewPager(viewpager);
    //set the selected index of segments initiatively
    segmentcontrolview.setSelectedIndex();
    //set gradient effect if you want
    segmentcontrolview.setGradient(true);

項目地址:

https://github.com/Carbs0126/AndroidSegmentControlView字體

Git:

git clone https://github.com/Carbs0126/AndroidSegmentControlView.gitspa

相關文章
相關標籤/搜索