手机影音第二天：底部菜单的实现

    主页面的下方，各个按钮的实际效果如图所示

   下方的这个放置几个按钮的，实际是一个radiogroup,而radiogroup的父类是LinearLayout.

    这几个按钮实际上是radiogroup的子button，然后设置了其中的图片和文字。在点击后，切换文字和图片，来实现选中的效果，类似于css里的鼠标放上去后，设置hover属性

1、activity_main.xml

先来看下主页面的布局，暂时只写了下边的这个

    

    由于这四个按钮的很多属性相同，所以抽出来，放到了style.xml里，作为一个外部引用的样式。

其中要注意的是每个RadioButton的drawableTop这个属性，这里就是显示各个图标的，引用了drawable里的各个xml资源，来实现选中时以及未选中时显示哪些图片。，下面就拿本地视频的这个来看一下这个图片的引用

    

    在radiobutton选中的时候，显示下方的那个资源图片，未选中时显示上方的那个资源图片。

2、style.xml

    这几个radiobutton的共同属性抽取出来的样式，即下方的botton_tag_style

    
    
        
        @color/colorPrimary
        @color/colorPrimaryDark
        @color/colorAccent
    

    
        
        wrap_content
        wrap_content
        @android:color/transparent 
        @drawable/rb_video_textcolor_selector
        10sp
        3dp
        center_vertical
        center
        1 ！

    

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页面切换至主页面，主页面下方的显示主菜单。下一篇博客将完善主菜单上方的主要显示区域