Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)
Ang koponan ng material design sa Google ay tumutukoy sa
functionality ng tabs sa Android ng ganito:
Pinapadali ng mga tab upang hanapin at ilipat sa pagitan ng iba't ibang mga pananaw.
Sa pagkakalagay na ito ay matututunan mo
kung paano magpapakita ng mga tab gamit ang the TabLayout at ViewPager API. Sa praktikal na tutoryal na ito, tatalakayin
namin ang mga sumusunod:
- Ang
TabLayoutatViewPagerna mga bahagi. - Ang iba't ibang mga tab na mga moda: maaaring ibaba at maayos.
- Paano magpakita ng mga icon sa halip na teksto para sa mga pamagat ng tab.
- Para sa isang bonus, matututunan mo rin
kung paano gamitin ang tampok na template ng Android Studio upang mabilis na
i-boot ang iyong proyekto gamit ang naka-tab na interface.
Ang isang halimbawa na proyekto para sa pagtuturo na ito ay matatagpuan sa aming GitHub na lugar at maaari mong madaling sundin.
Mga Pangunahing Kailangan
Para masundan ang
pagtuturong ito, kakailanganin ninyo ang mga sumusunod:
- Android Studio 3.0 o mas mataas pa
- Kotlin plugin 1.1.51 o mas mataas pa
Maaari mo ring matutunan ang lahat ng mga panloob at panlabas ng wika Kotlin sa aking Kotlin mula sa Scratch na serye.
KotlinKotlin sa aking Kotlin mula sa Scratch: Mga Nullability, Loops, at mga Kundisyon
KotlinKotlin sa aking Kotlin mula sa Scratch: Mga Klase at Mga Bagay
Panimula sa TabLayout na mga Nilalaman
Ayon sa opisyal na dokumentasyon ng Android
sa TabLayout, sinasabi nito:
Nagbibigay angTabLayoutng patayong layout upang magpakita ng mga tab.
Ang bahagi ng TabLayout ay isa sa mga
sangkap na ipinakilala bilang bahagi ng materyal na disenyo ng mga artifact.
Bukod dito, kasama rin ito sa libruhan ng suporta sa disenyo. Sa isang TabLayout, kapag ang isang tab ay
pinili o o kaya naman ay ti-nap, ang isang iba't ibang mga pahina (o bahagi) ay
ipinapakita sa gumagamit.
Ang bahagi ng TabLayout ay maaaring
magkaroon ng mga ipinapakita nito na gamit ng mga tab sa isa sa dalawang
paraan: naayos at maaaring ibaba. Kung nakalagay ang mga tab, ang lahat ng mga
tab ay ipapakita sa screen sa parehong oras.
Ang screenshot sa ibaba ay ang pinakabagong
opisyal na WhatsApp Android app (bilang ng pagsusulat na ito), na gumagamit ng
isang TabLayout na may isang nakapirming konpigurasyong moda.
Sa maaari mong ibaba ang tab, kung ang bilang ng mga tab ay nagiging sobrang lapad para sa screen, ang taga-gamit ay maaaring lumipat pakaliwa o pakanan upang tingnan ang higit pang mga tab.
Narito ang isang halimbawa ng isang
TabLayout na may pababa na moda, moda na pinalabas sa pinakabagong bersyon ng
Google News at ng Weather app.
Higit pa rito, ang impormasyong ipinapakita sa isang tab ay maaaring maging teksto, isang icon, o isang kumbinasyon ng parehong teksto at isang icon. Halimbawa, ang pinakabagong Twitter app para sa Android ay gumagamit ng mga icon kaysa sa teksto sa bawat tab.
Sa mga sumusunod na seksyon, kami ay naghanap
sa pafkokoda ng isang simpleng app na gumagamit ng TabLayout sa isang
ViewPager. Kumuha tayo ng isang rolyo!
Ang disenyo ay hindi lamang kung ano ang hitsura nito at nararamdaman. Ang disenyo ay kung paano ito gumagana. ó Steve Jobs
1. Gumawa ng isang Proyekto sa Android Studio
Buksan na ang
Android Studio 3 at gumawa ng bagong proyekto (Maaari mong pangalanan ang mga ito TabLayoutDemo) gamit ang isang empty activity na
tatawaging MainActivity.
2. Paggawa ng Fragments ( Mga Pahina)
Kami
ay makagagawa ng TabLayout na may tatlong tab. Kapag ang bawat isa sa mga tab
ay pinili, nagpapakita ito ng iba't ibang Android bahagi o pahina. Kaya ngayon
ay lumikha ng tatlong bahagi ng Android para sa bawat isa sa mga tab. Magsisimula
kami sa unang klase ng fragment, at dapat mong sundin ang katulad na proseso
para sa natitirang dalawang klase ng bahagi — FragmentTwo.kt at FragmentThree.kt
Narito ang aking FragmentOne.kt:
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FragmentOne : Fragment() {
override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
savedInstanceState: Bundle?): View? =
inflater!!.inflate(R.layout.fragment_one, container, false)
companion object {
fun newInstance(): FragmentOne = FragmentOne()
}
}
Narito ang aking R.layout.fragment_one:
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="FragmentOne"
android:gravity="center_vertical|center_horizontal"/>
</LinearLayout>
3. Pagdaragdag ng TabLayout at ViewPager
Upang simulan ang paggamit ng TabLayout at
ViewPager sa iyong proyekto, siguraduhing ilipat mo ang disenyo ng suporta at
din ang suporta sa Android artifactoso idagdag ang mga ito sa build.gradle file
ng iyong modyul upang ilipat ang mga ito.
dependencies {
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support:support-v4:26.1.0'
}
Gayundin, bisitahin ang iyong res/layout/activlty_main.xml file upang maisama ang parehong TabLayout widget at ang
ViewPager view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
style="@style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="left"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Narito lumikha kami ng isang simpleng
TabLayout na may id na tab_layout. Sa aming TabLayout XML widget, makikita mo
na kasama namin ang ilang mga katangian tulad ng app:tabMode upang fixed at
din [app:tabGravity] na fill. Ang app: tabGravity ari-arian ay
ginagamit upang palitan kung paano ipapakita ang mga nilalaman sa tab upang
kunin ang magagamit na espasyo. Itinakda namin ito upang lagyan fill, na kung
saan ay ipamahagi ang mga nilalaman nang pantay-pantay sa buong lapad
ng TabLayout. Tandaan na ito ay magiging mas nakikita sa mas malawak na
pagpapakita, tulad ng mga tablet.
Kasama ko rin ang isang pasadyang estilo ng
katangian (@ style/CustomTabLayout) sa aming TabLayout widget.
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">@android:color/white</item>
<item name="tabIndicatorHeight">3dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
<item name="tabSelectedTextColor">@android:color/white</item>
</style>
Nagsisimula kami sa pagbabago ng aming
TabLayout sa pamamagitan ng pagtatakda ng mga halaga ng mga katangian na
ilalapat sa TabLayout. Narito ang mga detalye para sa ilan sa mga katangian na
inilapat:
-
tabIndicatorColor: nagtatakda ng kulay ng tagapagpahiwatig ng tab para sa kasalukuyang piniling tab. Maaari rin itong maitakda sa pagpo-programa sa pamamagitan ng pagtawag sasetSelectedTabIndicatorColor ()sa isangTabLayoutna halimbawa. -
tabIndicatorHeight: nagtatakda ng taas ng tagapagpahiwatig ngtab para sa kasalukuyang piniling tab. Maaari rin itong maitakda sa pagpo-programasa pamamagitan ng pagtawag sasetSelectedTabIndicatorHeight()sa isangTabLayoutna halimbawa. -
tabSelectedTextColor: nagtatakda ng mga kulay ng teksto para sa iba't ibang mga estado (normal, pinili) na ginagamit para sa mga tab. Ang katumbas ng katangiang ito sa Java aysetTabTextColors().
Kaagad pagkatapos lumilikha ng aming
TabLayout widget sa XML, ang susunod na view ay isang ViewPager. Sinasabi ng
opisyal na dokumentasyon ang sumusunod tungkol sa ViewPager:
Layout manager na nagpapahintulot sa gumagamit na i-flip ang kaliwa at kanan sa pamamagitan ng mga pahina ng mga datos ...
4. Paglikha ng PagerAdapter
Kailangan naming lumikha ng isang subclass
sa SampleAdapter.kt na umaabot sa FragmentPagerAdapter. Ang kategoryang ito
ay may pananagutan sa pamamahala sa iba't ibang mga bahagi na ipapakita sa mga
tab.
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter
class SampleAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
override fun getItem(position: Int): Fragment? = when (position) {
0 -> FragmentOne.newInstance()
1 -> FragmentTwo.newInstance()
2 -> FragmentThree.newInstance()
else -> null
}
override fun getPageTitle(position: Int): CharSequence = when (position) {
0 -> "Tab 1 Item"
1 -> "Tab 2 Item"
2 -> "Tab 3 Item"
else -> ""
}
override fun getCount(): Int = 3
}
Narito pinapalitan natin ang tatlong paraan
mula sa klase ng magulang: getItem(), getCount(), and getPageTitle() . Narito ang mga paliwanag para sa mga pamamaraan:
-
getItem(): nagbabalik ngFragmentpara sa isang partikular na posisyon sa loob ngViewPager. -
getCount(): ay nagpapakita kung gaano karami ang mga pahina sa theViewPager. -
getPageTitle(): ang pamamaraang ito ay tinatawag ng theViewPagerupang makakuha ng pamagat na pamagat upang ilarawan ang tinukoy na tab.
Halimbawa, kung
ang piniling tab ay ang unang tab na may pamagat na "Tab 1 Item",
isang pahina ng FragmentOne ay ipapakita agad sa gumagamit.
5. Pagsisimula ng Mga Bahagi
Susunod, magpapasimula kami ng mga
pagkakataon ng aming TabLayout, ViewPager, at SampleAdapter. Ang Initialization
ay magaganap sa loob ng onCreate () sa MainActivity.kt.
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.Toolbar
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initToolbar()
val tabLayout: TabLayout = findViewById(R.id.tab_layout)
val viewPager: ViewPager = findViewById(R.id.view_pager)
val adapter = SampleAdapter(supportFragmentManager)
viewPager.adapter = adapter
tabLayout.setupWithViewPager(viewPager)
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab) {
}
override fun onTabUnselected(tab: TabLayout.Tab) {
}
override fun onTabReselected(tab: TabLayout.Tab) {
}
})
}
private fun initToolbar() {
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
supportActionBar!!.title = "TabLayout Demo"
}
}
Nakuha namin ang mga sanggunian sa aming TabLayout at ViewPager mula sa R.layout.activity_main at pinasimulan ang
mga ito. Gumawa rin kami ng halimbawa ng aming SampleAdapter na pumapasok sa
isang halimbawa ng FragmentManager bilang isang argumento. Kailangan naming ibigay ang mga pananaw
para sa aming ViewPager, kaya tinawag namin ang setAdapter() at ipinasa sa aming
nilikha na adapter dito. Sa wakas, tinatawag naming setupWithViewPager() sa
isang halimbawa ng TabLayout upang magawa ang ilang gawain:
- paglikha ng kinakailangang tab para sa bawat pahina
- pagbuo ng kinakailangang mga tagapakinig
Kapag ang gumagamit ay taps sa isang tab,
binabago nito ang mga pahina sa the ViewPager at ipinapakita ang kinakailangang
pahina (o Fragment). Gayundin, pinapalitan ng mga pagpapalit sa
pagitan ng mga pahina ang piniling tab. Sa ibang salita, ang paraan na ito ay
tumutulong sa amin na pangalagaan ang pagbaba ng pagbabago ng estado at
pagpindot sa mga tab.
Ang onTabSelectedListener() ay ginagamit
upang isama ang isang tagapakinig na mahihingi kapag nagbabago ang pagpili ng
tab. Napalitan na namin ang mga sumusunod na pagtawag:
-
onTabSelected(): nagpapalit kapag pumasok ang isang tab sa napiling estado. -
onTabUnselected(): mahihingi kapag lumabas ang tab ng napiling estado.
-
onTabReselected(): mahihingi kapag ang isang tab na napili na ay pinili muli ng gumagamit.
Tandaan na maaari rin naming itakda ang tab
na mode na programa sa pamamagitan ng pag-install ng XML - using setTabMode() sa
isang halimbawa ng TabLayout. Ipinapasa namin ang moda (naayos o maaaring
i-scroll) sa pamamaraang ito bilang mga argumento. Halimbawa, maaari naming
pass TabLayout.MODE_FIXED para sa isang nakapirming
modeóor TabLayout.MODE_SCROLLABLE para sa isang naibababang moda.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Tandaan na kung gusto mong tahasang lumikha
ng mga tab sa halip na gamitin ang setter na paraan ng setUpWithViewPager (),
maaari mong gamitin ang halip na newTab () sa isang halimbawa ng TabLayout.
val tabLayout: TabLayout = findViewById(R.id.tab_layout)
tabLayout.addTab(tabLayout.newTab().setText("Songs"))
tabLayout.addTab(tabLayout.newTab().setText("Albums"))
tabLayout.addTab(tabLayout.newTab().setText("Artists"))
Tandaan din na maaari naming tahasang lumikha ng mga tab sa pamamagitan ng XML sa halip ng pagpoprograma.
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="@+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Songs"/>
<android.support.design.widget.TabItem
android:id="@+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Albums"/>
<android.support.design.widget.TabItem
android:id="@+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Artists"/>
</android.support.design.widget.TabLayout>
6. Pagsubok sa App
Sa wakas, maaari mong patakbuhin ang app!
Subukan ang pakikipag-ugnay sa apliksayon sa pamamagitan ng pagtataas pakaliwa o pakanan at pagpindot sa mga tab.
7. Mga Scrollable Tab
Ang mga opisyal na gabay sa disenyo ng materyal sa mga tab ay nagsasabi ng mga sumusunod tungkol sa mga scrollable na mga tab:
Ang mga scrollable na tab ay nagpapakita ng isang subset ng mga tab sa anumang naibigay na sandali. Maaari silang maglaman ng mas mahabang mga label ng tab at mas malaking bilang ng mga tab kaysa sa mga nakapirming tab. Ang mga scrollable na mga tab ay pinakamahusay na ginagamit para sa mga konteksto sa pag-browse sa mga pagpapakita ng pag-ugnay kapag ang mga gumagamit ay hindi kailangang direktang ihambing ang mga lebel ng mga tab.
Tingnan natin kung paano lumikha ng mga tab na may nakapababa na pagsasaayos ng moda. Ginawa ko ang pamagat para sa bawat isa sa mga tab na mas mahaba kaysa sa dati. Narito ang resulta sa nakapirming moda:
Maaari mong makita na ang TabLayout ay
gumamit ng maraming linya upang maipakita ang bawat pamagat ng tab. Sa ilang
mga sitwasyon, kahit na ito ay papatayin ang mga pamagat! Lumilikha ito ng masamang karanasan sa taga-gamit,
kaya kung kailangan ng mga pamagat ng iyong tab upang maging mahaba, dapat mong
isaalang-alang ang paggamit ng naibababang moda. Tandaan din na kung ikaw ay magkakaroon ng higit sa apat na mga tab, inirerekomenda itong gawing maililipat
ang tab na moda.
Palitan natin ang app:tabMode na
ari-arian mula sa fixed na scrollable.
<android.support.design.widget.TabLayout
<!-- ... -->
app:tabMode="scrollable"/>
Tandaan, maaari mo ring itakda ang tab na moda sa pagpoprograma, gaya ng tinalakay nang mas maaga.
8. Ipinapakita ang Mga Icon ng Tab
Hayaan na ngayon sumisid sa kung paano palitan ang tekstong item ng tab na may mga icon sa halip.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// ...
tabLayout.setupWithViewPager(viewPager)
tabLayout.getTabAt(0)!!.setIcon(android.R.drawable.ic_dialog_email)
tabLayout.getTabAt(1)!!.setIcon(android.R.drawable.ic_dialog_info)
tabLayout.getTabAt(2)!!.setIcon(android.R.drawable.ic_dialog_alert)
// ...
}
// ...
}
Narito naming tinatawag ang getTabAt () sa
isang instance of TabLayout. Ang pagtawag sa paraang ito ay babalik ang tab sa
tinukoy na index. Susunod, tumawag kami sa setIcon(). Ang pagtawag sa
pamamaraang ito ay magtatakda ng icon na ipinapakita sa tab na ito.
Itinakda ko rin ang tab mode upang maayos.
<android.support.design.widget.TabLayout
app:tabMode="fixed"/>
Papalitan ko pa rin ang getPageTitle () sa
loob ng SampleAdapter.
class SampleAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
// ...
override fun getPageTitle(position: Int): CharSequence = when (position) {
0 -> "TAB 1"
1 -> "TAB 2"
2 -> "TAB 3"
else -> ""
}
// ...
}
Narito ang resulta:
Ngayon, kung
gusto mo lamang ang mga icon, hindi mo lang papalitan ang getPageTitle ().
9. Bonus: Paggamit ng Android Studio Templates
Sa halip na magsulat ng labis na koda para lamang lumikha ng naka-tab na interface o aktibidad mula sa simula, ang Android Studio 3.0 ay may ilang mga pre-umiiral na mga template ng code (magagamit sa Java at Kotlin) upang matulungan ang pagsisimula ng iyong proyekto. Maaaring gamitin ang isang template tulad upang lumikha ng isang naka-tab na aktibidad.
Ipapakita ko sa iyo kung paano gamitin ang madaling gamiting tampok na ito sa Android Studio 3.
Para sa isang bagong proyekto, isunod and Android Studio 3.
Ipasok ang pangalan ng aplikasyon at pindutin ang Susunod na pindutan.
Maaari mong iwanan ang mga default habang nasa dialog ng Mga Target ng Android Device. Pindutin muli ang Susunod na pindutan.
Sa dialog na Magdagdag ng Aktibidad sa Mobile, pumunta lamang pababa at piliin ang Gawain ng Aktibidad. Pindutin ang pindutang Susunod pagkatapos nito.
Sa huling dialog, tumungo pababa sa drop-down menu ng Navigation Style at piliin ang Action Bar Tabs (na may ViewPager). Sa wakas, pindutin ang pindutan ng Tapusin upang tanggapin ang lahat ng mga pagsasaayos.
Nakatulong na kami sa Android Studio na lumikha ng isang proyekto na may naka-tab na aktibidad. Nakakamangha!
Matindi kang pinapayuhan na tuklasin ang nabuo na koda.
Sa isang umiiral na proyekto ng Android Studio, upang magamit ang template na ito, pumunta lamang sa File > Activity > Tabbed Activity. At sundin ang mga katulad na hakbang na inilarawan noon.
Ang mga template na kasama sa Android Studio ay mabuti para sa mga simpleng layout at paggawa ng mga pangunahing app, ngunit kung gusto mong magsimulang simulan ang iyong app, maaari mong isaalang-alang ang ilan sa mga template ng app na magagamit mula sa Envato Market.
Sila ay isang malaking oras saver para sa mga nakaranas ng mga taga-gawa, pagtulong sa kanila upang tanggalin sa pamamagitan ng slog ng paglikha ng isang app mula sa simula at focus ang kanilang mga talento sa halip sa mga natatanging at nasasa-ayos na mga bahagi ng paglikha ng isang bagong app.
Konklusyon
Sa pagtuturong ito, iyong natutunan kung paano gumawa ng tabbed interface sa Android gamit ang TabLayout at ViewPager API mula sa
scratch. Siniyasat din natin kung paano mabilis na magagamit ang Android Studio
templates para gumawa ng tabbed interface.
Labis kong inirerekomenda ang pagtingin sa opisyal na patnubay para sa material design para sa bottom navigation bar para mas malaman ang tungkol sa kung paano maayos na madi-disenyo at magagamit ang bottom navigation bar sa Android.
Para mas malaman ang tungkol sa coding para sa Android, tingnan ang ilan sa iba pang kurso at pagtuturo dito sa Envato Tuts+!
