Gumawa ng Materyal na Disenyo na Naka-ayos sa Android App

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Final product image — What You'll Be Creating

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 TabLayout at ViewPager na 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.

Panimula sa TabLayout na mga Nilalaman

Ayon sa opisyal na dokumentasyon ng Android sa TabLayout, sinasabi nito:

Nagbibigay ang TabLayout ng 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.

Scrollable tab mode in Google News 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 sa setSelectedTabIndicatorColor () sa isang TabLayout na halimbawa.
tabIndicatorHeight: nagtatakda ng taas ng tagapagpahiwatig ngtab para sa kasalukuyang piniling tab. Maaari rin itong maitakda sa pagpo-programasa pamamagitan ng pagtawag sa setSelectedTabIndicatorHeight() sa isang TabLayout na 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 ay setTabTextColors().

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 ng Fragment para sa isang partikular na posisyon sa loob ng ViewPager.
getCount(): ay nagpapakita kung gaano karami ang mga pahina sa the ViewPager.
getPageTitle(): ang pamamaraang ito ay tinatawag ng the ViewPager upang 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!

Android Studio XML design view for layout

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.

Navigation to tabbed activity button in Android Studio

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.

Mga App Template

15 Na Magaling Na Android App Templates ng 2017

Nona Blackman

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+!