第三十三篇-TabLayout的使用
阿新 • • 發佈：2018-11-13
效果圖：
最上方是一個TabLayout，有三個部分，新聞、財經、娛樂，下方是一個ViewPaper，裡面包含三個fragment，分別對應三個xml和java class。
第一個Fragment裡面是文字資訊TextView。
第二個Fragment裡面是按鈕Button。
第三個Fragment裡面是圖片資訊。
首先，我們先來寫一個主頁面，包含兩部分，TabLayout和ViewPaper
ViewPaper介紹:
ViewPager繼承ViewGroup。看官網描述，這貨和Fragment是好搭檔，Fragment有自己的生命週期。也就是說ViewPager更適用複雜的檢視切換，而且Viewpager有自己的adapter，這也讓其適應複雜物件，實現資料的動態載入。
然後，分別設計3個fragment.xml
1、裡面是一個文字資訊，如果要設定文字資訊的顯示內容，有兩種方式，一種是直接在text裡面寫入字串，另一種是在主程式.java中動態設定內容。
2、裡面是一個button，如果想要為Button新增效果的話，可以在第二個Fragment的Java class 新增單擊事件，效果圖中就是簡單添加了一個廣播事件。
新增單擊事件：
Button button=view1.findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getActivity(),"您正在瀏覽財經頁面",Toast.LENGTH_SHORT).show();
}
});
3、裡面是一個圖片資訊，新增ImageView元件。
接著，對應這三個layout編寫3個java class
public class MyFragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view1=inflater.inflate(R.layout.layout_page1,container,false);
return view1;
}
}
注意extends後面的Fragment要選擇v4的那一個，如果不確定的話，可以看它對應的layout檔案中那個元件寫的是什麼。三個java class只需要變動layout_page1那個地方，它是這個java class對應的layout檔案。2,3分別改為layout_page2,layout_page3，這些是layout的名字。對於MyFragment2.java可以將button那一段也新增進去。
此時，檔案都建好了，但是它們除了layout和.java聯絡上以外，fragment還沒有和頁面聯絡上。
最後，要修改主程式的內容。
先定義一個fragment集合List<Fragment>fragments;表示一個list集合裡面存放的是fragment型別。
舉一個例子：
java中<>表示使用泛型，Array<List<String>>表示的意思是一個數組裡面存放的是list集合，而該list集合中儲存的是字串型別的資料。在java中<>表示使用泛型，是用來規定存入集合中的型別一致的技 術，他使得集合必須儲存資料型別一致的資料，這樣在從集合中取資料時，就不需要強轉資料型別，而是通過你給定的泛型類自動轉換型別！
然後，將我們之前寫好的3個fragment java class檔案新增進去
fragments=new ArrayList<>();
fragments.add(new MyFragment1());
fragments.add(new MyFragment2());
fragments.add(new MyFragment3());
關於new ArrayList<>()的用法可以參考：https://www.cnblogs.com/PeterZhang1520389703/p/6763170.html
接著，建立一個adapter類，並定義一個adapter新增到viewpaper，目的是將viewpaper和fragment連線起來。
private class adapter extends FragmentPagerAdapter{
private List<Fragment>list;
public adapter(FragmentManager fm,List<Fragment> list) {
super(fm);
this.list=list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return title[position];
}
}
其中，引數中List<Fragment>>list是我們自己新增進去的，並且在其中定義private List<Fragment>list使它等於我們傳入的引數，可以看出，它返回了位置資訊，大小資訊。最後，我們就可以引用這個類了。
adapter adapter=new adapter(getSupportFragmentManager(),fragments);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
setupWithViewPaper就是將tabLayout和viewPaper聯絡起來了。
附上完整程式碼。
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:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <!--<android.support.design.widget.TabItem--> <!--android:layout_width="wrap_content"--> <!--android:layout_height="wrap_content"--> <!--android:text="Left" />--> <!--<android.support.design.widget.TabItem--> <!--android:layout_width="wrap_content"--> <!--android:layout_height="wrap_content"--> <!--android:text="Center" />--> <!--<android.support.design.widget.TabItem--> <!--android:layout_width="wrap_content"--> <!--android:layout_height="wrap_content"--> <!--android:text="Right" />--> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpaper" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>View Code
layout_page1.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>View Code
layout_page2.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> </LinearLayout>View Code
layout_page3.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" android:layout_width="match_parent" android:gravity="center" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" app:srcCompat="@mipmap/ic_launcher" /> </LinearLayout>View Code
MainActivity.java
package com.example.aimee.tablayouttest; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { TabLayout tabLayout; ViewPager viewPager; List<Fragment>fragments; String[] title={"新聞","財經","娛樂"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout=findViewById(R.id.tablayout); viewPager=findViewById(R.id.viewpaper); fragments=new ArrayList<>(); fragments.add(new MyFragment1()); fragments.add(new MyFragment2()); fragments.add(new MyFragment3()); adapter adapter=new adapter(getSupportFragmentManager(),fragments); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); } private class adapter extends FragmentPagerAdapter{ private List<Fragment>list; public adapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return title[position]; } } }View Code
MyFragment1.java
package com.example.aimee.tablayouttest; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MyFragment1 extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view1=inflater.inflate(R.layout.layout_page1,container,false); return view1; } }View Code
MyFragment2.java
package com.example.aimee.tablayouttest; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast; public class MyFragment2 extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view1=inflater.inflate(R.layout.layout_page2,container,false); Button button=view1.findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getActivity(),"您正在瀏覽財經頁面",Toast.LENGTH_SHORT).show(); } }); return view1; } }View Code
MyFragment3.java
package com.example.aimee.tablayouttest; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MyFragment3 extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view1=inflater.inflate(R.layout.layout_page3,container,false); return view1; } }View Code
OK。