การใช้ไลบรารี SegmentedButton กับ ViewPager

ยังทดสอบแล้วไม่แสดง Segmented Button ไว้ค่อยลองใหม่ (ดูมีโปรเจ็สก์ที่ใช้ SegmentedButton แล้วใช้ได้อยู่)

สร้าง Fragment1 – Fragment3 ตามตัวอย่างนี้ การใช้ไลบรารี PageIndicatorView

build.gradle (Project: MyApplication)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

repositories {

google()

jcenter()

}

dependencies {

classpath 'com.android.tools.build:gradle:3.1.4'

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

allprojects {

repositories {

google()

jcenter()

maven { url "https://jitpack.io" }

}

task clean(type: Delete) {

delete rootProject.buildDir

}

build.gradle (Module: app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.phaisarn.myapplication"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-rc02'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    implementation 'com.android.support:support-v4:28.0.0-rc02'
    implementation 'com.github.ceryle:SegmentedButton:v2.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 28

defaultConfig {

applicationId "com.phaisarn.myapplication"

minSdkVersion 21

targetSdkVersion 28

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:28.0.0-rc02'

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

implementation 'com.android.support:support-v4:28.0.0-rc02'

implementation 'com.github.ceryle:SegmentedButton:v2.0.2'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

}

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="SegmentedButtonStyle">
        <item name="android:textColor">#00f</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingTop">7dp</item>
        <item name="android:paddingBottom">7dp</item>
        <item name="android:paddingRight">5dp</item>
        <item name="android:drawablePadding">5dp</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:gravity">left|center_vertical</item>
    </style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:textAllCaps">false</item>

<item name="android:gravity">left|center_vertical</item>

</style>

</resources>

MyPagerAdapter.java

package com.phaisarn.myapplication;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

    private String[] mTabs = {"One", "Two", "Three"};
    private int mCount = mTabs.length;

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch(position) {
            case 0: return Fragment1.newInstance(null, null);
            case 1: return Fragment2.newInstance(null, null);
            case 2: return Fragment3.newInstance(null, null);
        }
        return null;
    }

    @Override
    public int getCount() {
        return mCount;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
    }
}

package com.phaisarn.myapplication;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

public class MyPagerAdapter extends FragmentPagerAdapter {

private String[] mTabs = {"One", "Two", "Three"};

private int mCount = mTabs.length;

public MyPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

switch(position) {

case 0: return Fragment1.newInstance(null, null);

case 1: return Fragment2.newInstance(null, null);

case 2: return Fragment3.newInstance(null, null);

}

return null;

}

@Override

public int getCount() {

return mCount;

}

@Override

public CharSequence getPageTitle(int position) {

return super.getPageTitle(position);

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <co.ceryle.segmentedbutton.SegmentedButtonGroup
        android:id="@+id/buttonGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:sbg_animateSelector="bounce"
        app:sbg_animateSelectorDuration="1000"
        app:sbg_backgroundColor="#FFF"
        app:sbg_dividerColor="#888"
        app:sbg_dividerPadding="10dp"
        app:sbg_dividerRadius="10dp"
        app:sbg_dividerSize="1dp"
        app:sbg_position="1"
        app:sbg_radius="2dp"
        app:sbg_ripple="true"
        app:sbg_rippleColor="#666"
        app:sbg_selectorColor="#999">

        <Button
            android:id="@+id/button1"
            style="@style/SegmentedButtonStyle"
            android:drawableLeft="@drawable/ic_1"
            android:text="Cupcake" />

        <Button
            android:id="@+id/button2"
            style="@style/SegmentedButtonStyle"
            android:drawableLeft="@drawable/ic_2"
            android:text="Donut" />

        <Button
            android:id="@+id/button3"
            style="@style/SegmentedButtonStyle"
            android:drawableLeft="@drawable/ic_3"
            android:text="Eclair" />

    </co.ceryle.segmentedbutton.SegmentedButtonGroup>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

<co.ceryle.segmentedbutton.SegmentedButtonGroup

android:id="@+id/buttonGroup"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dp"

app:sbg_animateSelector="bounce"

app:sbg_animateSelectorDuration="1000"

app:sbg_backgroundColor="#FFF"

app:sbg_dividerColor="#888"

app:sbg_dividerPadding="10dp"

app:sbg_dividerRadius="10dp"

app:sbg_dividerSize="1dp"

app:sbg_position="1"

app:sbg_radius="2dp"

app:sbg_ripple="true"

app:sbg_rippleColor="#666"

app:sbg_selectorColor="#999">

<Button

android:id="@+id/button1"

style="@style/SegmentedButtonStyle"

android:drawableLeft="@drawable/ic_1"

android:text="Cupcake" />

<Button

android:id="@+id/button2"

style="@style/SegmentedButtonStyle"

android:drawableLeft="@drawable/ic_2"

android:text="Donut" />

<Button

android:id="@+id/button3"

style="@style/SegmentedButtonStyle"

android:drawableLeft="@drawable/ic_3"

android:text="Eclair" />

</co.ceryle.segmentedbutton.SegmentedButtonGroup>

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import co.ceryle.segmentedbutton.SegmentedButtonGroup;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        final ViewPager pager = findViewById(R.id.viewPager);
        pager.setAdapter(adapter);

        final SegmentedButtonGroup segment = findViewById(R.id.buttonGroup);
        segment.setOnClickedButtonListener(new SegmentedButtonGroup.OnClickedButtonListener() {
            @Override
            public void onClickedButton(int position) {
                pager.setCurrentItem(position);
            }
        });

        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                segment.setPosition(position, segment.getSelectorAnimationDuration());
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
}

package com.phaisarn.myapplication;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import co.ceryle.segmentedbutton.SegmentedButtonGroup;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());

final ViewPager pager = findViewById(R.id.viewPager);

pager.setAdapter(adapter);

final SegmentedButtonGroup segment = findViewById(R.id.buttonGroup);

segment.setOnClickedButtonListener(new SegmentedButtonGroup.OnClickedButtonListener() {

@Override

public void onClickedButton(int position) {

pager.setCurrentItem(position);

}

});

pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageSelected(int position) {

segment.setPosition(position, segment.getSelectorAnimationDuration());

}

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

}

ภาพที่ใช้

Link

SegmentedButton

Phaisarn Sutheebanjard

blog.phaisarn.com

การใช้ไลบรารี SegmentedButton กับ ViewPager