Contoh Serpihan - Pelaksanaan Bar Navigasi Bawah (Kaedah 2)


Pengenalan kepada bahagian ini:

Dalam bahagian sebelumnya kami menggunakan LinearLayout + TextView untuk mencapai kesan bar navigasi bawah Kami perlu menetapkan semula setiap kali kami mengklik Status semua TextViews, dan kemudian memilih TextView yang diklik agak menyusahkan, bukan? RadioGroup + RadioButton untuk mencapai kesan bahagian kami yang terdahulu!

1. Beberapa pemikiran rawak

Bahagian ini menggunakan RadioButton untuk mencapai kesan pemilihan radio Jika anda tidak biasa dengannya atau belum pernah menggunakannya, anda boleh gerakkannya dahulu Langkah ke: RadioButtonRingkasnya, kami mempunyai RadioGroup membalut empat RadioButtons, dibahagikan dengan nisbah yang sama seperti sebelumnya: 1:1:1:1>Selain itu, kami sahaja perlu menulis semula RadioGroup OnCheckedChange, menilai checkid untuk mengetahui RadioButton yang telah diklik! Baiklah, mari mula menyusun!

2. Proses pelaksanaan

PS: Bahan-bahan di sini digunakan secara langsung daripada bahan-bahan di bahagian sebelumnya! Selain itu, sumber kelas boleh lukis semuanya dipilih Status ditukar kepada disemak!

Langkah 1: Tulis beberapa fail sumber untuk pilihan bawah

Sumber Gambar Boleh Lukis:

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_checked="true" />
>

Tiga yang lain mengikutinya!
Sumber teks:

tab_menu_text.xml

<?xml version="1.0" encoding="utf-8"?>

< ;selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/text_yellow" android:state_checked="true" /> ;
<item android:color="@color/text_gray" />
</selector>

背景资源：tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector :android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
        ; sol id android:color="#FFC4C4C4" />
        </shape>
    </item>
    <item>
    ; shape &   ;    <solid android:color ="@color/transparent" />
        </shape>
    </item>
</selector>

Langkah 2: Tulis reka letak Aktiviti kami

Apabila kami menggunakan TextView untuk melaksanakan bar navigasi bahagian bawah, kami menemui masalah Sifat setiap TextView adalah hampir sama. , dan dalam cadangan, kami juga meminta semua orang mengekstrak atribut yang sama dan menulisnya ke dalam Gaya Mungkin sesetengah rakan malas atau tidak tahu. Cara mengekstrak dan menggunakannya, inilah demonstrasi untuk anda:

:id android:layout_width="0dp" :background="../style /images/tab_menu_bg"

                  android:button="@null" android:paddingTop="3dp"

android:text="@string /tab_menu_alert"
android:textColor="@drawable/tab_menu_text"
android:textSize="18sp" />

我们可以把每个RadioButton都相同的属性抽取出来，写到style.xml文件中;><🎜item_><🎜 ">

    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
; item  name="lt. layout_height">match_parent</item>
    <item name="android:background">@drawable/tab_menu_bg</item>
    <item name="<t;button" /item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">3dp</item>
 nama tem< ="android:textColor">@drawable/tab_menu_text</item>
    <item name="android:textSize">18sp</item>
</style>
><🎜

Kemudian RadioButton dalam activity_main.xml kami tidak perlu menulis kod yang sama setiap kali. Hanya buat RadioButton style="@style/tab_menu_item" dan itu sahaja!

activity_main.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"
    android:background="../style/images/bg_gray"
    tools:context=""&Maint


    <RelativeLayout
         android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
   android 🎜>   android 🎜      android : latar belakang = "../ gaya/imej/bg_topbar" & gt;

& lt; textview
android: id = "@+id/txt_topbar"
android: Layout_width = "match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"<🎜                                                     >            android:textColor="@color/text_topbar "
            android:textSize="18sp" />

        <Lihat
            android:layout_width="match_parent"                                                                                                            tersebut 🎜>            android:layout_alignParentBottom= "benar"
             android:background="../style/images/div_white" />

    </RelativeLayout>

     < Radio "@+id/rg_tab_bar"
        android:layout_width="match_parent"
         android:layout_height="56dp"
        Android: Layout_AlignParentBottom = "True"
Android: latar belakang = "../ gaya/imej/bg_white"
android: orientation = "mendatar" & gt; id="@+id/rb_channel"
            style="@style/tab_menu_item"
                                                                                                                   id ;

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

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

        <RadioButton<🎜 >          id                                     id >            style="@style/tab_menu_item"
            android:drawableTop="@drawable/ta b_menu_setting"
                                android RadioGroup>

    <Lihat
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
android:layout_height="2px"
android:layout_above="@id/rg_tab_bar"
android:background="../style/images/div_white" />

<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/div_tab_bar"
android :layout_below="@id/ly_top_bar"></FrameLayout>

</RelativeLayout>

Langkah 3: Sembunyikan bar navigasi atas<🎜

AndroidManifest.xml menetapkan atribut tema

android:theme="@style/Theme.AppCompat.NoActionBar"
Langkah 4: Buat susun atur mudah dan kelas Fragmen:

Salin terus susun atur dan Fragmen bahagian sebelumnya:

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="../style/images/bg_white">

<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hey"
android:textColor="@color/text_yellow"
android:textSize="20sp"/>

</LinearLayout>

MyFragment.java:

/**
 * Dibuat oleh Coder-pig pada 2015/8/29 0028.
 */
kelas awam MyFragment melanjutkan Fragment {

    peribadi; Rentetan kandungan 🎜>    public MyFragment(String content) {
        this.content = content;
    }

    @Override
                                                                                                                                         ” Himpunan simpanInstanceState) {
Lihat pandangan = inflater.inflate(R.layout.fg_content,container,false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
           set txt >        pandangan kembali;
    }
}

Langkah 5: Tulis MainActivity.java

Ini jauh lebih mudah daripada pelaksanaan TextView, jadi saya tidak akan menerangkannya secara terperinci, cuma pergi ke kod:

MainActivity.java

/**
 * Dibuat oleh Coder-pig pada 2015/8/29 0028.
 */
kelas awam MainActivity melanjutkan AppCompatActivity melaksanakan RadioGroup.OnCheckedChangeBustener{

    peribadi RadioGroup_t bar 
//Fragment Object
    pribadi MyFragment fg1,fg2,fg3,fg4;
    pribadi FragmentManager fManager;

    @Override
                                                                                                                                                      dilindungi 🎜>        super.onCreate( savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        rg_tab_bar = (RadioGroup Ind. >bar = (RadioGroup Id.      rg_tab_bar.setOnCheckedChangeListener(this) ;
        //获取第一个单选按钮，并设置其为选中状态
        rb_chan nel = )(d_Radionel = )(d. >        rb_channel.setChecked(true);
}


    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction fTransaction f Transaction  =  fTransaction ); ragment(fTransaction);
        suis (checkedId){
            kes R.id.rb_channel:
                jika(fg1 = null){
                                                     f ragment");
                    fTransaction.add(R. id.ly_content,fg1);
                }lain{
                    fTransaction.show(fg1);
                }
                rehat;
             kes R.id.rb_message:
                jika(fg2 == null){<                                                                 baru MyFragment("第二个Fragment");
                     fTransaction.add( R.id.ly_content,fg2);
                 }lain{
                    fTransaction.show(fg2);
                                                                                                 
            kes R.id.rb_lebih baik:
                jika(fg3 == null) { fg3 = myFragment baru ("第三 个 fragment");
ftransaction.add (r.id.ly_content, fg3); fg3);                     fTransaction.add(R.id.ly_content,fg4);
                }lain{
fTransaction.show(fg4);
              }
                                                                                                        //Sembunyikan semua Fragmen
private void hideAllFragment (FragmentTransaction fragmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1>);<🎜 if(fg2 != null)fragmentTransaction.hide(fg2);
if(fg3 != null)frag mentTransaction .hide(fg3);
if(fg4 != null) fragmentTransaction.hide(fg4);
}

}



PS:
Saya terlupa untuk menyebut sesuatu di bahagian sebelumnya hanya boleh digunakan sekali dan FragmentManager mesti dipanggil setiap masa ia digunakan. Kaedah beginTransaction() memperoleh objek transaksi FragmentTransaction!
3. Rendering operasi

Malah, kesan yang dicapai dalam bahagian sebelumnya adalah sama:

4. Muat turun kod:

1.gifFragmentDemo2.zip

:
FragmentDemo2.zip muat turun

5. Ringkasan bahagian ini: Bahagian ini menerangkan kaedah kedua untuk melaksanakan bar navigasi bawah: RadioGroup + RadioButton Dengan pemilihan radio, kami Tidak perlu menetapkan semula status Terpilih bagi semua TextViews selepas setiap klik, seperti TextView, dan kemudian biarkan TextView yang diklik Dipilih adalah benar, jadi anda boleh menulis kurang kod~Itu sahaja untuk bahagian ini~Terima kasih

←
→

Laman web PHP Cina

RumahRumahKursusKursusArtikelArtikelSoal JawabSoal JawabKamusKamusManualManualMuat turunMuat turuncaricariAPPMuat turun APPMuat turun