Conversa intensiva sobre fragmentos do Android - Barra de navegação inferior + ViewPager Deslize para alternar entre as páginas

Nas três primeiras seções, usamos métodos diferentes para obter o efeito da barra de navegação inferior comum. Nesta seção, adicionaremos o ViewPager com base no segundo exemplo para obter o efeito de deslizar para alternar as páginas! A maioria dos meus amigos sabe o que é esse ViewPager. Se você não sabe, não importa. Vamos apresentar brevemente esse controle!

---

1. Breve introdução do ViewPager

---

1) Que tipo de controle é esse?

Resposta: Um componente de troca de página, podemos preenchê-lo com vários modos de exibição e, em seguida, podemos alternar entre diferentes modos de exibição deslizando para a esquerda e para a direita na tela sensível ao toque. Como o ListView que aprendemos anteriormente, precisamos de um adaptador (adaptador), o modo de exibição para ser exibido e Nosso ViewPager está vinculado, e ViewPager tem seu próprio Adapter-PagerAdapter específico! Além disso, o Google recomenda oficialmente que usemos Fragment para preencher o ViewPager, para que seja mais conveniente gerar cada página e gerenciar o ciclo de vida de cada página! Claro, ele nos fornece dois adaptadores diferentes, são eles:  FragmentPageAdapter e FragmentStatePagerAdapter ! E o que usamos nesta seção é o primeiro: FragmentPageAdapter! Outro ponto a ser mencionado é o mecanismo de cache do ViewPager : ViewPager irá armazenar em cache a página atual, a página anterior e a próxima página, por exemplo, existem quatro páginas 1, 2, 3 e 4: Quando estamos na primeira página : cache 1, 2
——> Na segunda página: Cache 1, 2, 3
——> Na terceira página: Cache 2, 3, 4 ——> Na quarta página Cache 3, 4 e assim por diante!

2) Use PagerAdapter para reescrever métodos relacionados:

• getCount( ) : Obtém quantas visualizações estão no viewpager
• destroyItem( ) : Remove uma página em um determinado local. É responsabilidade do adaptador remover essa exibição do contêiner. Isso é para garantir que a visualização seja removida quando o finishUpdate(viewGroup) retornar.
• instantiateItem( ) : ① Adicione a visualização na posição dada ao ViewGroup (container), crie e exiba-o ② Retorne um Objeto (chave) representando a página recém-adicionada, geralmente apenas retorne a própria visualização diretamente, é claro que você pode Você pode personalize sua própria chave, mas deve haver uma correspondência um-para-um entre a chave e cada exibição
• isViewFromObject ( ): determine se a chave retornada pela função instantiateItem(ViewGroup, int) e uma exibição de página representam a mesma exibição (ou seja, se eles correspondem entre si e representam a mesma exibição), geralmente escrevemos diretamente return view = = objeto; é isso. Quanto ao motivo disso ser mais complicado, terei a chance de entender mais tarde. Parece que existe um ArrayList em ViewPager que armazena informações de estado de exibição e as informações correspondentes são recuperadas de acordo com View!

PS: Não é necessário reescrever todos os métodos~

---

2. Realize o diagrama de efeitos e a estrutura de diretórios do projeto:

Vamos dar uma olhada no efeito que queremos alcançar primeiro.

Vamos dar uma olhada na estrutura do nosso projeto:

---

3. Implementação do código:

---

Passo 1: Preparação de arquivos de recursos relevantes:

PS: Nós o escrevemos com base na realização do método 2 da barra de navegação inferior, para que os arquivos de recursos possam ser copiados! Não vou postar muitas vezes aqui~!

Etapa 2: Escreva o arquivo de layout de activity_main.xml:

PS: Basta substituir o FrameLayout anterior por: android.support.v4.view.ViewPager:

activity_mian.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" layout_height="match_parent" 
            android:layout_centerInParent="true"
            android:gravity="center" 
            android:text="提醒"
            android:textColor="@color/text_topbar" 
            android:textSize="18sp" /> 

        <View 
            android:layout_width="match_parent" 
            android:layout_height="2px" 
            android:layout_alignParentBottom="true" 
            android:background="@color/ div_white" /> 

    </RelativeLayout> 


    <RadioGroup 
        android:id="@+id/rg_tab_bar" 
        android:layout_width="match_parent" 
        android:layout_height="56dp" 
        android:layout_alignParentBottom="true" 
        android:background="@color/ bg_white" 
        android:orientação="horizontal"> 

        <RadioButton
            android:id="@+id/rb_channel" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_channel" 
            android:text="@string/tab_menu_alert" /> 

        <RadioButton 
            android:id="@+ id/rb_message" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_message" 
            android:text="@string/tab_menu_profile" /> 

        <RadioButton 
            android:id="@+id/rb_better" 
            style=" @estilo/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_better" 
            android:text="@string/tab_menu_pay" />

        <RadioButtonlayout_width="match_parent" 
        android:layout_height="match_parent"
            android:id="@+id/rb_setting" 
            style="@style/tab_menu_item" 
            android:drawableTop="@drawable/tab_menu_setting" 
            android:text="@string/tab_menu_setting" /> 

    </RadioGroup> 

    <Ver 
        android:id ="@+id/div_tab_bar" 
        android:layout_width="match_parent" 
        android:layout_height="2px" 
        android:layout_above="@id/rg_tab_bar" 
        android:background="@color/div_white" /> 

    <android.support.v4 .view.ViewPager 
        android:id="@+id/vpager" 
        android:
        android:layout_above="@id/div_tab_bar" 
        android:layout_below="@id/ly_top_bar" />


</RelativeLayout>

Etapa 3: Escreva o layout e o código do Fragment:

PS: A propósito, para demonstrar o mecanismo do ViewPager, quatro fragmentos foram especialmente escritos aqui! Imprima a criação Faça login no CreateView!

fg_content.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height ="match_parent" 
    android:background="@color/bg_white" 
    android:orientation="vertical"> 

    <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:textSize="20sp" /> 

</LinearLayout>

MeuFragmento1.java :

/** 
 * Criado por Jay em 28/08/2015 0028. 
 */ 
public class MyFragment1 extends Fragment { 

    public MyFragment1() { 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState) { 
        View view = inflater. inflate(R.layout.fg_content, container, false); 
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content); 
        txt_content.setText("Fragmento"); 
        Log.e("HEHE", "1日狗"); 
        visão de retorno; 
    } 
}

Os outros três são como cabaças, é só mudar alguma coisa!

Etapa 4: personalize a classe FragmentPagerAdapter:

O código é muito simples, basta passar um FragmentManager e todo o resto é feito aqui!

/** 
 * Criado por Jay em 31/08/2015 0031. 
 */ 
public class MyFragmentPagerAdapter extends FragmentPagerAdapter { 

    private final int PAGER_COUNT = 4; 
    private MyFragment1 myFragment1 = nulo; 
    private MyFragment2 myFragment2 = nulo; 
    privado MyFragment3 myFragment3 = nulo; 
    privado MyFragment4 myFragment4 = nulo; 


    public MyFragmentPagerAdapter(FragmentManager fm) { 
        super(fm); 
        meuFragmento1 = new MeuFragmento1(); 
        meuFragmento2 = new MeuFragmento2(); 
        meuFragmento3 = new MeuFragmento3(); 
        meuFragmento4 = new MeuFragmento4(); 
    } 


    @Override  
    public int getCount() {
        return PAGER_COUNT;
    } 

    @Override 
    public Object instantiateItem(ViewGroup vg, int position) { 
        return super.instantiateItem(vg, position); 
    } 

    @Override 
    public void destroyItem(ViewGroup container, int position, Object object) { 
        System.out.println("position Destory" + position); 
        super.destroyItem(recipiente, posição, objeto); 
    } 

    @Override 
    public Fragment getItem(int position) { 
        Fragment fragment = null; 
        switch (posição) { 
            case MainActivity.PAGE_ONE: 
                fragment = myFragment1; 
                quebrar;
            caso MainActivity.PAGE_TWO: 
                fragmento = myFragment2; 
                quebrar; 
            caso MainActivity.PAGE_THREE: 
                fragmento = myFragment3; 
                quebrar; 
            caso MainActivity.PAGE_FOUR: 
                fragmento = myFragment4; 
                quebrar; 
        } 
        fragmento de retorno; 
    } 

}

Passo 5: Escrevendo MainActivity:

A lógica é muito simples, veja por si mesmo~

MainActivity.java:

pacote com.jay.fragmentdemo4; 

importar android.os.Bundle; 
importar android.support.v4.view.ViewPager; 
importar android.support.v7.app.AppCompatActivity; 
importar android.widget.RadioButton; 
importar android.widget.RadioGroup; 
importar android.widget.TextView; 


/** 
 * Criado por Coder-pig em 28/08/2015 0028. 
 */ 
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, 
        ViewPager.OnPageChangeListener { 

    //UI Objects 
    private TextView txt_topbar; 
    privado RadioGroup rg_tab_bar; 
    RadioButton privado rb_channel; 
    RadioButton privado rb_message;
    RadioButton privado rb_better; 
    RadioButton privado rb_setting; 
    privado ViewPager vpager; 

    private MyFragmentPagerAdapter mAdapter; 

    //几个代表页面的常量
    public static final int PAGE_ONE = 0; 
    public static final int PAGE_TWO = 1; 
    public static final int PAGE_THREE = 2; 
    public static final int PAGE_FOUR = 3; 


    @Override 
    void protegido onCreate(Pacote salvadoInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); 
        bindViews(); 
        rb_channel.setChecked(true); 
    }

    private void bindViews() { 
        txt_topbar = (TextView) findViewById(R.id.txt_topbar); 
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar); 
        rb_channel = (RadioButton) findViewById(R.id.rb_channel); 
        rb_message = (RadioButton) findViewById(R.id.rb_message); 
        rb_better = (RadioButton) findViewById(R.id.rb_better); 
        rb_setting = (RadioButton) findViewById(R.id.rb_setting); 
        rg_tab_bar.setOnCheckedChangeListener(this); 

        vpager = (ViewPager) findViewById(R.id.vpager); 
        vpager.setAdapter(mAdapter); 
        vpager.setCurrentItem(0); 
        vpager.addOnPageChangeListener(este); 
    } 

    @Override
    public void onCheckedChanged(RadioGroup group, intcheckedId) { 
        switch (checkedId) { 
            case R.id.rb_channel: 
                vpager.setCurrentItem(PAGE_ONE); 
                quebrar; 
            caso R.id.rb_message: 
                vpager.setCurrentItem(PAGE_TWO); 
                quebrar; 
            case R.id.rb_better: 
                vpager.setCurrentItem(PAGE_THREE); 
                quebrar; 
            case R.id.rb_setting: 
                vpager.setCurrentItem(PAGE_FOUR); 
                quebrar; 
        } 
    } 


    //重写ViewPager页面切换的处理方法
    @Override 
    Public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    } 

    @Override 
    public void onPageSelected(int position) { 
    } 

    @Override 
    public void onPageScrollStateChanged(int state) { 
        //Existem três estados, 0 significa nada, 1 Sliding, 2 deslizamento concluído 
        if (estado == 2) { 
            switch (vpager.getCurrentItem()) { 
                case PAGE_ONE: 
                    rb_channel.setChecked(true); 
                    break; 
                case PAGE_TWO: 
                    rb_message.setChecked(true); 
                    break; 
                case PAGE_THREE: 
                    rb_better. setChecked( verdadeiro);
                    quebrar; 
                caso PAGE_FOUR: 
                    rb_setting.setChecked(true); 
                    break;
            } 
        } 
} 
    }

PS: Ei, também postei o código da parte de importação do pacote acima, só porque estou com medo de você importar o pacote errado e aparecer alguns erros inexplicáveis! Como ViewPager está no pacote v4, Fragment, FragmentManager e FragmentTransaction precisam usar o pacote V4! Além disso, a maneira de obter FragmentManager não é usar getFragmentManager() diretamente, mas usar getSupportFragmentManager()!

Nota: Se o ViewPager for colocado atrás do RadioButton, o evento click do RadioButton será inválido.