Introducción a esta sección:
En la sección anterior, tuvimos una comprensión preliminar de Fragment, aprendimos el concepto, el ciclo de vida, la gestión de Fragment y los asuntos de Fragment, y Fragment cargado dinámica y estáticamente. ¡A partir de esta sección, explicaremos algunos ejemplos de Fragment en desarrollo real! ¡Y esta sección le explicará la realización de la barra de navegación inferior! Hay muchos métodos para la barra de navegación inferior básica, como usar TextView, usar RadioButton o usar TabLayout + RadioButton. Por supuesto, en situaciones complejas, ¡todavía tiene que usar el método de diseño de capa externa! En esta sección, usamos TextView para crear el efecto de una barra de navegación inferior, ¡y también estamos familiarizados con el uso de Fragment! Bien, ¡comencemos esta sección!
1. El diagrama de efectos a realizar y la estructura de directorios del proyecto:
Echemos un vistazo a las representaciones primero:
Luego mira la estructura de directorios de nuestro proyecto :
2. Proceso de implementación:
Paso 1: escriba algunos archivos de recursos para las opciones inferiores
Podemos ver en la imagen que cada elemento en la parte inferior de nosotros tiene un efecto diferente cuando se hace clic, ¿verdad? ¡Juzgamos por si es seleccionado! Los archivos de recursos que queremos escribir son: ¡primero la imagen, luego el texto y luego el fondo!
Recurso de imagen dibujable: tab_menu_channel.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap /tab_channel_pressed" android:state_selected="true" />
<item android:drawable="@mipmap/tab_channel_normal" />
</selector>
¡Los otros tres siguieron su ejemplo!
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 fondo: tab_menu_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" >
<forma>
<android sólido:color="#FFC4C4C4" />
</forma>
</elemento>
<elemento>
<forma>
<android sólido:color="@color/transparente" />
</forma>
</ elemento>
</selector>
Paso 2: escribe nuestro diseño de actividad
actividad_principal.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"layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:textColor="@color/text_topbar"
android:text="信息"/>
<Ver
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/ div_white"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/ly_tab_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"orientación="horizontal">
<TextView
android:id="@+id/txt_channel"layout_alignParentBottom="verdadero"
android:background="@color/bg_white"
android:orientación="horizontal">
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop= "@drawable/tab_menu_channel"
android:gravity="center"
android:padding="5dp"
android:text="@string/tab_menu_alert"
android:textColor="@drawable/tab_menu_text"
android:textSize="16sp" />
<TextView
android:id="@+id/txt_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_message"
android:gravity="center"
android:padding="5dp"
android: text="@string/tab_menu_profile"
android:textColor="@drawable/tab_menu_text"
android:textSize="16sp" />
<TextView
android:id="@+id/txt_better"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"layout_weight="1"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_better"
android:gravity="center"
android:padding="5dp"
android:text="@string/tab_menu_pay"
android:textColor="@drawable/tab_menu_text"
android:textSize="16sp" />
<TextView
android:id=" @+id/txt_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_bg"
android:drawablePadding="3dp"
android:drawableTop="@ dibujable/tab_menu_setting"relleno="5dp"
android:text="@string/tab_menu_setting"drawableTop="@drawable/tab_menu_setting"
android:gravedad="centro"
android:padding="5dp"
android:textColor="@drawable/tab_menu_text"
android:textSize="16sp"/>
</LinearLayout>
<Ver
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/div_white"
android:layout_above="@id/ly_tab_bar"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below=" @id/ly_top_bar"
androide:layout_above="@id/div_tab_bar"
android:id="@+id/ly_content">
</FrameLayout>
</RelativeLayout>
Análisis de código:
Primero defina el estilo de la barra de título superior, agregue un TextView en el medio del LinearLayout de 48dp como título.
Luego defina un LinerLayout con un tamaño de 56dp en su parte inferior, agregue cuatro TextViews en él, con una proporción de 1: 1: 1: 1, y establezca las propiedades relacionadas, y luego agregue un segmento de línea a este LinearLayout.
Finalmente, con la barra de título y la barra de navegación inferior como borde, escriba un FrameLayout, ancho y alto match_parent, ¡y utilícelo como un contenedor de fragmentos!
PD: Las cuatro propiedades de TextView aquí se repiten, también puede extraerlas usted mismo, escribir un estilo y configurarlo ~
Paso 3: ocultar la barra de navegación superior
Descubrí accidentalmente que la llamada anterior requestWindowFeature(Window.FEATURE_NO_TITLE) en la Actividad puede ocultar la barra de navegación superior del teléfono móvil, pero al escribir la demostración, descubrí que se informará un error, incluso si esta oración se escribe antes de setContentView ()! ¡Puede deberse a que AppCompatActivity se hereda en lugar de la clase Activity!
Por supuesto, el getSupportActionbar().hide() anterior oculta la barra de acciones, ¡pero seguirá estando en la interfaz! Finalmente, hay otra forma de escribir un estilo usted mismo y luego configurar el tema para la aplicación en AndroidManifest.xml:
Nota: coloque requestWindowFeature(Window.FEATURE_NO_TITLE) delante de super.onCreate(savedInstanceState) para ocultar ActionBar sin informar un error.
Luego configure el atributo del tema en AndroidManifest.xml :
android:tema="@estilo/Tema.AppCompat.NoActionBar"
PD: El "código de conciencia" anterior está patrocinado por el buen programador Cao Shen ~
Paso 4: Cree un diseño simple y una clase de Fragmento:
fg_content.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width ="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_white">
<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android :gravity="center"
android:text="呵呵"
android:textColor="@color/text_yellow"
android:tamaño de texto="20sp"/>
</LinearLayout>
MiFragmento.java:
/**
* Creado por Coder-pig el 28/8/2015 0028.
*/
public class MyFragment extends Fragment {
private String content;
public MyFragment(String content) {
this.content = content;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle SavedInstanceState) {
View view = inflater.inflate(R.layout.fg_content,container,false);
TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
txt_content.setText(contenido);
volver a ver;
}
}
Análisis de código:
¡Simplemente reescribe un método onCreateView(), y otros métodos se pueden reescribir según sea necesario!
Paso 5: Escriba MainActivity.java
Comencemos con algunas de las preguntas clave que debemos considerar:
- ¿Cuándo se inicializa Fragment y se agrega al contenedor? ¿Cuándo ocultar y mostrar?
- ¿Cómo hacer que se seleccione TextView? ¿Qué hacer después de seleccionar un TextView?
- ¿Cómo hacer un TextView en el estado seleccionado justo después de ingresar a MainActivity?
Bueno, respondamos las preguntas anteriores una por una:
- Después de seleccionar TextView, juzgamos que el Fragmento correspondiente está vacío. Si está vacío, inicialícelo y agréguelo al contenedor; para ocultar, definimos un método para ocultar todos los Fragmentos, y llamamos al método hideAll cada vez que haga clic en se activa el evento Todos los Fragmentos están ocultos, y si el Fragmento correspondiente a TextView no está vacío, mostraremos este Fragmento;
- Logramos esto a través del evento de clic.Después de hacer clic en TextView, primero restablece el estado seleccionado de todos los TextViews a falso, y luego establece el estado seleccionado del TextView en el que se hizo clic en verdadero;
- Esto es más simple, configuramos la selección a través del evento de clic, por lo que es suficiente agregar un método para activar el evento de clic en el método onCreate()~ txt_channel.performClick();
Ahora que se entiende la lógica, vayamos directamente al código:
MainActivity.java :
/**
* Creado por Coder-pig el 28/8/2015 0028.
*/
clase pública MainActivity extiende AppCompatActivity implementa View.OnClickListener{
//UI Object
private TextView txt_topbar;
privado TextView txt_channel;
TextView privado txt_message;
Vista de texto privada txt_better;
vista de texto privada txt_setting;
FrameLayout privado ly_content;
// Objeto de fragmento
privado MyFragment fg1,fg2,fg3,fg4;
FragmentManager privado fManager;
@Override
protected void onCreate(Paquete de estado de instancia guardado) {
super.onCreate(estado de instancia guardado);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
fManager = getFragmentManager();
bindViews();
txt_channel.performClick(); //Simule un clic, seleccione el primer elemento después de ingresar
}
//Inicialización del componente de interfaz de usuario y vinculación de eventos
private void bindViews( ) {
txt_topbar = (TextView) findViewById(R.id.txt_topbar);
txt_channel = (TextView) findViewById(R.id.txt_channel);
txt_message = (TextView) findViewById(R.id.txt_message);
txt_better = (TextView ) findViewById (R.id.txt_better);
txt_setting = (TextView) findViewById(R.id.txt_setting);
ly_content = (FrameLayout) findViewById(R.id.ly_content);
txt_channel.setOnClickListener(this);
txt_message.setOnClickListener(esto);
txt_better.setOnClickListener(esto);
txt_setting.setOnClickListener(esto);
}
//重置所有文本的选中状态
private void setSelected(){
txt_channel.setSelected(false);
txt_message.setSelected(falso);
txt_better.setSelected(falso);
txt_setting.setSelected(falso);
}
//隐藏所有Fragmento
privado vacío hideAllFragment(FragmentTransaction fragmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1);
if(fg2 != null)fragmentTransaction.hide(fg2);
if(fg3 != null)fragmentTransaction.hide(fg3);
if(fg4 != null)fragmentTransaction.hide(fg4);
}
@Override
public void onClick(Ver v) {
FragmentTransaction fTransaction = fManager.beginTransaction();
hideAllFragment(fTransacción);
switch (v.getId()){
case R.id.txt_channel:
setSelected();
txt_channel.setSelected(verdadero);
if(fg1 == null){
fg1 = new MiFragmento("第一个Fragmento");
fTransaction.add(R.id.ly_content,fg1);
}else{
fTransaction.show(fg1);
}
descanso;
case R.id.txt_message:
setSelected();
txt_message.setSelected(verdadero);
if(fg2 == null){
fg2 = new MiFragmento("第二个Fragmento");
fTransaction.add(R.id.ly_content,fg2);
}else{
fTransaction.show(fg2);
}
descanso;
case R.id.txt_better:
setSelected();
txt_better.setSelected(verdadero);
if(fg3 == null){
fg3 = new MiFragmento("第三个Fragmento");
fTransaction.add(R.id.ly_content,fg3);
}else{
fTransaction.show(fg3);
}
descanso;
caso R.id.txt_setting:
setSelected();
txt_setting.setSelected(verdadero);
if(fg4 == null){
fg4 = new MyFragment("第四个Fragment");
fTransaction.add(R.id.ly_content,fg4);
}else{
fTransaction.show(fg4);
}
descanso;
}
fTransacción.commit();
}
}