[Dev]ทำ Segmented แบบ IOS ใน Android

Screenshot_2015-02-28-00-10-12 - Copy

สวัสดีครับทุกท่าน วันนี้เรามาลองทำ Segmented แบบ IOS กันครับ โดยจะใช้ Library ชื่อ android segmented control มาเริ่มกันเลยครับ

เริ่มด้วยการ Add Library จาก Maven Central กัน โดยเพิ่ม Code ด้านล่างเข้าไปใน Build.gardle ของ app

[xml]
dependencies {
compile ‘info.hoang8f:android-segmented:1.0.4’
}
[/xml]

เราจะได้ Build.gradle เป็นแบบนี้

[xml]
apply plugin: ‘com.android.application’

android {
compileSdkVersion 21
buildToolsVersion "21.1.2"

defaultConfig {
applicationId "com.kamonway.blog_segmented_control"
minSdkVersion 15
targetSdkVersion 21
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile(‘proguard-android.txt’), ‘proguard-rules.pro’
}
}
}

dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:21.0.3’
compile ‘info.hoang8f:android-segmented:1.0.4’
}
[/xml]

จากนั้นกด Sync Now ถ้าไม่มี Error ขึ้นก็โอเคไปกันต่อได้ เมื่อ Add Library แล้วเราก็มาทำส่วนของ Layout กัน โดยแก้ไข activity_main.xml ตามด้านล่าง

[xml title=”activity_main.xml”]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<info.hoang8f.android.segmented.SegmentedGroup
android:id="@+id/segmented"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:orientation="horizontal">

<RadioButton
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KamonWay"
android:checked="true"
style="@style/RadioButton" />

<RadioButton
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The"
style="@style/RadioButton" />

<RadioButton
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dev"
style="@style/RadioButton" />

</info.hoang8f.android.segmented.SegmentedGroup>

</RelativeLayout>
[/xml]

แล้วกด Run จะได้ผลออกมาดังรูป
Screenshot_2015-02-28-00-10-12
หลังจากสร้าง Layout กันแล้วเราจะสามารถใช้งาน Segmented ได้ตามปกติ และเช็คค่าจาก RadioBox ได้เหมือน RadioBox ทั่วไป แต่ถ้าเกิดเราอยากเปลี่ยนสีล่ะ จะทำยังไง เรามาดูกันที่ ActivityMain.java ซึ่งวิธีประกาศตัวแปรของ Segmented ตาม Code ด้านล่าง

[java]
SegmentedGroup segmented = (SegmentedGroup) findViewById(R.id.segmented);
[/java]

แล้วจากนั้นเราก็กำหนดสีของเส้นขอบและพื้นหลังด้วยคำสั่ง setTintColor แล้วกำหนดสีที่จะให้แสดงเป็น RGB ของผมเป็นสีแดง #FF0000

[java]
segmented.setTintColor(Color.parseColor("#FF0000"));
[/java]

Code ActivityMain.java แบบเต็ม

[java title=”ActivityMain.java”]
import android.graphics.Color;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.widget.RadioButton;

import info.hoang8f.android.segmented.SegmentedGroup;

public class MainActivity extends ActionBarActivity {

SegmentedGroup segmented;
RadioButton radio1;
RadioButton radio2;
RadioButton radio3;

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

segmented = (SegmentedGroup) findViewById(R.id.segmented);
radio1 = (RadioButton) findViewById(R.id.button1);
radio2 = (RadioButton) findViewById(R.id.button2);
radio3 = (RadioButton) findViewById(R.id.button3);

segmented.setTintColor(Color.parseColor("#FF0000"));

}

}
[/java]

เราจะได้หน้าตาแบบนี้ออกมา

Screenshot_2015-02-28-00-13-35

แต่ถ้าเราไม่ชอบสีตัวอักษรตอนกดเลือกเราก็สามารถเปลี่ยนได้ โดยใช้คำสั่ง setTintColor ได้เหมือนกันแต่เพิ่ม Parameter ของสีตัวอักษรเข้าไปอีก 1 ตัว

[java]
segmented.setTintColor(Color.parseColor("#FF0000"), Color.parseColor("#00FF00"));
[/java]

สุดท้ายเราจะได้แบบนี้ออกมา

Screenshot_2015-02-28-00-33-43

Library ตัวนี้ใช้ไม่ยากเลยครับ แค่Add เข้าไปก็แทบจะใช้ได้อยู่แล้ว ลองเอาไปเล่นกันดูนะครับ

[xml title=”activity_main.xml”]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<info.hoang8f.android.segmented.SegmentedGroup
android:id="@+id/segmented"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_centerInParent="true"
android:orientation="horizontal">

<RadioButton
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KamonWay"
android:checked="true"
style="@style/RadioButton" />

<RadioButton
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The"
style="@style/RadioButton" />

<RadioButton
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dev"
style="@style/RadioButton" />

</info.hoang8f.android.segmented.SegmentedGroup>

</RelativeLayout>
[/xml]

[java title=”ActivityMain.java”]
public class MainActivity extends ActionBarActivity {

SegmentedGroup segmented;
RadioButton radio1;
RadioButton radio2;
RadioButton radio3;

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

segmented = (SegmentedGroup) findViewById(R.id.segmented);
radio1 = (RadioButton) findViewById(R.id.button1);
radio2 = (RadioButton) findViewById(R.id.button2);
radio3 = (RadioButton) findViewById(R.id.button3);

segmented.setTintColor(Color.parseColor("#FF0000"), Color.parseColor("#00FF00"));
segmented.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
Toast.makeText(getApplicationContext(),
"Radio1:"+radio1.isChecked()+" Radio2:"+radio2.isChecked()+" Radio3:"+radio3.isChecked(),
Toast.LENGTH_SHORT).show();
}
});
}

}
[/java]

About author View all posts

admin