วันเสาร์ที่ 9 เมษายน พ.ศ. 2559

การปรับแต่ง TabLayout ของ Android

TabLayout เป็นเหมือนกับแถบเมนูที่อยู่ด้านบนของหน้าจอ ต่อจาก toolbar ลงมา ดังภาพ

เราสามารถจัดการปรับเปลี่ยน หรือตั้งค่าองค์ประกอบต่าง ๆ ได้ ดังนี้

การกำหนดขนาดตัวอักษรบน TabLayout
  • ก่อนอื่นต้องกำหนด style ไว้ใน style.xml เช่น
    <style name="MyCustomTabText" parent="TextAppearance.Design.Tab">
        <tem name="android:textSize">20sp</item>
    </style>
    
    
    
  • จากนั้น ที่ไฟล์ xml layout ที่มี TabLayout กำหนดให้ใช้ Style กับตัวอักษร ดังนี้
    <android.support.design.widget.TabLayout    
        ...
        app:tabTextAppearance="@style/MyCustomTabText"    
        ... />
    

การจัดให้ TabLayout อยู่กึ่งกลางหน้าจอ
  • ที่ไฟล์ xml layout ที่มี TabLayout กำหนดให้ใช้ Style กับตัวอักษร ดังนี้
    <android.support.design.widget.TabLayout    
        ...
        android:layout_gravity="center"
        ... />
    
  • ในกรณีที่มีการกำหนดให้ TabLaout มี scrollable ได้ ต้องเอาออกด้วย เพราะจะขัดกัน มี 2 อย่างอยู่ด้วยกันไม่ได้

การกำหนดความหนา และสี ของ Selector
  • Selector คือ แถบสีที่อยู่ใต้ข้อความ เพื่อบอกว่า ขณะนี้กำลังอยู่ที่แถบใด
  • ความหนา กำหนดที่ไฟล์ xml layout ที่มี TabLayout กำหนดให้กำหนด tabIndicatorHeight เช่น
    <android.support.design.widget.TabLayout    
        ...
        app:tabIndicatorHeight="3dp"
        ... />
    
  • สีของ Selector กำหนดที่ไฟล์ xml layout ที่มี TabLayout กำหนดให้กำหนด tabIndicatorColor เช่น
    <android.support.design.widget.TabLayout    
        ...
        app:tabIndicatorColor="@android:color/holo_red_light"    
        ... />
    

การกำหนดสีพื้นของ TabLayout
  • ก่อนอื่น ต้องสร้างไฟล์สี โดยเขียนเป็นไฟล์ xml ตั้งชื่อว่า background.xml เพื่อให้รู้ว่าเป็นไฟล์อะไร จะได้เรียกใช้ได้ถูกต้อง แล้วนำไปไว้ในห้อง drawable เช่น
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true" android:drawable="@color/colorPrimaryDark" />
        <item android:drawable="@color/colorPrimaryDark" />
    </selector>
    
    ในตัวอย่างกำหนดสีให้เป็น colorPrimaryDark ทั้งส่วนที่เลือกและไม่เลือก ซึ่งจะทำให้สีของสีพื้นเป็นสีเดียวกัน แต่ถ้าต้องการให้สีพื้นของส่วนที่เลือกแตกต่างจากสีพื้น ให้กำหนดสีในส่วน state_selected ให้เป็นสีอื่น
    การเลือกสี ถ้าจะให้ดี เมื่อพิมพ์ "@color/ จะปรากฎสีให้เลือก จะทำให้เลือกได้สะดวกขึ้น
  • จากนั้นจึงกำหนดที่ไฟล์ xml layout ที่มี TabLayout กำหนดให้กำหนด tabIndicatorColor เช่น
    <android.support.design.widget.TabLayout    
        ...
        app:tabBackground="@drawable/background"    
        ... />
    

ไม่มีความคิดเห็น:

แสดงความคิดเห็น