效果图:
1.添加依赖app下的build.gradle
implementation 'com.android.support:design:28.0.0'
2.MainActivity:
private String[] titles = new String[]{"推荐", "物业.生活", "美食.健康", "医疗.养老"};
private ViewPager viewPager;
private TabLayout tablayout;
private LinearLayout ll_tab_bg;
private Context context = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initData() {
List<Fragment> fragments = new ArrayList<Fragment>();
fragments.add(new PropertyFragment());
fragments.add(new RecommendFragment());
fragments.add(new DeliciousFoodFragment());
fragments.add(new MedicalCareFragment());
viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), context));
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (null == view) {
tab.setCustomView(R.layout.tab_layout_text);
}
TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
textView.setTextAppearance(context, R.style.TabLayoutTextSize);
switch (tab.getPosition()) {
case 0:
ll_tab_bg.setBackgroundResource(R.drawable.home_navigation4);
break;
case 1:
ll_tab_bg.setBackgroundResource(R.drawable.home_navigation1);
break;
case 2:
ll_tab_bg.setBackgroundResource(R.drawable.home_navigation3);
break;
case 3:
ll_tab_bg.setBackgroundResource(R.drawable.home_navigation2);
break;
default:
break;
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (null == view) {
tab.setCustomView(R.layout.tab_layout_text);
}
TextView textView = tab.getCustomView().findViewById(android.R.id.text1);
textView.setTextAppearance(context, R.style.TabLayoutTextSize_two);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
tablayout.setupWithViewPager(viewPager);
tablayout.setTabTextColors(getResources().getColor(R.color.dark_white), Color.WHITE);
}
private void initView() {
viewPager = findViewById(R.id.viewPager);
tablayout = findViewById(R.id.tablayout);
ll_tab_bg = findViewById(R.id.ll_tab_bg);
}
xml:
<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:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/ll_tab_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_navigation_1"
android:gravity="center_vertical"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
app:tabBackground="@color/transparent"
app:tabIndicatorColor="@android:color/transparent"
app:tabMode="scrollable"
app:tabRippleColor="@color/transparent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="@drawable/home_page_more" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:overScrollMode="never" />
</LinearLayout>
3.PropertyFragment:
public TabLayout mTabLayout;
private ViewPager mViewPager;
private List<Fragment> fragmentList = new ArrayList<>();
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_recommend1, container, false);
initViewFbi(view);
initData();
return view;
}
private void initViewFbi(View view) {
mTabLayout = view.findViewById(R.id.tablayout);
mViewPager = view.findViewById(R.id.viewpager);
}
public void initData() {
fragmentList.clear();
fragmentList.add(new PropertyStewardFragment());
fragmentList.add(new ButlerServiceFragment());
OrderViewPagerAdapter viewPagerAdapter = new OrderViewPagerAdapter(getChildFragmentManager(), fragmentList);
mViewPager.setAdapter(viewPagerAdapter);
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
mTabLayout.addTab(mTabLayout.newTab().setText("物业服务"));
mTabLayout.addTab(mTabLayout.newTab().setText("生活服务"));
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.getTabAt(0).setText("物业服务");
mTabLayout.getTabAt(1).setText("生活服务");
}
fragment_recommend1:
<?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:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
app:layout_scrollFlags="scroll">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:scaleType="fitXY"
android:src="@drawable/home_wuye" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
app:tabBackground="@color/transparent"
app:tabIndicatorColor="#07D97F"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:tabRippleColor="@color/transparent"
app:tabSelectedTextColor="#333"
app:tabTextColor="#333" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
4.RecommendFragment:
public class RecommendFragment extends Fragment {
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_recommend, container, false);
return view;
}
}
fragment_recommend:
<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:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadingEdge="none"
android:overScrollMode="never">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e52"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/home_tuijian" />
<TextView
android:layout_width="match_parent"
android:layout_height="1000dp"
android:background="#fff" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
5.剩下的Fragment和RecommendFragment的写法一样 PropertyStewardFragment和ButlerServiceFragment也一样
6.bg_navigation_1-4.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#00DE7B"
android:startColor="#00C7B4" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#15C2D0"
android:startColor="#76BDEA" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#F34630"
android:startColor="#FDB962" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#F34630"
android:startColor="#FD627E" />
</shape>
color.xml:
<color name="transparent">#00000000</color>
<color name="dark_white">#99ffffff</color>
styles.xml:
<style name="TabLayoutTextSize_two">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
</style>
<style name="TabLayoutTextSize">
<item name="android:textStyle">bold</item>
<item name="android:textSize">18sp</item>
</style>
这里包含几个图片就不传了 (home_meishi.png
home_navigation1.png
home_navigation2.png
home_navigation4.png
home_page_more.png
home_navigation3.png
home_tuijian.png
home_wuye.png
home_yiliao.png)