主頁面的下方，各個按鈕的實際效果如圖所示

下方的這個放置幾個按鈕的，實際是一個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

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