手機影音第二天：底部菜單的實現

標籤：手機影音第二天：底部菜單的實現

    首頁面的下方，各個按鈕的實際效果

   下方的這個放置幾個按鈕的，實際是一個radiogroup,而radiogroup的父類是LinearLayout.

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/9B/B8/wKioL1lmQIajtfk7AAA7oF44Sls279.png-wh_500x0-wm_3-wmp_4-s_3164136869.png" title="QQ圖片20170712232823.png" alt="wKioL1lmQIajtfk7AAA7oF44Sls279.png-wh_50" />

    這幾個按鈕實際上是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

手機影音第二天：底部菜單的實現