Resumen
TabLayout es una biblioteca de control con efecto Material Design que Google lanzó oficialmente en la 14ª Conferencia de E / S de Google. Como indicador de etiqueta, se puede vincular con ViewPager. Los dos se pueden usar con Fragment para realizar páginas de pestañas deslizantes, que es similar Zhihu y WeChat.
Proceso de implementación
-
Primero, necesitamos agregar la biblioteca de dependencias del paquete de diseño al gradle de la aplicación:
compile 'com.android.support:design:25.0.0' -
Ok, echemos un vistazo al archivo de diseño de la página principal activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<LinearLayout
android:id="@+id/linearlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/mtablayout"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/mviewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>`Cabe señalar aquí que para cambiar el color de la línea de marcado, el tamaño del color del título y el color de fondo de todo el TabLayout, etc., debemos agregar un espacio de nombres al comienzo del diseño:
`xmlns:app="http://schemas.android.com/apk/res-auto"`;Estos son algunos atributos: app: tabMode = "fixed" significa que el diseño de la pestaña superior no es una aplicación deslizante: tabIndicatorColor = "@ color / colorAccent" significa el color de la línea debajo de la aplicación de pestaña superior: tabSelectedTextColor = "@ color / colorAccent" significa El color de la fuente cuando se selecciona Tab aplicación: tabTextColor = "@ android: color / white" significa el color de la fuente cuando no se selecciona Tab
3. Código central:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 去除阴影
getSupportActionBar().setElevation(0);
initData();
initView();
}
//数据初始化
private void initData() {
mtitle = new ArrayList<>();
mtitle.add("服务管家");
mtitle.add("微信精选");
mtitle.add("美女社区");
mtitle.add("个人中心");
mfragment = new ArrayList<>();
mfragment.add(new ButerFragment());
mfragment.add(new GirlFragment());
mfragment.add(new WeChatFragmeent());
mfragment.add(new UserFragment());
}
//View 初始化
private void initView() {
mtablayout = (TabLayout) findViewById(R.id.mtablayout);
mviewpager = (ViewPager) findViewById(R.id.mviewpager);
// 预加载
mviewpager.setOffscreenPageLimit(mfragment.size());
// 设置适配器
mviewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
//
public Fragment getItem(int position) {
return mfragment.get(position);
}
@Override
public int getCount() {
return mfragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mtitle.get(position);
}
});
//将TabLayout 与ViewPager进行绑定
mtablayout.setupWithViewPager(mviewpager);
}Lo anterior es el código central de TabLayout + ViewPager + Fragment para realizar el deslizamiento de Tab. ViewPager establece el Adaptador para llenar Fragment (necesita preparar cuatro Fragments y cargarlos en una colección), y luego vincular TabLayout y ViewPager.
En este proceso, TabLayout es un indicador de etiqueta, ViewPager actúa como un contenedor y Fragment proporciona una fuente de datos para ViewPager. Lo entiendo de esta manera. Esta escena es como colgar una bolsa "ViewPager" llena de libros y papelería "Fragmento para llenar" en el gancho de la pared "TabLayout". ¿Cómo debería ser fácil de entender?
-
Cabe señalar que cuando Fragment y ViewPager se usan juntos, ViewPager usará un mecanismo de precarga, por lo que es posible que lo hayamos cargado antes de saltar a la página correspondiente. Esta es una experiencia de usuario muy mala y desperdicia el tiempo de los usuarios. Tráfico
De esta manera, nos hemos dado cuenta de la función de deslizar la página de inicio, bueno, ¡veamos cómo es el efecto!
-
A continuación, para lograr un efecto de mayor impacto, usemos un "marco flotante" de control FloatingActionButton, la primera página del marco flotante no es visible, las otras tres páginas son visibles y pueden realizar el evento de clic para ingresar a la página de configuración "una nueva Actividad".
* Echemos un vistazo al archivo de diseño del control:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp" >
</android.support.design.widget.FloatingActionButton>Estos atributos son muy simples, creo que todos saben que el efecto es equivalente a un Boutton flotando en la parte inferior de esta página.
-
Código del núcleo:
// 初始化悬浮框
fab_setting = (FloatingActionButton) findViewById(R.id.fab_setting);
// 设置启动 Activity 时悬浮框默认隐藏
fab_setting.setVisibility(View.GONE);
// 悬浮框的点击事件
fab_setting.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view){
startActivity(new Intent(this, SettingActivity.class));
}
});
// viewPager的滑动监听
mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.i(TAG, "position: "+position);
if (position == 0) {
fab_setting.setVisibility(View.GONE);
}else {
fab_setting.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});El código es muy simple, el principal es llamar al método addOnPageChangeListener () para establecer un escucha deslizante para viewPager, debe prestar atención a los tres métodos reescritos:
(1) onPageSelected (): indica el proceso donde se selecciona la página
(2) onPageScrollStateChanged (): indica el proceso de cambiar el estado deslizante de la página,
(3) onPageScrolled (): indica el proceso de deslizamiento de página
-
¿Qué hay de las representaciones:
La primera vez que grabé una imagen dinámica Gif, el efecto no es muy satisfactorio. Será solo un momento. ¡Creo que todos pueden entenderlo, y lo mejoraré lentamente en el futuro!
PD : ¡Este artículo es original, bienvenido a intercambiar aprendizaje juntos y progresar juntos! En caso de duda, puede seguir mi cuenta pública de WeChat (Banxia Minlan) y comunicarse conmigo en segundo plano.
¡No hay forma en la vida, cada paso cuenta!
