CommonTabLayout+ViewPager快速完成APP首頁搭建
阿新 • • 發佈：2018-01-11
bre 1.2 lin container cal ack line 實體類 tom
款APP開始的時候往往少不了多頁面的切換，這就涉及到viewpager的使用，以前往往用Google自帶的效果去實現，比較麻煩不說，後面做出來的效果還不如人意。
下面就利用CommonTabLayout+ViewPager來實現類似各電商APP首頁的效果；
搭建很簡單，第一步，新建一個工程。在build.gradle裏面加入下面的引用：
compile ‘com.flyco.roundview:FlycoRoundView_Lib:1.1.2@aar‘ compile ‘com.flyco.tablayout:FlycoTabLayout_Lib:1.5.0@aar‘ compile ‘com.android.support:design:24.2.1‘compile ‘com.nineoldandroids:library:2.4.0‘
這樣就能使用CommTabLayout插件了；
下面是activity_main.xml文件，我在裏面加入了一個FloatingActionButton。
<?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"> <RelativeLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <android.support.v4.view.ViewPager android:id="@+id/view_main" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.FloatingActionButton android:id="@+id/float_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" app:backgroundTint="#FFFFFF" android:background="@drawable/ic_arrow_drop_down_black_24dp"/> </RelativeLayout> <com.flyco.tablayout.CommonTabLayout android:id="@+id/tab_main" android:layout_width="match_parent" android:layout_height="40dp" android:background="#FFFFFF" app:tl_iconGravity="LEFT" app:tl_iconHeight="20dp" app:tl_iconMargin="5dp" app:tl_iconWidth="20dp" app:tl_indicator_bounce_enable="false" app:tl_indicator_color="@color/colorPrimary" app:tl_indicator_gravity="TOP" app:tl_textSelectColor="@color/colorPrimary" app:tl_textUnselectColor="#DDD" app:tl_textsize="15sp" app:tl_underline_color="#DDDDDD" app:tl_underline_gravity="TOP" app:tl_underline_height="1dp"/> </LinearLayout>
先創建幾個fagment用來做viewPager的元素，我在viewPager裏面加了三個fragment，都是非常簡單的布局；這些fragment繼承了我自己創建的一個BaseFragment；
BaseFragment
package com.learn.bob.testfragmentadapter; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; public class BaseFragment extends Fragment { public int dialogTheme; public Context mContext; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public void onPause() { super.onPause(); } @Override public void onResume() { super.onResume(); } }
package com.learn.bob.testfragmentadapter;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2018/1/7.
*/
public class ThirdFragment extends BaseFragment {
private Context mContext;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mContext = getActivity();
return inflater.inflate(R.layout.fragment_thirdd, container, false);
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
initView();
}
private void initView(){
}
}
下面是MainActivity，
package com.learn.bob.testfragmentadapter; import android.support.design.widget.FloatingActionButton; 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 android.view.View; import android.widget.Toast; import com.flyco.tablayout.CommonTabLayout; import com.flyco.tablayout.listener.CustomTabEntity; import com.flyco.tablayout.listener.OnTabSelectListener; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity{ private ViewPager mViewPager; private CommonTabLayout mTab; private FirstFragment firstFragment; private FirstReplaceFragment firstReplaceFragment; private SecondFragment secondFragment; private ThirdFragment thirdFragment; private ViewPagerAadpter viewPagerAadpter; private List<BaseFragment> fragmentList; private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>(); private FloatingActionButton mBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView(){ mViewPager = (ViewPager)findViewById(R.id.view_main); mTab = (CommonTabLayout) findViewById(R.id.tab_main); mBtn = (FloatingActionButton)findViewById(R.id.float_button); mBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(null != firstFragment){ // Toast.makeText(MainActivity.this,"點擊了",Toast.LENGTH_LONG).show(); } } }); if(null == fragmentList){ fragmentList = new ArrayList<BaseFragment>(); } if(null == firstFragment){ firstFragment = new FirstFragment(); fragmentList.add(firstFragment); mTabEntities.add(new TabEntity("首頁",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); } if(null == secondFragment){ secondFragment = new SecondFragment(); fragmentList.add(secondFragment); mTabEntities.add(new TabEntity("扉頁",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); } if(null == thirdFragment){ thirdFragment = new ThirdFragment(); fragmentList.add(thirdFragment); mTabEntities.add(new TabEntity("尾頁",R.mipmap.ic_launcher,R.mipmap.ic_launcher)); } viewPagerAadpter = new ViewPagerAadpter(getSupportFragmentManager(),fragmentList); mViewPager.setAdapter(viewPagerAadpter); mTab.setTabData(mTabEntities); mViewPager.setOffscreenPageLimit(3);
//為tab頁的點擊添加監聽事件 mTab.setOnTabSelectListener(new OnTabSelectListener() { @Override public void onTabSelect(int position) { mViewPager.setCurrentItem(position); } @Override public void onTabReselect(int position) { } });
//為viewPager的滑動添加監聽事件 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mTab.setCurrentTab(position); } @Override public void onPageScrollStateChanged(int state) { } }); }
//viewPager的適配器 private class ViewPagerAadpter extends FragmentPagerAdapter{ private List<BaseFragment> fragments; private FragmentManager fragmentManager; public ViewPagerAadpter(FragmentManager fm, List<BaseFragment> fragmentList) { super(fm); this.fragments = fragmentList; this.fragmentManager = fm; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } } }
在CusstommonTabEntity的基礎上我添加了一個TabEntity的實體類來定義我的tab頁；
package com.learn.bob.testfragmentadapter; import com.flyco.tablayout.listener.CustomTabEntity; /** * Created by bob on 2017-4-12 14:37 */ public class TabEntity implements CustomTabEntity { public String title; public int selectedIcon; public int unSelectedIcon; public TabEntity(String title, int selectedIcon, int unSelectedIcon) { this.title = title; this.selectedIcon = selectedIcon; this.unSelectedIcon = unSelectedIcon; } public TabEntity(String title) { this.title = title; } @Override public String getTabTitle() { return title; } @Override public int getTabSelectedIcon() { return selectedIcon; } @Override public int getTabUnselectedIcon() { return unSelectedIcon; } }
這是最終的效果，在xml裏面能夠設置下面tab頁滑動時線條文字顯示的顏色，也可以設置成無線條
項目GitHub地址：https://github.com/bobLion/TestFragmentAdapte.git
CommonTabLayout+ViewPager快速完成APP首頁搭建