Fragment+ViewPager+TabLayout
TabLayout的介紹
Tablayout繼承自HorizontalScrollView,用作頁面切換指示器,因使用簡便功能強大而廣泛使用在App中。
1 ,引入 com.android.support:design
TabLayout 是屬於 com.android.support:design 包的控件,所以需要依賴該包
implementation 'com.android.support:design:28.0.0'
2,MainActivity的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/tab_id"
app:tabSelectedTextColor="#E5AF35"
app:tabTextColor="#969696"
app:tabIndicatorColor="#E5AF35"
app:tabIndicatorHeight="5dp"
app:tabMode="scrollable"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_id"
android:layout_weight="8"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.v4.view.ViewPager>
</LinearLayout>
從 xml 佈局文件看,根佈局爲一個垂直的線性佈局,包含 TabLayout 和 ViewPager。重點看一下 TabLayout 的幾個常用屬性值
app:tabBackground 標籤佈局的背景色
app:tabIndicatorColor 指示器的顏色
app:tabIndicatorHeight 指示器的高度(如果不需要指示器可以設置爲0dp)
app:tabMode 顯示模式:默認 fixed(固定),scrollable(可橫向滾動)
app:tabPadding 標籤內邊距
app:tabSelectedTextColor 標籤選中的文本顏色
app:tabTextAppearance 標籤文本樣式
app:tabTextColor 標籤未選中的文本顏色
3,Java代碼:MainActivity.java
package com.example.day007;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import com.example.day007.adapter.MyFragmentAdapter;
import com.example.day007.fragment.OneFragment;
import com.example.day007.fragment.TwoFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout tabId;
private ViewPager vpId;
private List<Fragment> list = new ArrayList<>();
private List<String> titles = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
tabId = findViewById(R.id.tab_id);
vpId = findViewById(R.id.vp_id);
list.add(new OneFragment());
list.add(new TwoFragment());
list.add(new OneFragment());
list.add(new TwoFragment());
titles.add("視頻");
titles.add("新聞");
titles.add("圖片");
titles.add("留言");
MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), list, titles);
vpId.setAdapter(myFragmentAdapter);
//把viewPager和tabLayout綁定在一起,註釋掉看看效果.
tabId.setupWithViewPager(vpId);
}
}
4,適配器代碼:MyFragmentAdapter.java
package com.example.day007.adapter;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import java.util.ArrayList;
import java.util.List;
/**
* ${FENG}
* 2019-07-11
*/
public class MyFragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;
private List<String> titles;
public MyFragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
super(fm);
this.list = list;
this.titles = titles;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int i) {
return list.get(i);
}
//返回與viewpage關聯以後的tablayot的內容
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
5,Fragment創建一個右鍵帶佈局的就搞定,不用其他改變.
/**
* A simple {@link Fragment} subclass.
*/
public class OneFragment extends Fragment {
public OneFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}
}