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

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

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

   下方的这个放置几个按钮的，实际是一个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

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

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

原文地址：http://cm0425.blog.51cto.com/10819451/1946911