ToolBar下面放置一個TabLayout踩過的坑
阿新 • • 發佈：2019-02-03
由於使用了DrawerLayout+Navigation,所以會有一個ToolBar。接著我就想在toolBar下放置一個tab在最底下的TabLayout，沒想到，踩到了不少的坑
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <!--AppBarLayout必須是CoordinatorLayout直接子View--> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <!--有一些引數使用系統預設引數--> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_height="40dp" android:layout_width="match_parent" android:background="#485" app:layout_scrollFlags="scroll|enterAlways" > <TextView android:id="@+id/toolBarTitle" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_horizontal" android:gravity="center" android:textSize="25sp" android:textColor="#fff" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main"/> </android.support.design.widget.CoordinatorLayout>
content_main
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" tools:showIn="@layout/app_bar_main" android:paddingBottom="40dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"><!--顯示在toolbar下面--> <android.support.v4.view.ViewPager android:id="@+id/viewpager_tab" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white" /> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/MyCustomTabLayout" /> </LinearLayout>
app：layout_behavior="..."這一句話很重要，就是因為沒有它導致viewPager的內容把上方的toolBar給覆蓋掉了 還有TabLayout中的style="@style/MyCustomTabLayout"自定義tab的下劃線顏色和允許使用圖片資源作為tab style設定如下
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#488484</item>
<item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>還有就是fragment
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ns_fragmentew">
</TextView>fragment.java檔案非常簡單
public class NewsFragment extends Fragment {
public static NewsFragment newInstance()
{
NewsFragment newsFragment = new NewsFragment();
return newsFragment;
}
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.news_fragment,container,false);
return view;
}
}然後定義一個需要用到的Adapter
public class MainFragmentPagerAdapter extends FragmentPagerAdapter{
final int PAGE_COUNT = 3;
private int[] imageResId ={
R.drawable.news,
R.drawable.write,
R.drawable.calendar
};
private Context context;
public MainFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context= context;
}
@Override
public Fragment getItem(int position) {
Fragment fragment ;
switch (position)
{
case 0:
fragment = NewsFragment.newInstance();
break;
case 1:
fragment = WriteFragment.newInstance();
break;
case 2:
fragment = CalendarFragment.newInstance();
break;
default:
return null;
}
return fragment;
}
@Override
public int getCount() {
return PAGE_COUNT;
}
//設定標題,icon
@Override
public CharSequence getPageTitle(int position)
{
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0,0,image.getIntrinsicWidth(),image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image,ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan,0,1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;//需要在style那裡設定textAllCaps為false才能吧ImageSpan渲染出來
//return tabTitles[position];
}
}接下來是MainActivity.java//只給部分程式碼，其他無關程式碼較多 首先是一些變數
//設定TabLayout
private MainFragmentPagerAdapter mainFragmentPagerAdapter;
private ViewPager viewPager;
private TabLayout tabLayout;
//設定標題
public TextView textView ;
然後是實現
textView = (TextView) findViewById(R.id.toolBarTitle);
/**
* 配置TabLayout
*/
mainFragmentPagerAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(),this);
viewPager = (ViewPager) findViewById(R.id.viewpager_tab);
viewPager.setAdapter(mainFragmentPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
//設定監聽器
tabLayout.addOnTabSelectedListener(this);//該監聽器用於更新標題監聽器
/**
* tab監聽
* @param tab
*/
@Override
public void onTabSelected(TabLayout.Tab tab) {
switch (tab.getPosition())
{
case 0:
textView.setText("趣聞");
break;
case 1:
textView.setText("隨筆");
break;
case 2:
textView.setText("日曆");
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}之前腦抽，沒考慮到用監聽器，通過非同步在Adapter中傳輸標題資訊傳回主介面，最後發現一開始可以更新標題，但更新了一兩次之後就不再更新了。。。 目測是ViewPager的原因，並不是通過getItem來實時更新fragment，所以這種想法失敗