Introducción a esta sección
Ya le hemos explicado dos soluciones para realizar la barra de navegación inferior, pero estas dos soluciones solo son adecuadas para situaciones ordinarias.Si es como Sina Weibo, desea tener un pequeño icono rojo en el elemento de la barra de navegación inferior. Haga clic y luego agregue una serie de mensajes. De esta manera, las dos soluciones anteriores parecen ser impotentes. Veamos cómo se hacen las aplicaciones de otras personas. Abra las opciones de desarrollador del teléfono móvil, verifique el interior: mostrar los límites del diseño y luego abra nuestra En la aplicación a la que se hace referencia, puede ver que la barra de navegación inferior se ve así:
En la imagen de arriba, podemos ver que esta barra de navegación inferior no está compuesta por un simple TextView o RadioGroup. El esquema de diseño aproximado puede ser: un LinearLayout en la capa exterior, un RelativeLayout en el medio y un TextView en el medio, y luego TextView Hay un TextView con un fondo de círculo rojo o un pequeño punto rojo en la esquina superior derecha del . Este es probablemente el caso, y estos puntos deberían ser invisibles en momentos normales, y serán visibles cuando se presione la información, es decir, cuando hay información de categoría relevante. ¡Y mostrar el número correspondiente de información! Entonces veamos el efecto de esta barra de navegación inferior. Además, para facilitar la demostración, ¡el efecto de cambio de Fragmento no se mostrará aquí! Además, por cierto, revisa el Fragmento para obtener los puntos de conocimiento de los componentes de la Actividad.
1. Diagrama de efecto de realización:
Para facilitar la comprensión, haga clic en el botón aquí para simular la recepción de la información de inserción y luego muestre el punto rojo.
Diagrama de efecto de carrera:
2. Proceso de implementación:
Ok, implementemos el efecto anterior a continuación ~
Paso 1: Preparación de archivos de recursos relevantes:
Como antes, prepara los recursos de la serie dibujable:
Recurso de texto: tab_menu_text.xml
<?versión xml="1.0" codificación="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<elemento android:color="@color /text_yellow" android:state_selected="true" />
<item android:color="@color/text_gray" />
</selector>
Recurso de icono: tab_menu_better.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap /tab_better_pressed" android:state_selected="true" />
<item android:drawable="@mipmap/tab_better_normal" />
</selector>
¡Elimina a los otros tres también~!
Paso 2: Escriba el código de diseño de la actividad:
Debido a que el TextView de las cuatro opciones y los atributos de número de punto rojo en la esquina superior derecha son similares, de la siguiente manera:
<TextView
android:id="@+id/tab_menu_channel"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:textColor="@drawable/tab_menu_text "
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert"/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:background="@mipmap/bg_num"layout_height="20dp"
android:layout_toRightOf="@+id/tab_menu_channel"
android:layout_marginLeft="-10dp"
android:text="99+"
android:textSize="12sp"
android:gravity="center"
android:textColor="@color/text_white"/>
Los extraemos y los escribimos en style.xml:
<style name="tab_menu_text">
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">48dp< /item>
<item name="android:layout_centerInParent">true</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
</style>
<style name="tab_menu_bgnum">
<item name="android:layout_width">20dp</item>
<item name="android:layout_height">20dp</item>
<item name="android:fondo">@mipmap/bg_num</item>
<item name="android:layout_marginLeft">-10dp</item>
<item name="android:textSize">12sp</item>
<item name="android:gravity ">centro</elemento>
<item name="android:textColor">@color/text_white</item>
</estilo>
Luego comience a escribir nuestro diseño de actividad.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height ="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/ly_top_bar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/bg_topbar" >
<TextView
android:id="@+id/txt_topbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:text="信息"
android:textColor="@color/text_topbar"
android:textSize="18sp" />
<Ver
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_alignParentBottom="true"
android:background="@color/ div_white" />
</RelativeLayout>
<LinearLayout
android:id="@+id/ly_tab_menu"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/ bg_white"
androide:orientación="horizontal">
<LinearLayout
android:id="@+id/ly_tab_menu_channel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content "
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/tab_menu_channel"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_channel"
android:text="@string/tab_menu_alert" />
android:layout_width="wrap_content"
text="@string/tab_menu_alert" />
<TextView
android:id="@+id/tab_menu_channel_num"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_channel"
android:text="99+"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id= "@+id/ly_tab_menu_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
<TextView
android:layout_height="match_parent"
android:padding="5dp">
android:id="@+id/tab_menu_message"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_message"
android:text="@string/tab_menu_profile" />
<TextView
android:id="@+ id/tab_menu_message_num"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_message"
android:text="99+"
android:visibilidad="ido" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/ly_tab_menu_better"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding=" 5dp">
<TextView
android:id="@+id/tab_menu_better"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_better"
android:text="@string/tab_menu_pay" />
text="@string/tab_menu_pay" />
<TextView
android:id="@+id/tab_menu_better_num"
style="@style/tab_menu_bgnum"
android:layout_toRightOf="@+id/tab_menu_better"
android:text="99+"
android:visibility="gone" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id= "@+id/ly_tab_menu_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="@+id/tab_menu_setting"
style="@style/tab_menu_text"
android:drawableTop="@drawable/tab_menu_setting"
android:text="@string/tab_menu_alert" />
<ImageView
android:id="@+ id/tab_menu_setting_partner"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginLeft="-5dp"
android:layout_toRightOf="@id/tab_menu_setting"
</LinearLayout>layout_toRightOf="@id/tab_menu_setting"
android:visibility="ido"
android:src="@mipmap/partner_red" />
</RelativeLayout>
</LinearLayout>
<Ver
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_above ="@id/ly_tab_menu"
android:background="@color/div_white" />
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above=
androide "@id/div_tab_bar" :layout_below="@id/ly_top_bar"/>
</RelativeLayout>
Paso 3: Escriba el diseño y la clase de la interfaz Fragment
El diseño Fragmento consta de cuatro botones normales:
fg_mi.xml :
<?versión xml="1.0" codificación="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height ="match_parent"
android:orientation="vertical"
android:padding="5dp">
<Button
android:id="@+id/btn_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text= "第一个显示信息"/>
<Botón
android:id="@+id/btn_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="La segunda información de visualización"/>
<Botón
android:id="@+id/btn_tres"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="La tercera información de visualización"/>
<Button
android:id="@+id/btn_four "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="La cuarta información de visualización"/>
</LinearLayout>
Luego está la clase Fragment personalizada. Aquí obtenemos el pequeño punto rojo en la Actividad a través de getActivity.findViewById(). ¡Esta es solo una pantalla de control simple! MiFragmento.java :
clase pública MyFragment extiende Fragment implementa View.OnClickListener{
contexto privado mContext;
Botón privado btn_one;
Botón privado btn_two;
Botón privado btn_tres;
Botón privado btn_four;
public MyFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle SavedInstanceState) {
View view = inflater.inflate(R.layout.fg_my,container,false);
//Objeto UI
btn_one = (Botón) view.findViewById(R.id.btn_one);
btn_two = (Botón) view.findViewById(R.id.btn_two);
btn_tres = (Botón) view.findViewById(R.id.btn_tres);
btn_four = (Botón) view.findViewById(R.id.btn_four);
//Enlazar evento
btn_one.setOnClickListener(this);
btn_two.setOnClickListener(esto);
btn_tres.setOnClickListener(esto);
btn_four.setOnClickListener(esto);
volver a ver;
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_one:
TextView tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
tab_menu_channel_num.setText("11");
tab_menu_channel_num.setVisibility(View.VISIBLE);
romper;
case R.id.btn_two:
TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
tab_menu_mensaje_num.setText("20");
tab_menu_message_num.setVisibility(View.VISIBLE);
romper;
case R.id.btn_tres:
TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
tab_menu_better_num.setText("99+");
tab_menu_better_num.setVisibility(View.VISIBLE);
romper;
caso R.id.btn_cuatro:
ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
tab_menu_setting_partner.setVisibility(View.VISIBLE);
romper;
}
}
}
Paso 4: Escriba MainActivity
Aquí completamos la implementación de la lógica principal. Algunas partes son similares al TextView anterior para lograr el efecto de la barra de navegación inferior, por lo que no lo explicaré en detalle. El código es el siguiente:
Actividad principal.java :
/**
* Creado por Coder-pig el 30/08/2015 0030.
*/
clase pública MainActivity extiende AppCompatActivity implements View.OnClickListener {
// Objeto de UI de actividad
private LinearLayout ly_tab_menu_channel;
TextView privado tab_menu_channel;
TextView privado tab_menu_channel_num;
LinearLayout privado ly_tab_menu_message;
TextView privado tab_menu_message;
TextView privado tab_menu_message_num;
LinearLayout privado ly_tab_menu_better;
TextView privado tab_menu_better;
TextView privado tab_menu_better_num;
LinearLayout privado ly_tab_menu_setting;
vista de texto privada tab_menu_setting;
privado ImageView tab_menu_setting_partner;
FragmentManager privado fManager;
FragmentoTransacción privada fTransacción;
privado MyFragment fg1;
@Override
protected void onCreate(Paquete de estado de instancia guardado) {
super.onCreate(estado de instancia guardado);
setContentView(R.diseño.actividad_principal);
enlazarVistas();
ly_tab_menu_channel.performClick();
fg1 = nuevo MiFragmento();
fManager = getFragmentManager();
fTransacción = fManager.beginTransaction();
fTransaction.add(R.id.ly_content, fg1).commit();
}
privado vacío bindViews () {
ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);
ly_tab_menu_channel.setOnClickListener(esto);
ly_tab_menu_message.setOnClickListener(esto);
ly_tab_menu_better.setOnClickListener(esto);
ly_tab_menu_setting.setOnClickListener(esto);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ly_tab_menu_channel:
setSelected();
tab_menu_channel.setSelected(verdadero);
tab_menu_channel_num.setVisibility(View.INVISIBLE);
romper;
case R.id.ly_tab_menu_message:
setSelected();
tab_menu_message.setSelected(verdadero);
tab_menu_message_num.setVisibility(View.INVISIBLE);
romper;
case R.id.ly_tab_menu_better:
setSelected();
tab_menu_better.setSelected(verdadero);
tab_menu_better_num.setVisibility(View.INVISIBLE);
romper;
case R.id.ly_tab_menu_setting:
setSelected();
tab_menu_setting.setSelected(verdadero);
tab_menu_setting_partner.setVisibility(View.INVISIBLE);
break;
}
}
//Restablecer el estado seleccionado de todos los textos
private void setSelected() {
tab_menu_channel.setSelected(false);
tab_menu_message.setSelected(false);
tab_menu_better.setSelected(false);
_menu_setting .setSelected(falso);
}
}
Ok, hasta ahora, has terminado ~