手機影音第二天:底部菜單的實現
阿新 • • 發佈:2017-07-13
手機影音第二天:底部菜單的實現
主頁面的下方,各個按鈕的實際效果如圖所示
下方的這個放置幾個按鈕的,實際是一個radiogroup,而radiogroup的父類是LinearLayout.
這幾個按鈕實際上是radiogroup的子button,然後設置了其中的圖片和文字。在點擊後,切換文字和圖片,來實現選中的效果,類似於css裏的鼠標放上去後,設置hover屬性
1、activity_main.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:orientation="vertical"> <!-- 標題欄--> <!--frameLayout --> <FrameLayout android:background="#22000000" android:id="@+id/fl_main_content" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp"/> <!-- RadioGroup--> <RadioGroup android:id="@+id/rg_bottom_tag" android:padding="3dp" android:gravity="center_vertical" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <RadioButton android:id="@+id/rb_video" android:text="本地視頻" android:drawableTop="@drawable/rb_video_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_audio" android:text="本地音頻" android:drawableTop="@drawable/rb_audio_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_net_video" android:text="網絡視頻" android:drawableTop="@drawable/rb_net_video_drawable_selector" style="@style/bottom_tag_style"/> <RadioButton android:id="@+id/rb_net_audio" android:text="網絡音頻" android:drawableTop="@drawable/rb_net_audio_drawable_selector" style="@style/bottom_tag_style"/> </RadioGroup> </LinearLayout>
由於這四個按鈕的很多屬性相同,所以抽出來,放到了style.xml裏,作為一個外部引用的樣式。
其中要註意的是每個RadioButton的drawableTop這個屬性,這裏就是顯示各個圖標的,引用了drawable裏的各個xml資源,來實現選中時以及未選中時顯示哪些圖片。,下面就拿本地視頻的這個來看一下這個圖片的引用
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/ic_tab_video"/> <item android:state_checked="true" android:drawable="@drawable/ic_tab_video_press"/> </selector>
在radiobutton選中的時候,顯示下方的那個資源圖片,未選中時顯示上方的那個資源圖片。
2、style.xml
這幾個radiobutton的共同屬性抽取出來的樣式,即下方的botton_tag_style
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="bottom_tag_style" > <!-- Customize your theme here. --> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@android:color/transparent</item> <!-- 這個屬性保證radioButton的左側圓圈隱藏 --> <item name="android:textColor">@drawable/rb_video_textcolor_selector</item> <item name="android:textSize">10sp</item> <item name="android:drawablePadding">3dp</item> <item name="android:layout_gravity">center_vertical</item> <item name="android:gravity">center</item> <item name="android:layout_weight">1</item> <!-- 使這四個按鈕平分寬度 -->! </style> </resources>
3、MainActivity.java
在這裏需要實例化這些布局,並且默認進入主頁面時,選中video這個按鈕
package com.yuanlp.mobileplayer.activity; import android.app.Activity; import android.os.Bundle; import android.widget.FrameLayout; import android.widget.RadioGroup; import com.yuanlp.mobileplayer.R; /** * 主頁面 * Created by 原立鵬 on 2017/7/12. */ public class MainActivity extends Activity{ private FrameLayout fl_main_content; private RadioGroup rg_bottom_tag; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fl_main_content= (FrameLayout) findViewById(R.id.fl_main_content); rg_bottom_tag= (RadioGroup) findViewById(R.id.rg_bottom_tag); rg_bottom_tag.check(R.id.rb_video); //默認選中主頁的本地視頻 } }
現在已經完善了打開程序時的loding頁面以及從loding頁面切換至主頁面,主頁面下方的顯示主菜單。下一篇博客將完善主菜單上方的主要顯示區域
本文出自 “YuanGuShi” 博客,請務必保留此出處http://cm0425.blog.51cto.com/10819451/1946911
手機影音第二天:底部菜單的實現